CODEWITHSUNDEEP
javascriptjquerycanvasthree.jsfabricjs
Ricki
Ricki

Reputation: 91

Programmatically select object in a Fabricjs canvas from coords

I've been stuck with this for so long now.

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.

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

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

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

Threejs scene and Fabricjs canvas

Upvotes: 1

Views: 1304

Answers (1)

shkaper
shkaper

Reputation: 4998

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.

Upvotes: 1

Related Questions