Question

我正在D3.js中构建一个应用程序，我将几个索引卡（svg）渲染为一个SVG。用户应该能够旋转这些卡。出于测试目的，我使用拖动行为进行旋转

dragListener = d3.behavior.drag().on("dragstart", function(d){
        originX = parseInt(d3.select(this).select("image").attr("x"));
        originY = parseInt(d3.select(this).select("image").attr("y"));
    })
    .on("drag", function(d){
        counter++;
        if(counter > 360){
            counter = 0;
        }
        d3.select(this).attr("transform", 
            "rotate("+counter.toString()+","+(originX+150).toString()+","+(originY+90).toString()+")");
    });

我提供给所有索引卡

var grp = svg.selectAll("g").data(arr);
var card = 
       grp.enter().append("g")
     //.attr("transform", function(d){ return "rotate(30,"+(d.x+150)+","+(d.y+90)+")";})
       .call(dragListener);
card.append("svg:image")
    .attr("xlink:href", "http://images.clipartlogo.com/files/images/22/227702/index-card_p")
    .attr("x", function(d){return d.x;})
    .attr("y", function(d){return d.y;})
    .attr("width", "300")
    .attr("height", "180");

问题是，当用户旋转卡时，已经旋转的卡越多，性能越低。当所有卡片都旋转时，Chrome中的FPS大约为8 以下是示例：http://jsfiddle.net/45hdjkk0/6/
您可以通过删除第32行中的注释来为所有卡片进行初始轮换。

我做错了什么或者我选择了错误的做法？

更新在Internet Explorer和Firefox上测试相同的示例后，我发现Internet Explorer是这三个中最快的。与Chrome相比，Firefox也非常快。这是Chrome问题吗？

Answer 1

旋转任何位图在计算上都很昂贵。我在Firefox和Chrome中运行你的小提琴。尽管Firefox并不是太糟糕，但我确实看到了你所谈到的Chrome中的一些帧速率下降。如果它必须是png，可能没有一个好的解决方案。如果它不必是png，那么旋转由组合图形元素组成的svg将获得很好的性能。

编辑：看起来你确实想要旋转索引卡，所以我觉得你很幸运。为了说明我在说什么，请注释第36行然后取消注释第32行。然后在没有位图的情况下查看旋转性能。然后只需添加一些.attr（“path”，...）行来重现你的索引卡，我敢打赌，表演会摇滚。

SVG低性能旋转图像

1 个答案: