嗨，我正在研究 fabric.js 。单击应用按钮，我在正确显示的组中添加文本和矩形。但是当我尝试缩放组时，宽度和高度不会改变。这是 jsfiddle
代码
function createCustomComments() {
try {
var selText = $('#txtCustomComments').val();
var color = new fabric.Color(colorPicker.val()).toRgb();
var fontSize = fontPicker.val();
commentText = new fabric.IText(selText, {
fontSize: fontSize,
hasControls: false,
hasBorders: true,
originX: 'center',
backgroundColor: 'rgba(0,0,0,0)',
borderColor: color,
//opacity: 0.6,
fill: color,
fontFamily: "helvetica"
});
var commentRectange = new fabric.Rect({
originX: 'center',
top: 30,
width: 300,
height: 200,
fill: 'rgba(0,0,0,0)',
stroke: color,
strokeWidth: 4
});
var group = new fabric.Group([commentText, commentRectange], {
left: 100,
top: 100
});
canvas.add(group);
canvas.bringForward(group);
} catch (exception) {
console.log(exception);
}
}
最佳答案
我已经开始演奏你的 fiddle
首先导出的 JSON
{
"objects": [
{
"type": "image",
"width": 1050,
"height": 829,
"crossOrigin": "Anonymous",
"src": "https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg",
"filters": [
],
"resizeFilters": [
]
},
{
"type": "group",
"left": 100,
"top": 100,
"width": 304,
"height": 234,
"objects": [
{
"type": "i-text",
"originX": "center",
"originY": "top",
"left": 0,
"top": -117,
"width": 103.36,
"height": 22.6,
"fill": "rgb(255,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "rgba(0,0,0,0)",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"text": "dummy text",
"fontSize": "20",
"fontWeight": "normal",
"fontFamily": "helvetica",
"fontStyle": "",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "left",
"textBackgroundColor": "",
"charSpacing": 0,
"styles": {
}
},
{
"type": "rect",
"originX": "center",
"originY": "top",
"left": 0,
"top": -87,
"width": 300,
"height": 200,
"fill": "rgba(0,0,0,0)",
"stroke": "rgb(255,0,0)",
"strokeWidth": 4,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"rx": 0,
"ry": 0
}
]
}
],
"background": ""
}
第二个导出的 JSON
{
"objects": [
{
"type": "image",
"width": 1050,
"height": 829,
"crossOrigin": "Anonymous",
"src": "https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg",
"filters": [
],
"resizeFilters": [
]
},
{
"type": "group",
"left": 100,
"top": 100,
"width": 304,
"height": 234,
"scaleX": 1.55,
"scaleY": 1.55,
"objects": [
{
"type": "i-text",
"originX": "center",
"originY": "top",
"left": 0,
"top": -117,
"width": 103.36,
"height": 22.6,
"fill": "rgb(255,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "rgba(0,0,0,0)",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"text": "dummy text",
"fontSize": "20",
"fontWeight": "normal",
"fontFamily": "helvetica",
"fontStyle": "",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "left",
"textBackgroundColor": "",
"charSpacing": 0,
"styles": {
}
},
{
"type": "rect",
"originX": "center",
"originY": "top",
"left": 0,
"top": -87,
"width": 300,
"height": 200,
"fill": "rgba(0,0,0,0)",
"stroke": "rgb(255,0,0)",
"strokeWidth": 4,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"rx": 0,
"ry": 0
}
]
}
],
"background": ""
}
正如@john-m 上面评论的那样
因为如下所示，
width 和 height 没有改变，但现在有两个更新的属性: scaleX 和 scaleY 。let newWidth = width * scaleX;
let newHeight = height * scaleY;
关于canvas - 在对象缩放时，矩形的宽度和高度在 fabric.js 中不会改变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40933585/