Question

）

我有一个小型的网络应用程序，它使用jquery和jcanvas（http://calebevans.me/projects/jcanvas/）将一些形状打印到画布上。

它基本上是一张地图。用户可以放大并拖动它，每当他这样做时，一切都必须再次绘制。

正如您在下面的代码中看到的，我经常删除并重新创建图层（每当用户拖动地图，缩放或调整其窗口大小时）。我需要图层来处理悬停和点击事件。我的问题是，与其他解决方案相比，这种处理事件的方式是否会对性能产生重大影响。如果是这种情况，我怎样才能优化我的表现？

var posX = 0, posY = 0;
var zoom = 100;
var points = []; //array of up to 1000 points retrieved by ajax

function draw(){
    $("canvas").removeLayers();
    $("canvas").clearCanvas();


    var xp, yp, ra;
    var name;

    $.each(points, function(index) {
        xp = (this["x"]-posX)/zoom;
        yp = (this["y"]-posY)/zoom;
        ra = 1000/zoom;
        $("#map").drawArc({
            layer:true,
            fillStyle: "black",
            x: xp, 
            y: yp,
            radius: ra,
            mouseover: function(layer) {
                $(this).animateLayer(layer, {
                      fillStyle: "#c33",
                      scale: 1.0
                    },200);
            },
            mouseout: function(layer) {
                $(this).animateLayer(layer, {
                      fillStyle: "black",
                      scale: 1.0
                    },200);
            },
            mouseup: function(layer){
                context(index,layer.x,layer.y);
            }
        });
    }); 

}

感谢您的时间： - ）

Answer 1

优化通常是个案情况，但我会尝试为这个案例提供一些一般性观点：

将操作保持在最低限度
创建和删除“图层”（画布元素）是一项代价高昂的操作 - 尽可能避免使用。
如果您需要清除整个画布，请使用drawImage()自行移动内容或使用clearRect()。

同样有更多细节：

例如，如果我们想将所有内容向左移动10个像素，您可以使用drawImage()将内容移动到其中一个边：

context.drawImage(canvas, 10, 0, canvas.width - 10, canvas.height,
                          0, 0, canvas.width - 10, canvas.height);

这将仅剪辑我们想要移动/滚动的部分，然后在新位置重绘它。

最后用新图形绘制右边的10px间隙（你可能想要缓存宽度和高度，但坦率地说，在现代JavaScript引擎中，这与过去相比并不重要）。测试你的点以查看实际需要绘制的点以避免再次绘制所有点，否则会使这一步变得毫无意义。

如果要清除画布，而不是删除canvas元素并创建新画布，请使用方法clearRect()或使用fillRect()（如果需要图案，颜色等）。删除和创建元素从优化的角度来看是一项代价高昂的操作，特别是如果它们影响浏览器的流程（如果它需要重排内容）。它会触发布局，css解析，重绘等大量操作。如果可以的话，重复使用。

使用画布绘制图层：性能优化

1 个答案: