0

我正在开发一个基本的窗框配置器。我在下面的功能中拆分了眼镜。我想在单击时更改颜色并获取单击玻璃的位置以绘制开口方向线。我试图理解和实施 Lavrton 的方法（https://codesandbox.io/s/0xj7zml2zl?file=/src/index.js）但我无法成功。

function glassDraw(piece, frameWidth, frameHeight) {

var glassGroup = new Konva.Group();

for (i = 0; i <piece; i++) {
    var glass = new Konva.Rect({
        name: 'Rect',
        x: padding + (frameWidth / piece) * i,
        y: padding,
        width: frameWidth / piece,
        height: frameHeight - padding * 2,
        fill: 'lightblue',
        id: 'glass'+i,
        
    });
  

    glassGroup.add(glass);
    
} 
glassGroup.find("Rect").on('click', function (e) {
    // get id of the cube i drag
    var clickedId = e.target.attrs.id;
    
    $('#theId').html(clickedId);
 
})
return glassGroup;

}

当我使用带有 konva 元素 ("glass"+i) 的 id 的 getelementbyid 方法时，它返回 null。我想我需要成为一个 konva 元素。

4

1 回答 1

3

您必须为所有矩形创建一个单击侦听器。

for (let rect of glassGroup.children) { 
    rect.on('click', () => {

        console.log(rect.x(), rect.y()); // current position of the object
        console.log(rect.id()); // log id of the object
        rect.fill('green'); // set color to green
        layer.batchDraw(); // update layer (batchDraw just for better performance .draw() would work to)
})

}

确保在更改某些内容后始终通过调用 stage.draw() 或 layer.draw()（或 batchDraw() 以获得更好的性能）来更新舞台，否则你的舞台将不会显示你所做的任何事情。

如果此代码的某些内容不起作用，请随时询问。

祝你今天过得愉快。

于 2021-01-01T22:25:01.223 回答