在raphael js中的鼠标拖动上绘制线条 [英] draw line on mouse drag in raphael js
问题描述
这是我尝试过的:
<!doctype html>
<html>
<head>
<title>Editor</title>
<meta http-equiv="x-ua-compatible" content="ie=9"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/connector.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/style.css" />
<script type="text/javascript">
window.onload = function ()
{
var paper = new Raphael(Raphael("container", "100%", "100%"));
var line = paper.path();
var start = function (x, y) {
this.ox = this.attr("x");
this.oy = this.attr("y");
var line = paper.path("M", this.ox, this.oy);
},
move = function (dx, dy) {
this.attr({
x: this.ox + dx,
y: this.oy + dy
});
paper.path("L",x,y);
},
up = function () {
this.animate({
opacity: 0
}, 500);
};
paper.set(line).drag(move, start, up);
};
</script>
</head>
<body>
<div id="container">
<div id="header" style="margin-bottom: 0;">
<h1 id="title">Editor</h1>
<div id="footer"></div>
</div>
</div>
</body>
</html>
这是现场演示: https://jsbin.com/giqufilusu/1/edit ?html，输出
我不知道为什么它不起作用.是否有语法问题，或者我没有编写正确的方法.网络上有一些示例，但是大多数示例使用jquery + raphael js在鼠标事件上绘制线条，但我想使用raphael的drag()方法进行绘制.我该如何解决?
I don't know why its not working. Is there a syntax problem or I didn't code the correct way. There are some examples on web but most of them use jquery + raphael js to draw line on mouse events but I want to draw with drag() method of raphael. How do I fix this?
推荐答案
我不知道我是否正确.
I don't know if I got you right.
我想这是您想要实现的?
I guess this is what you want to achieve?
仅在启动函数的范围内定义了line变量.要调整线路，您需要使其对所有功能都可用. jsBin是一种快速而肮脏的方法，应该为您提供一些提示，告诉您如何使用Raphael进行此线条绘制.
You defined the line variable only in the scope of the start function. To adapt the line you need to make it available to all functions. The jsBin is a quick and dirty approach which should give you a hint how you can do this line drawing with Raphael.
这篇关于在raphael js中的鼠标拖动上绘制线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
