以编程方式从Coords中选择Fabricjs画布中的对象 [英] Programmatically select object in a Fabricjs canvas from coords

问题描述

我已经坚持了很久了.

我正在使用Fabricjs画布作为Three.js中3D模型的纹理.每当画布上有更改时，该模型就会将画布渲染为纹理.

I'm using a Fabricjs canvas as a texture for a 3D model in Three.js. The model renders the canvas as a texture every time there's a change on it.

我想单击模型并以编程方式在Fabricjs画布上选择一个项目.

I would like to click on the model and programmatically select an item on the Fabricjs canvas.

我实现了使用光线投射器将3d坐标转换为Fabric 2D坐标的方法，因此可以直接在模型上单击，将新项目添加到画布.但是我找不到在模型上单击来选择画布对象的方法，因为Fabricjs上没有"getObjectFromCoords"或类似方法

I achieved to transform the 3d coords to the Fabric 2D coords with a raycaster, so I can add new items to the canvas clicking directly on the model. But I can't find the way to select a canvas object clicking on the model because there's no "getObjectFromCoords" or similar method on Fabricjs

有什么方法可以从Fabricjs画布中以编程方式选择对象吗?

Is there any way to programmatically select an object from a Fabricjs canvas?

Threejs场景和Fabricjs画布

推荐答案

如果只需要根据(x,y)选择一个对象(即实际上不处理拖动，调整大小等)，则有fabric.Canvas.prototype._searchPossibleTargets() Fabric.js在内部使用:

If all you need is to simply select an object based on (x,y) (i.e. not actually handling drags, resizes, etc), there is fabric.Canvas.prototype._searchPossibleTargets() that Fabric.js uses internally:

const pointer = {x: x, y: y}
const target = canvas._searchPossibleTargets(canvas.getObjects(), pointer)
if (target) {
  canvas.setActiveObject(target).requestRenderAll()
} else {
  canvas.discardActiveObject().requestRenderAll()
}

请注意，由于它是内部方法，因此其签名可能会因版本而异.

Note that since it is an internal method, its signature could change from version to version.

这篇关于以编程方式从Coords中选择Fabricjs画布中的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！