在Raphael中委派拖动功能 [英] Delegating drag function in Raphael
问题描述
我希望使用Raphael拖动包含文本对象的形状(在下面的示例中为椭圆)，同时拖动形状或文本.我希望通过设置传递给文本元素的 drag()方法的函数来委托给关联的形状来做到这一点(尝试对 obj.addEventListener不是函数".
Using Raphael, I wish to be able to drag a shape (an ellipse in the example below) containing a text object, dragging either the shape or the text. I hoped to do this by setting the functions passed to the text element's drag() method to delegate to the associated shape (trying a more polymorphic approach to this other one). However, this results in an error "obj.addEventListener is not a function" when text.drag(...) is called.
我是javascript的新手，所以我可能犯了一个非常明显的错误，但是我找不到它.我是否在委托函数 moveText ， dragText 和 upText 中滥用了 call()?还是这是拉斐尔的事?任何帮助将不胜感激.
I'm new to javascript, so I've probably made a really obvious blunder, but I can't spot it. Have I misused call() in my delegating functions moveText, dragText, and upText? Or is this a Raphael thing? Any help would be greatly appreciated.
<html>
<head>
<title>Raphael delegated drag test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/raphael.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function initPage() {
'use strict';
var paper = Raphael("holder", 640, 480);
var shape = paper.ellipse(190,100,30, 20).attr({
fill: "green",
stroke: "green",
"fill-opacity": 0,
"stroke-width": 2,
cursor: "move"
});
var text = paper.text(190,100,"Ellipse").attr({
fill: "green",
stroke: "none",
cursor: "move"
});
// Associate the shape and text elements with each other
shape.text = text;
text.shape = shape;
// Drag start
var dragShape = function () {
this.ox = this.attr("cx");
this.oy = this.attr("cy");
}
var dragText = function () {
dragShape.call(this.shape);
}
// Drag move
var moveShape = function (dx, dy) {
this.attr({cx: this.ox + dx, cy: this.oy + dy});
this.text.attr({x: this.ox + dx, y: this.oy + dy});
}
var moveText = function (dx,dy) {
moveShape.call(this.shape,dx,dy);
}
// Drag release
var upShape = function () {
}
var upText = function () {
upShape.call(this.shape);
}
shape.drag(moveShape, dragShape, upShape);
text.drag(moveText, dragText, upText);
};
</script>
<div id="holder"></div>
</body>
</html>
解决方案
此答案中指出，问题出在属性名称的选择上:
As pointed out in this answer, the problem arises from the choice of the attribute names:
// Associate the shape and text elements with each other
shape.text = text;
text.shape = shape;
将它们更改为更详细的名称(与Raphael冲突的可能性较小)可以解决问题，但是将它们设置为 数据 属性:
Changing these to more verbose names (and less likely to conflict with Raphael) makes the problem go away, but it's safer to set them as data attributes :
// Associate the shape and text elements with each other
shape.data("enclosedText",text);
text.data("parentShape",shape);
// Drag start
var dragShape = function () {
this.ox = this.attr("cx");
this.oy = this.attr("cy");
}
var dragText = function () {
dragShape.call(this.data("parentShape"));
}
// Drag move
var moveShape = function (dx, dy) {
this.attr({cx: this.ox + dx, cy: this.oy + dy});
this.data("enclosedText").attr({x: this.ox + dx, y: this.oy + dy});
}
var moveText = function (dx,dy) {
moveShape.call(this.data("parentShape"),dx,dy);
}
推荐答案
// Associate the shape and text elements with each other
shape.text = text;
text.shape = shape;
您正在向Raphael对象添加属性.在不知道Raphael如何工作(或将来会工作)的情况下，这很危险，而且显然是导致问题的原因.如果您真的想与他们关联，我建议您使用Raphaels Element.data : http://raphaeljs.com/reference.html#Element.data
You are adding attributes to Raphael objects. Without knowing how Raphael works (or will work in the future) this is dangerous and apparently also what's causing the problem. If you really want to associate them i recommend using Raphaels Element.data: http://raphaeljs.com/reference.html#Element.data
这篇关于在Raphael中委派拖动功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
