如何在 fabric.js 中以编程方式进行多选？

Question

我正在尝试选择一些 fabric.js 对象，以便我可以一起操作它们。

首先，我加载一个 SVG 文件作为织物组。

其次，我单击按钮过滤对象并“选择”我想要从中进行“活动选择”的对象。

在此示例中，您可以看到边界框不是您期望的位置。这导致我的应用出现一些问题。

我在关于 setCoords() 的“陷阱”中看到过，我不确定这是否与此有关，或者它如何应用在这里，因为我没有在组 x、y 中移动任何东西。

这个例子codepen试图展示一个简单的例子。

https://codepen.io/bencbaumann/pen/PodoeXq?editors=1010

html

<button id="multiselect">Multi Select</button>
<canvas id="canvas">

js

const canvas = new fabric.Canvas("canvas", {
  height: 500,
  width: 500
});

var url = "https://assets.codepen.io/496640/dots3.svg";

fabric.loadSVGFromURL(url, function (objects, options) {
  const svgObj = fabric.util.groupSVGElements(objects, options);

  canvas.add(svgObj);
  canvas.renderAll();

});

function selectObjectsByIds({ canvas, ids }) {
  console.log("ids", ids); // show [ids] that we are trying to select
  const objects = canvas.getObjects(); // get objects in canvas
  console.log("objects.length:", objects.length); 
  console.log("objs:", objects); 
  const objectsWithId = objects.filter((o) => o.id);
  const objectsWithChildren = objects.filter((o) => o._objects);
  const childrenWithId = objectsWithChildren
    .map((o) => o._objects)
    .flat()
    .filter((o) => o.id);
  const selected_ids = [...objectsWithId, ...childrenWithId];
  console.log(selected_ids)
  const selectedObjects = selected_ids.filter((o) => ids.includes(o.id));

  canvas.discardActiveObject();
  
  console.log('selectedObjects: ', selectedObjects)

  var sel = new fabric.ActiveSelection(selectedObjects, {
    canvas: canvas,
  });
  canvas.setActiveObject(sel);
  canvas.requestRenderAll();

}


var $ = function(id){return document.getElementById(id)};
var multiselect = $('multiselect')
multiselect.onclick = () => selectObjectsByIds({canvas, ids: ['dot']})

边界框不在应有的位置。我希望边界框位于我选择的对象周围。

3个绿点的id是'dot'

Answer 1

你需要在一个循环中添加子元素，而不是整个一个 像这样 https://codepen.io/rolitter/pen/XWPKoLv

const canvas = new fabric.Canvas("canvas", {
  height: 500,
  width: 500
});

var url = "https://assets.codepen.io/496640/dots3.svg";

fabric.loadSVGFromURL(url, function (objects, options) {
  const svgObj = fabric.util.groupSVGElements(objects, options);
  svgObj._objects.forEach(item => {
    // loop add dot
    canvas.add(item);
  })

  canvas.renderAll();

});

function selectObjectsByIds({ canvas, ids }) {
  const objects = canvas.getObjects(); // get objects in canvas
  const selectedObjects = objects.filter((o) => ids.includes(o.id));
  canvas.discardActiveObject();
  var sel = new fabric.ActiveSelection(selectedObjects, {
    canvas: canvas,
  });
  canvas.setActiveObject(sel);
  canvas.requestRenderAll();
}

var $ = function(id){return document.getElementById(id)};
var multiselect = $('multiselect')
multiselect.onclick = () => selectObjectsByIds({canvas, ids: ['dot2']})