关于javascript:Raphael-JS

12次阅读

共计 5612 个字符，预计需要花费 15 分钟才能阅读完成。

Raphael JS 是一个用于在网页中绘制矢量图形的 Javascript 库。它应用 SVG W3C 举荐规范和 VML 作为创立图形的根底，简直所有的浏览器都反对。Raphael 绘制出的内容是实在的 DOM 节点，不仅能够通过动静批改它的大小、色彩等操作来创立你想要的内容，而且能够为你创立的内容赋予点击、悬停、动画等操作。

1、script 标签：
<script src=”raphael.min.js”></script>
2、AMD 加载形式：

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

3、npm 装置：
npm i raphael -S

查看 API 文档

1、创立画布
Raphael 有两种创立画布的形式：第一种是在浏览器窗口上创立画布，第二种是在元素上创立画布（倡议应用第二种）。
第一种：在浏览器窗口上创立画布
var paper = Raphael(x, y, width, height); // x 坐标 y 坐标宽度高度
这样的画布是定位在浏览器窗口的，所以画布的地位相对定位，所以它会和其余的 HTML 元素产生重叠。
第二种：在一个元素中创立画布
var paper = Raphael(element, width, height); // 元素节点自身或 ID 宽度高度
要在一个元素上创立画布，须要传入元素自身或元素 ID
// 以元素自身作为参数
var paper = Raphael(document.getElementById(‘paper’), 500, 500);
// 以元素 ID 作为参数
var paper = Raphael(‘paper’, 500, 500);

2、绘制根底图形
Raphael 可绘制的根底图形有圆形、矩形、椭圆：

paper.circle(x, y, r); // x 坐标 y 坐标 半径
paper.rect(x, y, width, height, r); // x 坐标 y 坐标 宽度 高度 圆角半径(可选)
paper.ellipse(x, y, rx, ry); // x 坐标 y 坐标 程度半径 垂直半径

3、给图形设置属性
应用 attr 办法给图形设置属性，attr 办法能够承受一个或两个参数：

paper.circle(200, 25, 20).attr({
  'fill': 'blue',
  'stroke': 'red',
  'stroke-width': 1
})
paper.rect(235, 5, 70, 40).attr('fill', 'yellow')
paper.ellipse(345, 25, 25, 15).attr('stroke-width', 4)

读取图形属性：

let circleAttr = circle.attr(['fill', 'stroke'])
let rectAttr = rect.attr('fill')

4、绘制简单图形
除了圆形、矩形、椭圆。在应用中咱们往往还须要绘制一些例如三角形、心形等图形。这时就要应用 path 办法来绘制图形了。path 办法只有一个参数（SVG 格局的门路字符串 paper.path([pathString])），门路字符串由一个或多个命令组成。每个命令以一个字母开始，随后是逗号（’,’）分隔的参数。例如：
‘M10,20 L30,40’
咱们看到两个命令：’M’ 与参数 (10, 20) 和 ’L’ 与参数 (30, 40)，大写字母的意思是命令是相对的，小写是绝对的。
这里是可用命令的简表，具体内容请参照：SVG 门路字符串格局。

let paper = Raphael('complexShapes', 800, 100)
paper.path('M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z')
  .attr({'fill': 'red', 'stroke-width': 0}) // 心形图案 1
paper.path('M100,30 L110,30 L110,20 L130,20 L130,30 L140,30 L140,20 L160,20 L160,30 L170,30 L170,50 L160,50 L160,60 L150,60 L150,70 L140,70 L140,80 L130,80 L130,70 L120,70 L120,60 L110,60 L110,50 L100,50 Z')
  .attr('fill', 'green') // 心形图案 2
paper.path('M190,40 L215,15 L240,40 L265,15 L290,40 L240,90 Z').attr('fill', 'purple') // 心形图案 3
paper.path('M305,20 l0,70 Z').attr('stroke-width', 2) // 垂直直线
paper.path('M315,55 l80,0 Z').attr('stroke-width', 2) // 程度直线
paper.path('M415,35 l40,40, l40,-40').attr('stroke-width', 2) // 折线
paper.path('M515,75 l40,-40, l40,40 Z').attr('stroke-width', 2) // 三角形
paper.path('M620,50 L720,50') // 绘一条直线
  .attr({
    'stroke': 'lime',
    'stroke-width': 3,
    'arrow-end': 'classic-wide-midium' // 加箭头属性
  })

给线条加箭头
门路的开端显示箭头。字符串格局是 <type>[-<width>[-<length>]]。
可能的类型：classic、block、open、oval、diamond、none
宽：wide、narrow、midium，长：long、short、midium。

5、绘制其余图形
（1）绘制文字
text 办法是用来绘制文本的，如果你须要换行，应用“\n”。有三个参数，paper.text(x, y, text);。x 坐标、y 坐标、文本字符串。
能够给 text 设置属性 attr。如：font-size、text-anchor、font-family、fill 属性。其中 text-anchor 属性有三个值：start、middle、end，别离示意对齐形式是开始、核心还是结尾，默认为 middle。

paper.text(10, 50, '绘制进去的文字').attr({
  'font-size': 20,
  'font-family': 'STXingkai',
  'text-anchor': 'start'
}) // 绘制文字

（2）引入图片
Raphael 能够应用 paper.image() 办法引入图片。该办法有五个参数：src、x、y、width、height（源图像的 URI、x 坐标、y 坐标、宽度、高度）。

paper.image(’./abc.png‘, 600, 20, 600, 600);

6、绘制突变图形
Raphael 反对线性和梯度突变去填充图形：
线性突变语法：
<angle>-<color>[-<color>[:<offset>]]-<color>
径向突变语法：
r[(<fx>,<fy>)]<color>[-<color>[:<offset>]]-<color>

// 线性突变
paper.rect(5, 5, 100, 80)
  .attr('fill', '0-red-blue')
  .attr('fill', '45-red-yellow')
// 径向突变
paper.circle(170, 50, 40)
  .attr('fill', 'rblack-white-black')
  .attr('fill', 'rblack-white:60-black') // 以半径的 60% 处为第二阶段的突变宰割点
// 偏离圆心的突变
paper.circle(280, 50, 40).attr('fill', 'r(0.1,0.5)#fff-#000') // r(0.5,o.5)是正圆心
paper.circle(390, 50, 40).attr('fill', 'r(0.5,0.1)#fff-#000')
paper.circle(510, 50, 40).attr('fill', 'r(0.9,0.5)#fff-#000')
paper.circle(630, 50, 40).attr('fill', 'r(0.5,0.9)#fff-#000')

7、增加事件
Raphael 个别具备以下事件：
click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover 等以及对应的解除事件，只有在后面加上“un”就能够了（unclick、undblclick）。
(1) hover、click

let circle = paper.circle(25, 25, 20).attr({'fill': 'purple', 'cursor': 'pointer'})
  .hover(() => circle.attr('fill', 'blue'), // f_in
    () => circle.attr('fill', 'purple') // f_out
  )
let ellipse = paper.ellipse(90, 25, 25, 15).attr({'fill': 'pink', 'cursor': 'pointer'})
  .click(() => {let fillColor = ellipse.attr('fill') === 'pink' ? 'green' : 'pink'
    ellipse.attr('fill', fillColor)
  })

（2）drag

let rect = paper.rect(140, 5, 70, 40).attr({'fill': 'yellow', 'cursor': 'pointer'})
let rectX, rectY
rect.drag((dx, dy) => { // onmove
    let x = rect.attr('x')
    let y = rect.attr('y')
    dx = (x + dx) > 730 ? (730 - x) : ((x + dx) < 0 ? (0 - x) : dx)
    dy = (y + dy) > 60 ? (60 - y) : ((y + dy) < 0 ? (0 - y) : dy)
    rectX = x + dx
    rectY = y + dy
    rect.transform('t' + dx + ',' + dy) // 平移
  },
  () => rect.attr('fill', 'blue'), // onstart
  () => { // onend
    rect.transform('')
    rect.attr({'x': rectX, 'y': rectY})
    rect.attr('fill', 'yellow')
  }
)
rect.dblclick(() => rect.undrag()) // 解除拖拽事件的绑定

8、变换和动画
（1）变换
为元素减少变换，这是独立于其余属性的变换，即变换不扭转元素的 x 或 y。变换字符串跟门路字符串的语法相似：
‘t100,120 r30,100,100 s1.5,1.2,100,100 r45 s1.5’
每个字母是一个命令，有四个命令：t 是平移，r 是旋转，s 是缩放，m 是矩阵，对应的大写字母是相对的变换。
下面的例子能够读作“平移 100,120；围绕 100,100 旋转 30°；围绕 100,100 缩放 1.5,1.2 倍；围绕核心旋转 45°；绝对核心缩放 1.5 倍”。

// 变换
let transformFlag = false
let rect = paper.rect(5, 5, 50, 50).attr({'fill': 'yellow', 'cursor': 'pointer'})
  .click(() => {rect.transform(transformFlag ? '':'t100,120 r30,100,100 s1.5,1.2,100,100 r45 s1.5')
    transformFlag = !transformFlag
  })

（2）动画
语法：Element.animate({动画属性的键值对}, 动画工夫, 缓动类型, 回调函数);
缓动类型其实就是动画过渡公式，是哪种类型的。次要有以下这些类型：

“linear”（线性）
“<”或“easeIn”或“ease-in”（由慢到快）
“>”或“easeOut”或“ease-out”（又快到慢）
“<>”或“easeInOut”或“ease-in-out”（由慢到快再到慢）
“backIn”或“back-in”（开始时回弹）
“backOut”或“back-out”（完结时回弹）
“elastic”（橡皮筋）
“bounce”（弹跳）

// 动画 1
let circle1 = paper.circle(110, 25, 20).attr({'fill': 'red', 'cursor': 'pointer'})
  .click(() => {
    circle1.animate({
      'cx': 110,
      'cy': 120,
      'transform': 's1.5'
    }, 1000, 'bounce')
  })
// 动画 2
let circle2 = paper.circle(200, 25, 15).attr({'fill': 'purple', 'fill-opacity': 0.5, 'cursor': 'pointer'}) // fill-opacity 透明度
  .hover(() => {
    circle2.animate({
      '20%': {
        cx: 300,
        easing: '<>'
      },
      '40%': {
        cy: 125,
        easing: '<>'
      },
      '60%': {
        cx: 200,
        easing: '<>'
      },
      '80%': {
        cy: 25,
        easing: '<>'
      }
    }, 2000)
  })

参考：
https://zhuanlan.zhihu.com/p/…
https://www.jianshu.com/p/570…
https://code.tutsplus.com/tut…

正文完