Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/svn/5.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html5 canvas 如何在FabricJS中修改控件小部件的形状?_Html5 Canvas_Fabricjs - Fatal编程技术网

Html5 canvas 如何在FabricJS中修改控件小部件的形状?

Html5 canvas 如何在FabricJS中修改控件小部件的形状?,html5-canvas,fabricjs,Html5 Canvas,Fabricjs,我正在web应用程序中使用FabricJS。当我绘制形状时,我注意到所有对象的控件都是矩形的。可以修改控件小部件的形状以适合对象的实际形状吗?比如说,一个带有圆形控件的圆圈 我通过了考试。但是没有修改控件小部件形状的选项 出于以下目的,我需要修改控件小部件的形状: 在我的应用程序中,每当单击对象时,其填充颜色都会在黑色和白色之间切换。在这种情况下,请参考下图,因为圆有一个矩形控件小部件,单击指向的像素将选择圆而不是矩形。我还使用hasControls属性隐藏控件小部件,使其不会出现。因此,用户对

我正在web应用程序中使用FabricJS。当我绘制形状时,我注意到所有对象的控件都是矩形的。可以修改控件小部件的形状以适合对象的实际形状吗?比如说,一个带有圆形控件的圆圈

我通过了考试。但是没有修改控件小部件形状的选项

出于以下目的,我需要修改控件小部件的形状: 在我的应用程序中,每当单击对象时,其填充颜色都会在黑色和白色之间切换。在这种情况下,请参考下图,因为圆有一个矩形控件小部件,单击指向的像素将选择圆而不是矩形。我还使用hasControls属性隐藏控件小部件,使其不会出现。因此,用户对控件小部件一无所知。那么,控件小部件的形状是否可编辑?
我不认为有一种简单的方法可以在不编写大量额外代码的情况下使用fabric.js做到这一点。Fabric.js始终绘制矩形边框,并将其用于选择控件。然而,既然你打算隐藏控件,听起来你最好还是使用它

如果为true,则对象检测将以每像素为基础,而不是以像素为基础 每个边界框

下面是一个快速演示:

const canvas=new fabric.canvas'c'{ 对,对, perPixelTargetFind:真 } const circle=新结构。circle{ 半径:50, 左:50,, 前50名, 笔画:'绿色', 填充:“白色”, 哈斯:错, hasBorders:错误 } const rect=new fabric.rect{ 宽度:200, 身高:150, 左:50,, 前25名, 笔划:“绿色”, 填充:“黑色”, 哈斯:错, hasBorders:错误 } canvas.on'mouse:down',e=>{ const obj=e.target 如果obj{ 对象集{ 填充:obj.fill==‘白色’?‘黑色’:‘白色’ } canvas.requestRenderAll } } canvas.addcircle,rect 圆形布林托夫隆 canvas.requestRenderAll 身体{ 背景:象牙; }
这太棒了!我在画布上调度了一个鼠标按下事件,以在单击对象后取消选择该对象。看来这项工作会做得很好。