Question

我将图像从工具栏拖放到画布上。用户可以多次从工具栏中拖放相同的图像。用户也可以双击删除特定对象，如下面的链接所示..

我想在页面加载时以及在画布中移动它们之后记录这些对象的位置。为此我要添加一个事件监听器和一个函数，它将显示按钮单击时所有对象的位置< / p>

myButton.addEventListener('click', position);

JS函数用于计算对象的位置..

function Rectangle(props) {
    var posX = this.posX = props.x;
    var posY = this.posY = props.y;

    this.width = props.width;
    this.height = props.height;
    this.fill = props.fill;
    this.isDragging = props.isDragging;

    this.draw = function() {
        ctx.fillStyle = this.fill;
        ctx.fillRect(this.posX, this.posY, this.width, this.height);

    }
}

即使我正在添加上面的JS函数，我也没有得到按钮点击的输出..我不知道我哪里出错...在jQuery中有更简单的方法吗？？

包含上述JS函数的链接

http://jsfiddle.net/gkefk/27/

Answer 1

花几分钟时间来回顾一下你的内容。

您的顶部工具栏包含可拖动的DOM元素。

一旦在Kinetic Canvas上发布了任何可拖动的DOM元素，您就会在与删除的DOM元素相同的位置创建一个新的Kinetic.Image。 jQuery无法访问此Kinetic.Image，因为它不是DOM元素 - 它是Kinetic.Image节点。

因此，您必须使用KineticJS而非jQuery访问新的Kinetic.Image。

在你的dragDrop中，你给Kinetic.Image一个name属性。 KineticJS name属性类似于Html / CSS中的类。这意味着如果将多个图像拖到画布上，您将拥有2个具有相同name的图像。这可能不是你想要的。

此外，您为每个Kinetic.Image分配的name是“house.png”，您可以从drop元素的“url”数据属性中获取它。这可能不是你想要的。

相反，如果您为每个新的Kinetic.Images分配一个唯一的id属性，那么您可以使用stage.find来获取具有指定id的特定Kinetic.Image。 Kinetic id属性类似于Html / CSS id属性。然后你可以得到任何想要的Kinetic.Image的x，y，宽度，高度，如下所示：

var myDesiredKineticImage = stage.find("#"+myDesiredId);

var x=myDesiredKineticImage.x();
var y=myDesiredKineticImage.y();
var width=myDesiredKineticImage.width();
var height=myDesiredKineticImage.height());

在画布中查找对象的位置

1 个答案: