javascript - 查找 Canvas 中对象的位置

Question

我正在将图像从工具栏拖放到 Canvas 上。用户可以多次从工具栏拖放同一图像。用户还可以双击删除特定对象，如下面的链接所示。

http://jsfiddle.net/gkefk/26/

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

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。这个 Kinetic.Image 无法被 jQuery 访问，因为它不是 DOM 元素——它是一个 Kinetic.Image 节点。

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

在拖放中，您为 Kinetic.Image 指定一个 name 属性。 KineticJS name 属性就像 Html/CSS 中的类。这意味着如果将 1 个以上的图像拖到 Canvas 上，您将拥有 2 个具有相同名称的图像。这可能不是您想要的。

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

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

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

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