-
Notifications
You must be signed in to change notification settings - Fork 0
/
4-events-mouseDownAndMouseMove(自己实现了 svg.draggable插件) -line.html
72 lines (57 loc) · 1.9 KB
/
4-events-mouseDownAndMouseMove(自己实现了 svg.draggable插件) -line.html
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<head>
<title>Title</title>
<!--
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
-->
<!--高版本-->
<script src="svg311/node_modules/@svgdotjs/svg.js/dist/svg.js"></script>
<script src="svg311/node_modules/@svgdotjs/svg.panzoom.js/dist/svg.panzoom.js"></script>
<script src="svg311/node_modules/@svgdotjs/svg.draggable.js/dist/svg.draggable.js"></script>
</head>
<body>
<div id="drawing"></div>
</body>
<!--
https://svgjs.com/docs/2.7/events/#basic-events
-->
<script >
var defaultColor = "green";
var draw = SVG().addTo('#drawing').size(800, 800)
var rect = draw.line(100, 100, 200, 100).css({"stroke":defaultColor,"stroke-width":"8px"});
initEvent(rect);
function initEvent(svgObject){
svgObject.on("mousedown",function(e1){
svgObject.css({"fill":"red","stroke":"red"});
svgObject.data("moveingStatus",true)
}).on("mouseup",function(e1){
svgObject.css({"fill":defaultColor,"stroke":defaultColor});
svgObject.data("moveingStatus",false)
})
// 虽然这里实现没问题，但实际效果，如果鼠标移动过于灵敏，超出了 svgObject 区域，则会无法移动
// svgObject.on("mousemove",function(e2){
// console.log(e2)
// var moveingStatus = svgObject.data("moveingStatus")
// if(moveingStatus){
// var dx = e2.movementX;
// var dy = e2.movementY;
// svgObject.dmove(dx,dy)
// }
// })
draw.on("mousemove",function(e2){
console.log(e2)
var moveingStatus = svgObject.data("moveingStatus")
if(moveingStatus){
var box = svgObject.rbox();
var x = e2.x-box.w/2;
var y = e2.y-box.h/2;
svgObject.move(x,y)
}
})
}
</script>
</html>