可以覆盖fabricjs中的边界框选择区域 - 控制选项

Question

在这里，我们正在 Fabric.js 中创建设计工具。我们在 Fabric.js 中为画布对象创建了自定义选择区域。我阅读了 Fabric.js 中的源代码，它生成了用于边界框的方框，但我想更改我的自定义。选择区域的外观。有人可以建议我吗？

我们想要自定义选择区域的外观。

我们已经尝试过此代码context.setLineDash()用于选择区域。

if (fabric.StaticCanvas.supports('setLineDash') === true) {
    ctx.setLineDash([4, 4]);
}

请参考Github上的代码。但在我的工作区域中无法正常工作。

这里我们附加了BorderdasharrayFabric 函数中的属性创建

fabric.Object.prototype.set({  
        borderColor: 'green',  
        cornerColor: 'purple',  
        cornerSize: 33,
        transparentCorners: false,padding:4,
        borderDashArray:[50,25]          
    });

但我们需要在 Fabric.js 中为该选择区域创建动画跳舞点/移动点。

我们如何在fabric.js中创建自定义选择区域？

Answer 1

对于动画“borderDashArray”，lineDashOffset上的 MDN 文档提供了一个Marching Ants 示例，其中包含以下内容（小提琴演示）：

\n

var canvas = document.getElementById("canvas");\nvar ctx = canvas.getContext("2d");\nvar offset = 0;\n\nfunction draw() {\n\xc2\xa0 ctx.clearRect(0,0, canvas.width, canvas.height);\n\xc2\xa0 ctx.setLineDash([4, 2]);\n\xc2\xa0 ctx.lineDashOffset = -offset;\n\xc2\xa0 ctx.strokeRect(10,10, 100, 100);\n}\n\nfunction march() {\n\xc2\xa0 offset++;\n\xc2\xa0 if (offset > 16) {\n\xc2\xa0\xc2\xa0\xc2\xa0 offset = 0;\n\xc2\xa0 }\n\xc2\xa0 draw();\n\xc2\xa0 setTimeout(march, 20);\n}\n\nmarch();\n

\n

基于fabricjs object_interactivity.mixin.js的 drawBorders函数，上述可以应用如下：

\n

fabric.Object.prototype.set({  \n        borderColor: \'green\',  \n        cornerColor: \'purple\',  \n        cornerSize: 33,\n        transparentCorners: false,padding:14,\n        borderDashArray:[50,25]          \n    });\n// initialize fabric canvas and assign to global windows object for debug\nvar canvas = window._canvas = new fabric.Canvas(\'c\',{width: 500, height: 500});\ntextbox = new fabric.Textbox(\'Hello, World!\', {\n  width: 200,\n  height: 200,\n  top: 80,\n  left: 80,\n  fontSize: 50,\n  textAlign: \'center\',\n});\ncanvas.add(textbox);\ntextbox2 = new fabric.Textbox(\'Hello, World!\', {\n  width: 200,\n  height: 200,\n  top: 160,\n  left: 160,\n  fontSize: 50,\n  textAlign: \'center\',\n});\ncanvas.add(textbox2);\ncanvas.renderAll();\ncanvas.setActiveObject(textbox);\nvar offset = 0;\n\n  (function animate() {\n    offset++;\n    if (offset > 75) {\n      offset = 0;\n    }  \n    canvas.contextContainer.lineDashOffset = -offset;\n    canvas.renderAll();\n    fabric.util.requestAnimFrame(animate);\n  })();\n\n  canvas.on(\'after:render\', function() {\n    canvas.contextContainer.strokeStyle = \'green\';\n        canvas.contextContainer.setLineDash([50,25]);\n    canvas.forEachObject(function(obj) {\n      var bound = obj.getBoundingRect();            \n      canvas.contextContainer.strokeRect(\n        bound.left + 0.5,\n        bound.top + 0.5,\n        bound.width,\n        bound.height\n      );\n    })\n  });\n

\n

FabricJS边框动画小提琴演示。

\n