如何通过 Fabric.js 中的所选项目获取 ID

Question

我有一个 canvas，我在其中添加了一个矩形。每个矩形都有自己的 ID。如何通过双击 canvas 上的矩形来获取 ID？它可以是 Alert 或 consolLog。
示例：http://fabricjs.com/manage-selection

Answer 1

您可以将自己的属性添加到对象中。例如^[1]:

var rect = new fabric.Rect({
  // ...
  metaData: {
    id: 'myId'
  }
});

然后你可以得到 if on select 例如：

rect.on('selected', e => {
  console.log(canvas.getActiveObject().metaData?.id);
});

实例：

const canvas = new fabric.Canvas('c');

// create a rectangle object
const rect = new fabric.Rect({
  left: 10,
  top: 10,
  fill: 'red',
  width: 40,
  height: 40,
  metaData: {
    id: 'myId'
  }
});

// add "selected" listener
rect.on('selected', e => {
  console.log(canvas.getActiveObject().metaData?.id);
});

// "add" rectangle onto canvas
canvas.add(rect);

canvas {
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js" integrity="sha512-Pdu3zoEng2TLwwjnDne3O7zaeWZfEJHU5B63T+zLtME/wg1zfeSH/1wrtOzOC37u2Y1Ki8pTCdKsnbueOlFlMg==" crossorigin="anonymous"></script>

<canvas id="c" width="200" height="200"></canvas>

^[1] 当然你也可以直接添加属性（没有metaData）但也许提醒一下会更好你说这不是 fabris 属性而是你的

如何通过 Fabric.js 中的所选项目获取 ID

How to get id by selected item in Fabric.js

javascript

fabricjs