Question

借助Raphael,我希望能够绕过含有文字物体的形状(下文例子中的斜线),拖拉形状或案文。我希望通过将职能交给案文要素drag(>)的方法来做到这一点,以便将这一方法交给相关表格(采用一种比较多变的办法,以,而另一种是 )。但是,这一结果产生了一个错误:“obj.addEventListener is not a function,text.drag(......)。

我要说一刀切,因此,我也许会说出一个真正的明显模糊,但我可以发现。在我的授权职能中,我是否误用了<条码>(<><>>><>>>> 字码>>,<条码>dragText,<条码>>> 。或者这件拉法尔的事情吗? 任何帮助都将受到高度赞赏。

<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>

<>Solution

如所述,问题在于如何选择属性名称:

// Associate the shape and text elements with each other
shape.text = text;
text.shape = shape;

将这些名字改成更精确的名称(而且不太可能与Raphael发生冲突)使问题消失了,但将这些问题作为 >>> 编码属性:

// 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);
}

Answer 1

// Associate the shape and text elements with each other
shape.text = text;
text.shape = shape;

你正在对Raphael物体添加属性。不知道Raphael如何工作(或将来会工作),这很危险,显然也造成了问题。如果你真的想将其联系起来,建议使用Raphaels Element.data:。

友情链接