javascript - 以编程方式从坐标中选择 Fabricjs Canvas 中的对象

标签 javascript jquery canvas three.js fabricjs

我已经坚持了这么久。

我在 Three.js 中使用 Fabricjs Canvas 作为 3D 模型的纹理。每当 Canvas 发生变化时,模型都会将 Canvas 渲染为纹理。

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

我实现了使用 raycaster 将 3d 坐标转换为 Fabric 2D 坐标,因此我可以直接在模型上单击将新项目添加到 Canvas 。但是我找不到点击模型选择 Canvas 对象的方法,因为 Fabricjs 上没有“getObjectFromCoords”或类似方法

有没有办法以编程方式从 Fabricjs Canvas 中选择对象?

Threejs scene and Fabricjs canvas

最佳答案

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

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

请注意,由于它是一个内部方法,其签名可能会因版本而异。

关于javascript - 以编程方式从坐标中选择 Fabricjs Canvas 中的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53609015/

相关文章:

javascript - 使用 native JavaScript 在转换中获取 CSS 值

javascript - Vue.js 没有设置数据对象数组中声明的属性

jquery - 如何通过 jQuery 绝对定位元素?

javascript - 如何处理html5的canvas图片加载异步?

javascript - 自动放置流程图形状的算法

javascript - 在 Canvas 上绘制矩形

javascript - 无法使用@googlemaps/js-api-loader 生成 Nuxt 网站

javascript - 有渲染 2d 键盘的 JavaScript 库吗?

javascript - Twitter 预输入查询不起作用

javascript - 检测特定元素的位置