Question

我正在尝试制作一个跟随用户鼠标的粒子效果。如果我不包含图像，它可以很好地工作，但是一旦我添加图像，它就会非常慢。我尝试了如何以不同方式定义图像，或使用def，但无法使其他任何工作。

图片托管在与应用相同的路径中，为1.2kb

<svg id="mySvg" width="40" height="40">
    <defs id="mdef">
        <pattern id="image" x="0" y="0" height="40" width="40">    
            <image x="0" y="0" width="40" height="40" xlink:href="image.png"></image>    
        </pattern>
    </defs>
</svg>

和js

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .on("ontouchstart" in document ? "touchmove" : "mousemove", particle);


function particle() {

    var m = d3.mouse(this);

    svg.append("circle")
        .attr("cx", m[0])
        .attr("cy", m[1])
        .attr("r", 1e-6)
        .style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))
        .style("stroke-opacity", 1)
        .style("fill", "url(#image)")
        .transition()
        .duration(2000)
        .ease(Math.sqrt)
        .attr("r", 40)
        .style("stroke-opacity", 1e-6)
        .remove();

    d3.event.preventDefault();
}

如何处理图像加载以便更快？

使用粒子效果时，加快图像负荷，d3

0 个答案: