Question

我已将jCanvas代码组织成一个在window.resize上触发的render方法：

<script type="text/javascript">
    var middleX;
    var middleY;
    var canvas;
    var ctx;

    var isLoaded = false;

    $(document).ready
    (
        function ()
        {
            init();
            isLoaded = true;

            render();

            $("canvas").fadeIn(2000);
        }
    );

    function scaleToWindowDimensions()
    {
        ctx.canvas.width = window.innerWidth;
        ctx.canvas.height = window.innerHeight;

        middleX = $canvas.width() / 2;
        middleY = $canvas.height() / 2;
    }

    function init()
    {
        $canvas = $('canvas');
        ctx = document.getElementById("canvas").getContext("2d");

        scaleToWindowDimensions();
    }

    $(window).resize
    (
        function ()
        {
            scaleToWindowDimensions();

            render();
        }
    );

    function render()
    {
        if (!isLoaded)
        {
            return;
        }

        $canvas.clearCanvas();

        // ctx.clearRect(0, 0, $canvas.width(), $canvas.height());

        $canvas.addLayer({
            method: 'drawArc',
            strokeStyle: "#000",
            strokeWidth: 1,
            fillStyle: '#c33',
            x: middleX,
            y: middleY,
            closed: true,
            radius: 50,
            // Event bindings
            mousedown: function (target)
            {
                alert('You pushed RED!');
            },
            mouseup: function (target)
            {
                target.fillStyle = '#c33';
            },
            mouseover: function (target)
            {
                target.fillStyle = "#888";
            },
            mouseout: function (target)
            {
                target.fillStyle = "#c33";
            }
        });

        $canvas.addLayer({
            method: "drawText",
            strokeStyle: "#000",
            fromCenter: true,
            strokeWidth: 1,
            fillStyle: "#333",
            fontSize: "18pt",
            fontFamily: "Verdana",
            x: middleX,
            y: middleY,
            text: "Man",
            data: { "id": 1, "word": "Man" },
            mousedown: function (target)
            {
                alert($(this).id);
            }
        });

        $canvas.addLayer({
            method: 'drawArc',
            strokeStyle: "#000",
            strokeWidth: 1,
            fillStyle: '#d88',
            x: 500,
            y: 100,
            closed: true,
            radius: 40,
            // Event bindings
            mousedown: function (target)
            {
                alert('You pushed RED!');
                target.fillStyle = '#333';
            },
            mouseup: function (target)
            {
                target.fillStyle = '#d88';
            },
            mouseover: function (target)
            {
                target.fillStyle = "#888";
            },
            mouseout: function (target)
            {
                target.fillStyle = "#d88";
            }
        });

        $canvas.addLayer({
            method: "drawText",
            strokeStyle: "#000",
            fromCenter: true,
            strokeWidth: 1,
            fillStyle: "#333",
            fontSize: "16pt",
            fontFamily: "Verdana",
            x: 500,
            y: 100,
            text: "Men",
            data: { "id": 2, "word": "Men" },
            mousedown: function (target)
            {
                alert($(this).id);
            }
        });

        $canvas.addLayer({
            method: 'drawLine',
            strokeStyle: "#222",
            strokeWidth: 1,
            x1: middleX,
            y1: middleY,
            x2: 500,
            y2: 100,
            radius: 40,
        });

        $canvas.drawLayers();
    }
</script>

这画了这张图片：

Output

意图是在调用render以清除整个画布时的第一步：

$canvas.clearCanvas();

// ctx.clearRect(0, 0, $canvas.width(), $canvas.height());

这是两次单独的清除画布的尝试，两者都不起作用。如果没有清除画布，结果就是：

enter image description here

我有一个大概认为这与图层有关而不是直接绘图，但我很困惑为什么画布没有被清除...

TIA。

Answer 1

clearCanvas正在按计划运行，此处的问题是，您在$canvas的每次调用中都会向render添加五个图层。因此，当调用drawLayers时，会添加添加到$canvas的所有图层;五个更新的以及之前render次调用中添加的所有图层。

解决此问题的一种方法是仅使用setLayer更改render方法中的图层，并将其添加到仅调用一次的方法中，可能是init。

所以，init变为：

function init() {
    $canvas = $('canvas');
    ctx = document.getElementById("canvas").getContext("2d");

    scaleToWindowDimensions();

    console.log($canvas);

    //Adding layers in init
    //and defining all the 
    //static properties which
    //won't change on each render
    $canvas.addLayer({
        name: "l0",                  //Unique name for access
        visible: true,
        method: 'drawArc',
        strokeStyle: "#000",
        strokeWidth: 1,
        fillStyle: '#c33',
        x: middleX,
        y: middleY,
        closed: true,
        radius: 50,
        // Event bindings
        mousedown: function (target) {
            alert('You pushed RED!');
        },
        mouseup: function (target) {
            target.fillStyle = '#c33';
        },
        mouseover: function (target) {
            target.fillStyle = "#888";
        },
        mouseout: function (target) {
            target.fillStyle = "#c33";
        }
    })
        .addLayer({
        name: "l1",                  //Unique name for access               
        visible: true,
        method: "drawText",
        strokeStyle: "#000",
        fromCenter: true,
        strokeWidth: 1,
        fillStyle: "#333",
        fontSize: "18pt",
        fontFamily: "Verdana",
        x: middleX,
        y: middleY,
        text: "Man",
        data: {
            "id": 1,
            "word": "Man"
        },
        mousedown: function (target) {
            alert($(this).id);
        }
    })
        .addLayer({
        name: "l2",                  //Unique name for access
        visible: true,
        method: 'drawArc',
        strokeStyle: "#000",
        strokeWidth: 1,
        fillStyle: '#d88',
        x: 500,
        y: 100,
        closed: true,
        radius: 40,
        // Event bindings
        mousedown: function (target) {
            alert('You pushed RED!');
            target.fillStyle = '#333';
        },
        mouseup: function (target) {
            target.fillStyle = '#d88';
        },
        mouseover: function (target) {
            target.fillStyle = "#888";
        },
        mouseout: function (target) {
            target.fillStyle = "#d88";
        }
    })
        .addLayer({
        name: "l3",                  //Unique name for access
        visible: true,
        method: "drawText",
        strokeStyle: "#000",
        fromCenter: true,
        strokeWidth: 1,
        fillStyle: "#333",
        fontSize: "16pt",
        fontFamily: "Verdana",
        x: 500,
        y: 100,
        text: "Men",
        data: {
            "id": 2,
            "word": "Men"
        },
        mousedown: function (target) {
            alert($(this).id);
        }
    })
        .addLayer({
        name: "l4",                  //Unique name for access
        visible: true,
        method: 'drawLine',
        strokeStyle: "#222",
        strokeWidth: 1,
        x1: middleX,
        y1: middleY,
        x2: 500,
        y2: 100,
        radius: 40,
    });
}

render成为：

function render() {
    if (!isLoaded) {
        return;
    }

    $canvas.clearCanvas();

    // ctx.clearRect(0, 0, $canvas.width(), $canvas.height());

    //Here, use setLayer to change
    //properties which are supposed to change
    //with render

    //We use the unique name of each layer
    //set in init to access them.
    $canvas.setLayer("l0", {
        x: middleX,
        y: middleY,
    });

    $canvas.setLayer("l1", {
        x: middleX,
        y: middleY
    });

    //Layer l2 and l3 don't
    //change anything, so they are
    //not changed with render.

    $canvas.setLayer("l4", {
        x1: middleX,
        y1: middleY
    });

    $canvas.drawLayers();
}

<强> Working Example

jCanvas的clearCanvas似乎不适用于图层

1 个答案: