在这里,我们正在fabric.js中使用创建设计工具。我们在fabric.js中为画布对象创建了自定义选择区域。我阅读了 Fabric.js 中的源代码,它生成了用于边界框的方框,但我想更改我的自定义。选择区域的外观。有人可以告诉我吗?
我们想要自定义选择区域外观。
我们已尝试使用此代码
context.setLineDash()
来选择区域。
if (fabric.StaticCanvas.supports('setLineDash') === true) {
ctx.setLineDash([4, 4]);
}
参考来自Github的代码。但在我的工作区域中无法正常工作。
这里我们附上了
Borderdasharray
在fabric函数中创建属性
fabric.Object.prototype.set({
borderColor: 'green',
cornerColor: 'purple',
cornerSize: 33,
transparentCorners: false,padding:4,
borderDashArray:[50,25]
});
但是我们需要在 Fabric.js 中为该选择区域创建动画跳舞点/移动点。
我们如何在fabric.js中创建自定义选择区域?
对于动画“borderDashArray”,lineDashOffset 上的 MDN 文档提供了一个 Marching Ants 示例,其中包含以下内容(fiddle demo):
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var offset = 0;
function draw() {
ctx.clearRect(0,0, canvas.width, canvas.height);
ctx.setLineDash([4, 2]);
ctx.lineDashOffset = -offset;
ctx.strokeRect(10,10, 100, 100);
}
function march() {
offset++;
if (offset > 16) {
offset = 0;
}
draw();
setTimeout(march, 20);
}
march();
基于fabricjs object_interactivity.mixin.js drawBorders函数,以上可以应用如下:
fabric.Object.prototype.set({
borderColor: 'green',
cornerColor: 'purple',
cornerSize: 33,
transparentCorners: false,padding:14,
borderDashArray:[50,25]
});
// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c',{width: 500, height: 500});
textbox = new fabric.Textbox('Hello, World!', {
width: 200,
height: 200,
top: 80,
left: 80,
fontSize: 50,
textAlign: 'center',
});
canvas.add(textbox);
textbox2 = new fabric.Textbox('Hello, World!', {
width: 200,
height: 200,
top: 160,
left: 160,
fontSize: 50,
textAlign: 'center',
});
canvas.add(textbox2);
canvas.renderAll();
canvas.setActiveObject(textbox);
var offset = 0;
(function animate() {
offset++;
if (offset > 75) {
offset = 0;
}
canvas.contextContainer.lineDashOffset = -offset;
canvas.renderAll();
fabric.util.requestAnimFrame(animate);
})();
canvas.on('after:render', function() {
canvas.contextContainer.strokeStyle = 'green';
canvas.contextContainer.setLineDash([50,25]);
canvas.forEachObject(function(obj) {
var bound = obj.getBoundingRect();
canvas.contextContainer.strokeRect(
bound.left + 0.5,
bound.top + 0.5,
bound.width,
bound.height
);
})
});
定制:
borderDashArray: Dash stroke of borders
cornerDashArray: Dash stroke of corners
cornerStrokeColor: If corners are filled, this property controls the color of the stroke
cornerStyle: standrd 'rect' or 'circle'
selectionBackgroundColor: add an opaque or transparent layer to the selected object.
使用这个:
fabric.Object.prototype.set({
transparentCorners: false,
borderDashArray: ......