Question

我正在尝试创建一个函数，该方向恰好在矩形中下降，有人可以帮助我吗？

我不知道如何从水平方向到垂直方向断开矩形。

我不知道如何断开矩形并添加新的矩形。

也许我只需要使用单独的行？

如何使图形相同？

如果有人可以帮助我！我很绝望！

<script>

    $(document).ready(function () {

        var canvas = new fabric.Canvas('canvas');
        canvas.selection = false;
        var rect, isDown, origX, origY, freeDrawing = true, textVal, activeObj;
        var isRectActive = true;
        var rectangle = document.getElementById('rect');

        var obj_selecionado = false;

        var started = false;
        var prvX = -300;
        var prvY = -300;


        rectangle.addEventListener('click', function () {
            isRectActive = !isRectActive;
        });


        canvas.on('mouse:down', function (o) {


            if (freeDrawing) {
                isDown = true;
                var pointer = canvas.getPointer(o.e);
                origX = pointer.x;
                origY = pointer.y;

                prvX = pointer.x;
                prvY = pointer.y;
                started = true;


                if (isRectActive) {
                    rect = new fabric.Rect({
                        left: origX,
                        top: origY,
                        width: pointer.x - origX,
                        height: pointer.y - origY,
                        fill: '',
                        stroke: 'gray',
                        type: 'rect',
                        uuid: generateUUID(),
                        strokeWidth: 1
                    });

                    canvas.add(rect);
                    activeObj = rect;

                } 
            }
        });



        canvas.on('mouse:move', function (o) {
            if (isDown && freeDrawing) {
                var pointer = canvas.getPointer(o.e);


                if (!started) return;

                if (isRectActive) {

                 //HERE ADD SOMETHING TO BREAK RECTANGLE

                    var dx = pointer.x - prvX;
                    var dy = pointer.y - prvY;
                    if (Math.abs(dx) > Math.abs(dy)) {

                        rect.set({ width: dx });
                        rect.set({ height: 120 });


                    } else {

                        rect.set({ width: 120 });
                        rect.set({ height: dy });

                    }                  

                } 
                canvas.renderAll();
            }


        });

        canvas.on('mouse:up', function (o) {

            started = false;

            if (freeDrawing) {
                isDown = false;

                var pointer = canvas.getPointer(o.e);


                if (pointer.x === origX || pointer.y === origY || obj_selecionado === true) {
                    canvas.remove(rect);
                    obj_selecionado = false;
                    return false;
                }

            }

        });




    });
</script>

<canvas id='canvas' width="2024" height="1024"></canvas>

Answer 1

创建一个polyline或polygon对象而不是矩形。

演示

var canvas = new fabric.Canvas('c');
var points = [{x:50,y:50},{x:200,y:50},{x:200,y:160},{x:300,y:160},{x:300,y:250},{x:100,y:250},{x:100,y:125},{x:50,y:125}];

var polygon = new fabric.Polygon(points, {
 stroke: 'black',
 fill: ''
});
canvas.add(polygon);

canvas {
  border: 1px solid #f00;
  margin: 0px;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>

创建矩形动态方向

1 个答案: