Fabric.js 矩形未显示

Question

为什么没有显示矩形？我在 GitHub、官方网站等处找到了示例。但它们对我不起作用。

<script type="text/javascript">
    var fCanvas;
    window.onload = function (){
        var oldCanvas = document.getElementById('canvas');
        fCanvas = new fabric.Canvas('canvas', 
            { 
                width: oldCanvas.parentNode.clientWidth, 
                height: oldCanvas.parentNode.clientHeight 
            });
    }

    function CreateGraphicObject(id){
        //...

        var rect = new fabric.Rect({
            left: 100,
            top: 100,
            fill: 'red',
            width: 20,
            height: 20
        });
        fCanvas.add(rect);
        //fCanvas.renderAll(); - did not help
    }
</script>

谢谢。

Answer 1

您创建了函数但从未调用过它，因此永远不会创建矩形。

你只需要调用函数，在你的代码中我想最好的地方是在创建 canvas:

之后调用它

window.onload = function (){
    var oldCanvas = document.getElementById('canvas');
    fCanvas = new fabric.Canvas('canvas', 
        { 
            width: oldCanvas.parentNode.clientWidth, 
            height: oldCanvas.parentNode.clientHeight 
        });

    CreateGraphicObject(); //I didn't pass any "id" because it makes no sense in the given code
}

function CreateGraphicObject(){

    var rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill: 'red',
        width: 20,
        height: 20
    });
    fCanvas.add(rect);
    fCanvas.renderAll();
}

Answer 2

I had created a fiddle. I hope it will help you.

https://jsfiddle.net/mullainathan/hgnvaqej/

Fabric.js 矩形未显示

Fabric.js rectangle is not showing up

fabricjs