0
function normalTriangle() {
    return new fabric.Triangle({
        transparentCorners: false,
        objectCaching: false,
        shapeType: 'normalTriangle'
    })
}

canvas = new fabric.Canvas(canvasElement, {
            selection: true
            preserveObjectStacking: true,
            renderOnAddRemove: false, 
            uniformScaling: false
        }).setWidth(basicWidth).setHeight(basicHeight);

        canvas.on({
            'mouse:over': CanvasMouseOver,
            'mouse:down:before': CanvasMouseDownBefore,
            'mouse:down': CanvasMouseDown,
            'mouse:move': CanvasMouseMove,
            'mouse:up:before': CanvasMouseUpBefore,
            'mouse:up': CanvasMouseUp,
            'mouse:dblclick': CanvasDoubleClick,
            'object:scaling': CanvasObjectScaling,
            'selection:created': CanvasSelectionCreated,
            'selection:cleared': CanvasSelectionCleared
        });



function CanvasMouseOver(evt) {
    if (shapeType || lineType) {
        canvas.defaultCursor = 'crosshair';
    }
}

function CanvasMouseDownBefore(evt) {
    if (shapeType || lineType) {
        canvas.selection = false;
    }
}

function CanvasMouseDown(evt) {
    canvasDown = true;

    let pointer = canvas.getPointer(evt.e);
    if (shapeType || lineType) {
        drawingStartX = pointer.x;
        drawingStartY = pointer.y;

        drawingObj = DrawingCombination(shapeType, lineType);

        if (!drawingObj) return;

        drawingObj.left = drawingStartX;
        drawingObj.top = drawingStartY;
        drawingObj.width = pointer.x - drawingStartX;
        drawingObj.height = pointer.y - drawingStartY;

        canvas.add(drawingObj);
    }
}

function CanvasMouseMove(evt) {
    if ((shapeType || lineType) && canvasDown && !canvas.getActiveObject()) {
        let pointer = canvas.getPointer(evt.e);

        if (!drawingObj) return;

        if (drawingStartX > pointer.x) {
            drawingObj.set({
                left: Math.abs(pointer.x)
            });
        }
        if (drawingStartY > pointer.y) {
            drawingObj.set({
                top: Math.abs(pointer.y)
            });
        }

        drawingObj.set({
            width: Math.abs(drawingStartX - pointer.x)
        });
        drawingObj.set({
            height: Math.abs(drawingStartY - pointer.y)
        });

        canvas.renderAll();
    }
}

function CanvasMouseUpBefore(evt) {
    if ((shapeType || lineType) && canvasDown) {

        if (!drawingObj) return;

        if (drawingObj.width == 0 && drawingObj.height == 0) {
            canvas.remove(drawingObj);
        } else {
            drawingObj.setCoords();
        }

        drawingObj = null;
        drawingStartX = null;
        drawingStartY = null;
    }
}

function CanvasMouseUp(evt) {
    canvasDown = false;
}

I would like to draw a right triangle using the triangle of fabric js. Is there a way?

I use canvas using drag function.

Among the figures that can be resized using a drag from the starting point of the mouse click, want a right triangle with 90 degrees.

function rightTriangle() {
    return new fabric.Polygon([{x:0,y:100}, {x:100, y:0}, {x:0, y:0}],{
        fill: document.querySelector('.SelectionFillColor').value,
        stroke: document.querySelector('.SelectionStrokeColor').value,
        transparentCorners: true,
        objectCaching: false,
        shapeType: 'rightTriangle',
    })
}

I tried using polygons, but there was a problem that the shape and the outside size did not match.

CHEOLEON KIM
  • 1
  • I'm not entirely sure I understand your question, but you can manipulate an object by using 'set angle' and/or 'flip. So: triangle.set('angle', 90).set('flipY', true); – user1204493 Mar 25 '22 at 22:04
  • @user1204493 I'm sorry for my poor English. I want to draw a right triangle with a 90 degree angle inside the triangle. "angle" is a simple rotation of the shape, so it's not a function that I need. The same is true of flipping. – CHEOLEON KIM Mar 26 '22 at 06:13
  • Your English is very good! I am not a great Fabricjs coder. Hopefully, someone with more knowledge will be able to answer your question. If you do find a way to do this, please post. It will help others who are trying to learn. :-) – user1204493 Mar 26 '22 at 18:26

1 Answers1

0

override fabric.Rect.

I used "Polygon" to draw the shape and adjust the "Scale" to change the size There was a problem with "Bounding Box" leaving, so I couldn't solve it by myself.

In the end, we borrowed the Override presented in the link above and proceeded.

However, this method does not cause a reversal of the shape at the start point when the first drag attempt is made.

CHEOLEON KIM
  • 1