重置组中对象的Fabric.js填充
重置组中对象的Fabric.js填充
提问于 2021-04-06 20:19:40
版本
4.2.0
测试用例
https://jsfiddle.net/dellvolk/c8zas7th/12/
let optObj = {
width: 300,
height: 300,
backgroundColor: "rgba(255,255,0,0.5)",
}
let canvas = new fabric.Canvas('c', optObj);
const stroke = {
stroke: 'red',
strokeWidth: 10,
}
const rect1 = new fabric.Rect({
left: 30,
top: 30,
...stroke,
width: 100,
height: 100,
fill: 'blue',
padding: -stroke.strokeWidth,
borderColor: '#000',
})
const rect2 = new fabric.Rect({
left: 130,
top: 130,
...stroke,
width: 100,
height: 100,
fill: 'green',
padding: -stroke.strokeWidth,
borderColor: '#000',
})
fabric.Object.prototype.padding = -10;
canvas.add(rect1);
canvas.add(rect2);预期行为
当对象形成组填充保留时，我需要它。我不需要为组设置填充。仅适用于此组中的元素。组的笔画保持原样，组中元素的黑色笔画就像元素本身的填充
实际行为
对象中的填充为-10，但当它们形成组时，填充更改为0
回答 1
Stack Overflow用户
发布于 2021-04-07 07:35:10
处理组中对象的边框大小计算的方法是drawBordersInGroup (请参见http://fabricjs.com/docs/fabric.Object.html#drawBordersInGroup)。
下面的代码应该作为此方法的替代方法，以便在大小计算中考虑填充：
https://jsfiddle.net/melchiar/bw384o2n/
//drop in replacement for drawBordersInGroup method
fabric.Object.prototype.drawBordersInGroup = function(ctx, options, styleOverride) {
styleOverride = styleOverride || {};
var bbox = fabric.util.sizeAfterTransform(this.width, this.height, options),
strokeWidth = this.strokeWidth,
strokeUniform = this.strokeUniform,
//borderScaleFactor = this.borderScaleFactor,
//adds object padding to border scale calculation
borderScaleFactor = this.borderScaleFactor + this.padding * 2,
width =
bbox.x + strokeWidth * (strokeUniform ? this.canvas.getZoom() : options.scaleX) + borderScaleFactor,
height =
bbox.y + strokeWidth * (strokeUniform ? this.canvas.getZoom() : options.scaleY) + borderScaleFactor;
ctx.save();
this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray, null);
ctx.strokeStyle = styleOverride.borderColor || this.borderColor;
ctx.strokeRect(
-width / 2,
-height / 2,
width,
height
);
ctx.restore();
return this;
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66968530
复制相关文章
相似问题
腾讯云开发者
