我怎樣才能用fabric js畫一個直角三角形？

Question

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;
}

我想用fabric js的三角形畫一個直角三角形。 有辦法嗎？

我使用 canvas 使用拖動 function。

在可以使用從鼠標單擊的起點拖動來調整大小的圖形中，想要一個 90 度的直角三角形。

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',
    })
}

我嘗試使用多邊形，但存在形狀和外部尺寸不匹配的問題。

Answer 1

重寫 fabric.Rect。

我用“Polygon”繪制形狀，調整“Scale”改變大小“Bounding Box”離開有問題，我無法自己解決。

最后，我們借用了上面鏈接中提供的Override並繼續進行。

但是，當第一次嘗試拖動時，此方法不會導致起點處的形狀反轉。