Javascript 可以覆盖fabricjs中的边界框选择区域-控件选项
在这里,我们使用创建设计工具在fabric.js中工作。我们在fabric.js中为画布对象创建了自定义选择区域。我阅读了fabric.js中的源代码,它为边界框生成方形框,但我想更改我的自定义。选择区域外观。有人能告诉我吗 我们需要自定义选择区域的外观 我们已经为选择区域尝试了此代码Javascript 可以覆盖fabricjs中的边界框选择区域-控件选项,javascript,canvas,html5-canvas,custom-controls,fabricjs,Javascript,Canvas,Html5 Canvas,Custom Controls,Fabricjs,在这里,我们使用创建设计工具在fabric.js中工作。我们在fabric.js中为画布对象创建了自定义选择区域。我阅读了fabric.js中的源代码,它为边界框生成方形框,但我想更改我的自定义。选择区域外观。有人能告诉我吗 我们需要自定义选择区域的外观 我们已经为选择区域尝试了此代码context.setLineDash() if (fabric.StaticCanvas.supports('setLineDash') === true) { ctx.setLineDash([4,
context.setLineDash()
if (fabric.StaticCanvas.supports('setLineDash') === true) {
ctx.setLineDash([4, 4]);
}
参考代码。但在我的工作区域不会很好地工作
在这里,我们附加了在fabric函数中创建属性的Borderdasharray
fabric.Object.prototype.set({
borderColor: 'green',
cornerColor: 'purple',
cornerSize: 33,
transparentCorners: false,padding:4,
borderDashArray:[50,25]
});
但我们需要在fabric.js中为该选择区域创建动画舞蹈点/移动点
如何在fabric.js中创建自定义选择区域?用于自定义:
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: ......
用于动画“borderDashArray”
文件:
演示:
在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属性(例如obj.borderDashArray=[4,4])。Yes@Ben。。我已经创建了虚线选择框,但我需要创建舞蹈点划线/移动点划线选择框。这怎么可能?看。您可以创建一个动画来处理borderDashArray,并获得类似的效果。是的@neopheus,已经使用了您的代码,我在Canvas fabric.js中创建了borderDashArray属性。但我需要设置动画的“Borderdasharray”属性,如跳舞的点/移动的点。如何实现它,请给出一些想法?在你的想法中将只应用一些静态边界。它是否适用于画布上的每一个对象?或者它可能被设置为每个对象的动态?您更喜欢什么?Hi@neopheus。。。你明白我的意思吗?我们已经多次尝试您的代码,它只会显示单个对象。但我们需要将每个对象选择区域设置为画布上的跳舞点/移动点。
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
);
})
});