KineticJS：获取图像数组 ID

Posted 2023-05-08

【中文标题】KineticJS：获取图像数组 ID

【英文标题】：KineticJS : get image array id

【发布时间】：2013-01-13 15:27:45

【问题描述】：

问题来了：

我有一个画布，还有四个（将来会更多，但 4 个用于测试......无论如何，没关系）可以通过单击“弹出”到画布中的图像。

每个图像可以在画布中出现多次。

到目前为止，弹出工作正常，图像可拖动...但我无法添加一些调整大小或 zIndex 功能，因为我只能选择最后一个添加到画布的图像。

在理想情况下，我希望通过单击/拖动图像，将其放在画布顶部，然后“选择”它，这样我就可以将调整大小功能连接到图像。

但是对于图像数组，我无法正确识别拖动的项目，并且无法使用（或无法使用）选择器。

谢谢。

编辑：一些代码

var imgCpt = 0;
var image = [];
function addDetails(img)    
imgCpt++;

var imageObj = new Image();
imageObj.onload = function() 
image[imgCpt] = new Kinetic.Image(
x: 0,
y: 0,
image: imageObj,
draggable: true,
id:image[imgCpt]
);

image[imgCpt].setX((stage.getWidth()/2) - (image[imgCpt].getWidth()/2));   
image[imgCpt].setY((stage.getHeight()/2) - (image[imgCpt].getHeight()/2));


eval(image[imgCpt]).on('click', function() 
alert(eval(imgCpt));
);

layer.add(image[imgCpt]);
stage.add(layer);                           
;

imageObj.src = 'uploads/'+img;

我已经尝试过不同的解决方案：多层，并作用于它而不是作用于图像，使用填充图像而不是图像的形状，但它总是同样的问题：我无法获得相关元素（而不是最后一个插入元素的id）

此版本适用于数组，但我昨天尝试使用 eval(); 构建图像 id；没有更多的成功。

感谢您的帮助

EDIT²：很抱歉坚持，但我真的很高兴在这一点上得到一些帮助，即使我认为它与 JS 相关而不是纯 KineticJS 相关。 谢谢。

【问题讨论】：

你能展示一些你的代码吗？您到底在阵列中存储了什么？您不需要对数组的引用，您需要引用已经在画布上的图像。每次创建图像时，您都可以给它一个唯一的 id，并通过诸如“click”之类的侦听器获取该 id。再次，显示一些代码，这样我就可以帮助你更多。

似乎是一个重复的问题...记得之前阅读过一个类似的问题...无论如何，只要您在创建对象时分配事件处理程序，您的代码就应该可以工作。另一个可能的错误可能是对所有对象使用临时变量或相同变量。添加代码可能有助于更快的响应

问题已用代码更新:)

【参考方案1】：

好的，伙计们，刚刚解决了问题：

eval("image["+imgCpt+"].on('click', function() alert("+imgCpt+"););");

而不是：

eval(image[imgCpt]).on('click', function() 
alert(eval(imgCpt));
);

现在是时候在点击背后设置一个真正的动作了。

感谢您的帮助；）