Javascript 定制面料形状-如何超越它'；s码？

我需要画一个定制的矩形-每个角落有4个“耳朵”

因此，我基于

fabric.Object

定义了自己的类，如下所示：

var CustomRect = fabric.util.createClass(fabric.Object, {
...
}

重要提示：基于我的类

CustomRect

创建对象时，我想将

宽度

和

高度

定义为一个矩形大小，不带这些“耳朵”

但我有个问题我无法在由宽度x高度定义的区域外绘制

其他所有内容都会被剪裁-它是绘制的，但不可见。所以我无法画出那些“耳朵”，因为它们超出了区域宽度x高度的限制

如何告诉织物扩大绘图面积？如何在宽度x高度区域外绘制

---

非常感谢大家

所以我找到了这个解决方案。虽然不完美，但很有效

Fabric根据对象的

宽度

和

高度

参数来调整绘制区域的大小，但我必须创建自己的宽度和高度参数

织物的宽度和高度设置为绘画区域的大小，而我的宽度和高度设置为矩形（没有“耳朵”的矩形）的实际大小

我们开始吧，首先是类定义：

var CustomRect = fabric.util.createClass(fabric.Object, {

    initialize: function(options) {

        options || (options = { });

        if (options.width || options.height){
            alert('Do not use width/height, use my_width/my_height instead.');
        }

        // here we set our Object's width, height to create painting area for it
        // It must be little larger than rectangle itself to paint "ears"
        options.width = options.my_width + SIZE_EXTEND;
        options.height = options.my_height + SIZE_EXTEND;

        this.callSuper('initialize', options);
    },

    _render: function(ctx) {

        var PIx2 = 6.28319; // 2 * PI
        var w_half = (this.width - SIZE_EXTEND) / 2;
        var h_half = (this.height - SIZE_EXTEND) / 2;

        ctx.rect(this.left, this.top, this.width - SIZE_EXTEND, this.height - SIZE_EXTEND);
        ctx.fill();
        // "ears"
        ctx.beginPath();
        ctx.arc(-w_half, -h_half, 4, 0, PIx2, false);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(w_half, -h_half, 4, 0, PIx2, false);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(-w_half, h_half, 4, 0, PIx2, false);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(w_half, h_half, 4, 0, PIx2, false);
        ctx.fill();
    }
}

SIZE\u EXTEND

是在别处定义的常量（对于我的应用程序，常量是OK）

现在我如何在我的应用程序中使用它。将新矩形添加到我的画布上：

    var TheCanvas;

    TheCanvas = new fabric.Canvas('mainCanvas');
    TheCanvas.setWidth(window.innerWidth);
    TheCanvas.setHeight(window.innerHeight);

    TheCanvas.add(new CustomRect({
        left: 500,
        top: 200,
        my_width: 100, // here I define size WITHOUT "ears"
        my_height: 100
    }));

---

所以我找到了这个解决方案。虽然不完美，但很有效

Fabric根据对象的

宽度

和

高度

参数来调整绘制区域的大小，但我必须创建自己的宽度和高度参数

织物的宽度和高度设置为绘画区域的大小，而我的宽度和高度设置为矩形（没有“耳朵”的矩形）的实际大小

我们开始吧，首先是类定义：

var CustomRect = fabric.util.createClass(fabric.Object, {

    initialize: function(options) {

        options || (options = { });

        if (options.width || options.height){
            alert('Do not use width/height, use my_width/my_height instead.');
        }

        // here we set our Object's width, height to create painting area for it
        // It must be little larger than rectangle itself to paint "ears"
        options.width = options.my_width + SIZE_EXTEND;
        options.height = options.my_height + SIZE_EXTEND;

        this.callSuper('initialize', options);
    },

    _render: function(ctx) {

        var PIx2 = 6.28319; // 2 * PI
        var w_half = (this.width - SIZE_EXTEND) / 2;
        var h_half = (this.height - SIZE_EXTEND) / 2;

        ctx.rect(this.left, this.top, this.width - SIZE_EXTEND, this.height - SIZE_EXTEND);
        ctx.fill();
        // "ears"
        ctx.beginPath();
        ctx.arc(-w_half, -h_half, 4, 0, PIx2, false);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(w_half, -h_half, 4, 0, PIx2, false);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(-w_half, h_half, 4, 0, PIx2, false);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(w_half, h_half, 4, 0, PIx2, false);
        ctx.fill();
    }
}

SIZE\u EXTEND

是在别处定义的常量（对于我的应用程序，常量是OK）

现在我如何在我的应用程序中使用它。将新矩形添加到我的画布上：

    var TheCanvas;

    TheCanvas = new fabric.Canvas('mainCanvas');
    TheCanvas.setWidth(window.innerWidth);
    TheCanvas.setHeight(window.innerHeight);

    TheCanvas.add(new CustomRect({
        left: 500,
        top: 200,
        my_width: 100, // here I define size WITHOUT "ears"
        my_height: 100
    }));

---

您是否尝试过使用带有一个rect和四个圆圈的组？添加可执行代码段或自定义对象的代码，please@Ben好主意。但我想通过设置宽度/高度来轻松地修改对象的大小，在小组中，这并不容易。需要相应地移动圆圈。。。group是否可以接收“modified”（修改）之类的事件，以自动方式调整圆圈？目前为止的示例非常方便。您是否尝试过使用带有rect和四个圆圈的group？添加可执行代码段或自定义对象的代码，please@Ben好主意。但我想通过设置宽度/高度来轻松地修改对象的大小，在小组中，这并不容易。需要相应地移动圆圈。。。分组是否可以接收“修改”之类的事件，以某种自动化的方式调整圆圈？目前为止，举一个例子来说明您所拥有的功能非常方便。