Raphael.js 教程

ooAAMM 2019-03-25

展開全文

這是一篇寫于 2013 年的文章，而時間已經(jīng)來到 2018。

我們可以從 Raphael 的 Github 了解到，Raphael.js 最近一次更新是在 2016.11.12，版本號 2.2.7 - 這不禁讓人擔(dān)心它的未來。

我們看它最新的教程，會發(fā)現(xiàn)近年來前端工具的發(fā)展似乎與它毫無關(guān)系。教程中仍然推薦使用 script 或 AMD 規(guī)范引用它，沒有提到 webpack，也沒有 browserify。

而且它的瀏覽器兼容列表中仍然有 IE 6 - 站在 2018 來看，會覺得匪夷所思。

不過，是否繼續(xù)選擇 Raphael，還是留給真正有需求的人去決定。

引用 raphael

兩種方式：

古老的 script 標(biāo)簽：
```
<script src="raphael.js"></script>
```

AMD 規(guī)范的加載方式，通常指 require.js：

define([ "path/to/raphael" ], function( Raphael ) {
  console.log( Raphael )
});

用法

在加載 raphael 后，我們得到一個 Raphael 方法。

借助 Raphael 方法，我們可以在指定坐標(biāo)創(chuàng)建一個畫布，比如：

// 在瀏覽器窗口中，坐標(biāo) (10, 50) 位置創(chuàng)建一個畫布，長 320px，寬 200px。
var paper = Raphael(10, 50, 320, 200)

我們隨后的操作都將在這塊畫布上 - 注意，這里雖然叫畫布，但并不是 Canvas，Raphael 生成的其實是一塊 SVG 區(qū)域。

繪制基本圖形

給你一張 A4 紙，讓你畫一個半徑 50cm 的紅色太陽，你會怎么畫？

首先，你會找一個中心點，然后配合圓規(guī)，畫出一個圓，最后涂紅色。

Raphael 下繪制圓的原理基本也是一樣：

// 在 (50, 100) 的坐標(biāo)點上，繪制一個半徑為 50px 的圓
var circle = paper.circle(50, 100, 50)
// 給圓填充紅色
circle.attr({"fill":"red"})

除了圓，Raphael.js 還提供其他常規(guī)圖形的繪制方法，比如方形(rect)、橢圓(ellipse)、路徑(path)等。

另外，Raphael 方法還可以在 HTML 元素中創(chuàng)建畫布：

<div id="raphael"></div>
<script>
    //在 id 為 raphael 元素中創(chuàng)建畫布
    var paper = Raphael("raphael", 320, 200);
    var circle = paper.circle(100, 100, 50);
    circle.attr({"fill":"green"});
</script>

跟通過坐標(biāo)創(chuàng)建的畫布有什么區(qū)別？我們可以通過瀏覽器的開發(fā)者工具查看生成的畫布的結(jié)構(gòu)與樣式。

通過坐標(biāo)創(chuàng)建的畫布的 CSS 樣式是這樣的：

  overflow: hidden;
  position: absolute;
  left: 10px;
  top: 50px;

而通過元素創(chuàng)建的畫布的 CSS 樣式是這樣的：

  overflow: hidden;
  position: relative;

不難看出，前一種畫布是絕對定位，后一種則是包含在 HTML 元素中。

修改對象屬性

在畫布上創(chuàng)建出 Raphael 對象后，我們可以修改它們的各種屬性。

比如下面的代碼，我們先通過 text 方法生成了文字，然后修改文字字號為 30px，填充藍(lán)色，紅色描邊，調(diào)整透明度為 50%：

<div id="raphael"></div>
<script>
  var paper = Raphael("raphael", 300, 300)
  var t = paper.text(150, 150, "Hello from 陳三")
  t.attr({"font-size":"30px","fill":"blue","stroke":"red","opacity":".5"})
</script>

這一切都是通過 attr 方法完成。

變換對象

除了修改對象的屬性，我們還可以變換(transform)對象，比如平移、旋轉(zhuǎn)、縮放。

Raphael 對象變換有四個命令：

t – translate，平移
r – rotate，旋轉(zhuǎn)
s – scale，縮放
m – matrix

拿 t100,100r45t-100,0s.5 來說：

對象水平方向平移 100
垂直方向平移 100
旋轉(zhuǎn) 45 度
水平方向往負(fù)方向平移 100
縮小圖形到原來的一半

動畫效果

上面說到修改對象屬性和變換對象，因為有開始和結(jié)束兩個狀態(tài)，我們就可以添加動畫效果。

如下：

<div id="raphael"></div>
<script>
  var paper = Raphael("raphael", 400, 300)
  var circle = paper.circle(200, 150, 100)
  circle.attr({"fill":"red"})
  circle.animate({cx: 10, cy: 20, r: 8, "fill": "blue"}, 10e3)
</script>

圓心的初始坐標(biāo)為 (200,130)，半徑 100，填充紅色，繪制完成后，圓心坐標(biāo)調(diào)整為 (cx,cy)，即 (10,20)，半徑縮為 8，填充藍(lán)色，這個變化過程時長為 10e3 毫秒，即 10 秒。

綁定事件

因為 Raphael.js 創(chuàng)建的圖形均是 SVG，也是一種 DOM，這意味著，我們可以給它們綁定事件，比如單擊、雙擊、拖動、鼠標(biāo)移入、鼠標(biāo)移出等。

舉 hover 方法為例：

<div id="raphael"></div>
<script>
  var paper = Raphael("raphael", 400, 300)
  var circle = paper.circle(200, 150, 100)
  circle.attr({"fill":"red"})
  circle.hover(
    function(){circle.attr({"fill":"green"})},
    function(){circle.attr({"fill":"red"})}
  ) //給 circle 對象綁定 hover 事件
</script>

上例中，鼠標(biāo)浮動到圓上，填充色即變成綠色，移開則恢復(fù)成紅色。