0

)

我有一个小型 Web 应用程序，它使用 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);
            }
        });
    }); 

}

感谢您的时间 ：-）

4

1 回答 1

2

优化通常是个案，但我会尝试针对这种情况给出一些一般性的观点：

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

与更多细节相同：

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

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

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

最后用新的图形在右边画出 10px 的间隙（你可能想要缓存宽度和高度，但坦率地说，在现代 JavaScript 引擎中，这不再像过去那样重要了）。测试您的点以查看实际需要绘制哪些点以避免再次绘制所有点，否则会使此步骤毫无意义。

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

于 2013-11-19T21:14:45.547 回答