Question

我有画布。在这个画布中我有一个封闭的路径，我试图将这条路径变成一条不同的路径。

路径可以包含任意数量的点（＆gt; = 3）。

我有两条路：

    var path1 = "M50,50L200,50,200,200,50,200z"
    var path2 = "M300,200L50,200,50,50,200,50z"

这就是我用来设置变形动画的原因：

    var path = paper.path(path1).attr({'stroke':'black','fill':'white'})
    var currentPath = 1
    path.click(function () {
        if(currentPath==1) {
            path.stop().animate({d: path2},2000, function () {
                currentPath=2
            })

        }
        else {
            path.stop().animate({d: path1},2000,function () {
                currentPath=1
            })
        }
    })

这是我想要实现的情况： http://jsfiddle.net/MichaelSel/vgw3qxpg/7/

这是我想避免的情况。 http://jsfiddle.net/MichaelSel/vgw3qxpg/6/

有没有办法告诉snap使用到每个点的最短距离来做动画？

注意：我不能只是重写＆＃39;反向顺序的路径（可以修复它们），因为它是任意定位点的客户端。

我该怎么办？

如果我的问题不清楚，我想添加更多细节。

谢谢大家。

Answer 1

不，没有办法做到这一点（除了用支票编码你自己的复杂变形）。

它使用点之间的基本插值，因此重要的是让开发者在他们的svg创建中移动点而不是仅仅从头创建一个可以从任何位置开始点的新svg。

据我所知，没有理由为什么你仍然不能用一些聪明的代码来旋转路径点，即使客户已经任意定位它们，但我不认为这很简单

通过在Snap.svg

1 个答案: