在对象缩放矩形的宽度和高度时 fabric.js

Question

嗨，我正在研究 fabric.js. on click of apply button i add a text and rectangle in a group which is shown correctly. but when i try to scale the group then the width and height is not changed. here is the 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);
  }
}

Answer 1

我已经开始执行你的 fiddle 和

正在向 canvas 添加文本。

首次导出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 上面评论的那样

Just multiply the width by ScaleX and the height by ScaleY

因为如下所示，width 和 height 没有改变，但现在有两个更新的属性：scaleX 和 scaleY。

let newWidth = width * scaleX;
let newHeight = height * scaleY;

在对象缩放矩形的宽度和高度时 fabric.js

On object scaling the width and height of rectangle dont change in fabric.js

canvas

scale

fabricjs