This_Wei

Come on!

Raphael 事件处理

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
let paper = Raphael('view', 350, 200);
let rect = paper.rect(0, 0, 300, 200);
rect.attr({fill: 'white'}); // 设置图形填充，否则只能点击边框
let text = null;
// 点击矩形显示点击位置坐标
rect.click(function (event, x, y) {
    console.log('Click event: ', event, x, y);
    if (text != null) {
        text.remove();
    }
    text = paper.text(325, 10, "(" + event.layerX + "," + event.layerY + ")");
});
// 双击切换背景颜色，双击时会触发两次单击事件
rect.dblclick(function (event, x, y) {
    if (rect.attr("fill") === 'white') {
        rect.attr({fill: 'gray'});
    } else {
        rect.attr({fill: 'white'});
    }
});
// 绘制一个圆形，实现拖动效果
circle = paper.circle(50, 50, 20).attr({fill: 'white'});
circle.drag(function (dx, dy, x, y, event) {
    console.log('On move: ', dx, dy, x, y, event);
    circle.attr("cx", event.layerX);
    circle.attr("cy", event.layerY);
}, function (x, y, event) {
    console.log('Move start: ', x, y, event)
}, function (event) {
    console.log('Move end: ', event);
});
// 给圆形添加hover处理函数，实现鼠标移入切换颜色
circle.hover(function (event, x, y) {
    console.log('Hover in: ', event, x, y);
    circle.attr('fill', 'red');
}, function (event, x, y) {
    console.log('Hover out: ', event, x, y);
    circle.attr('fill', 'white');
});

结果

0%