在这里,我们在 fabric.js 中使用创 build 计工具。我们在 fabric.js 中为 Canvas 对象创建了自定义选择区域。我阅读了 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”,MDN 文档 lineDashOffset提供一个 Marching Ants example具有以下 ( 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
);
})
});
关于javascript - 可以覆盖 fabricjs 中的边界框选择区域 - 控制选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41218084/