我是使用Paper.JS的新手,我打算创建一个具有不同大小的矩形的区域,并且想要在用户单击每个矩形时捕获它们。矩形已渲染,但是onclick函数仅在第一个元素上触发,而在其他元素上不触发。这是我的代码:
// Mocking an AJAX request JSON
var sectores = [
{
topLeft: { x: 50, y: 50 },
bottomRight: { x: 150, y: 100 },
fillColor: 'red',
nombre: 'Dano 1',
codigo: 'x1'
},
{
topLeft: { x: 200, y: 50 },
bottomRight: { x: 300, y: 100 },
fillColor: 'green',
nombre: 'Dano 2',
codigo: 'x2'
}
];
sectores.forEach(function (sector) {
var topLeftPoint = new Point(sector.topLeft.x, sector.topLeft.y);
var bottomRightPoint = new Point(sector.bottomRight.x, sector.bottomRight.y);
var sectorRectangle = new Rectangle(topLeftPoint, bottomRightPoint);
var sectorPath = new Path.Rectangle(sectorRectangle);
sectorPath.fillColor = sector.fillColor;
sectorPath.onClick = function (event) {
this.fillColor = 'blue';
console.log('Nombre: ' + sector.nombre + ' Codigo: ' + sector.codigo);
};
});