SVG路径计算结果在所有归零坐标下

Question

我正在做一个脚本，这样我就可以在两个或多个具有相同值的关键帧之间创建一个简单的svg路径。我输入的形状应该将椭圆形状(关键帧)变形为语音气泡形状(keyframe1)。

我遇到的问题是，当我尝试调试时，它告诉我svg元素的值都是0。

<path d="M0, 0, Q0, 0, 0, 0, L0, 0, Q0, 0, 0, 0, L0, 0, Q0, 0, 0, 0, L0, 0, Q0, 0, 0, 0, L0, 0, L0, 0, L0, 0, Z" fill="#ffffff" stroke="#000000"></path>

当控制台显示它应该具有的值是

M-68.39999999999999, -18.787499999999998, Q-72.9, 0, -97.2, -4.5, L-97.2, -258.525, Q-121.5, -263.02500000000003, -116.99999999999999, -281.8125, L68.39999999999999, -281.8125, Q72.9, -300.59999999999997, 97.2, -296.1, L97.2, -42.075, Q121.5, -37.574999999999996, 116.99999999999999, -18.787499999999998, L48.6, -18.787499999999998, L24.3, 18.787499999999998, L0, -18.787499999999998, ZM-70.93333333333334, -19.483333333333334, Q-75.60000000000001, 0, -100.8, -4.666666666666666, L-100.8, -268.09999999999997, Q-126, -272.76666666666665, -121.33333333333333, -292.25, L70.93333333333334, -292.25, Q75.60000000000001, -311.73333333333335, 100.8, -307.06666666666666, L100.8, -43.63333333333333, Q126, -38.96666666666667, 121.33333333333333, -19.483333333333334, L50.4, -19.483333333333334, L25.2, 19.483333333333334, L0, -19.483333333333334, Z 

在某个地方，我的逻辑肯定有错误，但我不得不绞尽脑汁，弄清楚为什么这不起作用。

联署材料：

$(function() {

    var sponsorBubble = function(el, html, cornerRad) {
        this.html = html,
        this.width = el.parent().width(),
        this.height = el.parent().height(),
        this.arrowWidth = el.parent().width()/4,
        this.arrowHeight = el.parent().height()/8,
        this.cornerRad = cornerRad;


        //ENSURE SAME NUMBER OF PATH SEGMENTS IN ALL KEYFRAMES (START TO END)
        this.keypaths = [];

        this.keypaths[0] = [
            "M",
            (this.width/2) - (this.arrowWidth/2), this.height - (this.arrowHeight/2),
            "Q",
            (this.width/2) - (this.arrowWidth/2), this.height - this.arrowHeight,
            (this.width/2), this.height - this.arrowHeight,
            "L",
            (this.width/2), this.height - this.arrowHeight,
            "Q",
            (this.width/2) + (this.arrowWidth/2), this.height - this.arrowHeight,
            (this.width/2) + (this.arrowWidth/2), this.height - (this.arrowHeight/2),
            "L",
            (this.width/2) + (this.arrowWidth/2), this.height - (this.arrowHeight/2),
            "Q",
            (this.width/2) + (this.arrowWidth/2), this.height,
            (this.width/2), this.height,
            "L",
            (this.width/2), this.height,
            "Q",
            (this.width/2) - (this.arrowWidth/2), this.height,
            (this.width/2) - (this.arrowWidth/2), this.height - (this.arrowHeight/2),
            "L",
            (this.width/2) - (this.arrowWidth/2), this.height - (this.arrowHeight/2),
            "L",
            (this.width/2) - (this.arrowWidth/2), this.height - (this.arrowHeight/2),
            "L",
            (this.width/2) - (this.arrowWidth/2), this.height - (this.arrowHeight/2),
            "Z"
        ];

        this.keypaths[1] = [
            "M", //STARTS AT BOTTOM LEFT, GOING CLOCKWISE
            this.cornerRad, this.height-this.arrowHeight,
            "Q",
            0, this.height-this.arrowHeight,
            0, this.height-this.arrowHeight-this.cornerRad,
            "L",
            0, this.cornerRad,
            "Q",
            0,0,
            this.cornerRad, 0,
            "L",
            this.cornerRad+(this.width - (this.cornerRad*2)), 0,
            "Q",
            this.width, 0,
            this.width, this.cornerRad,
            "L",
            this.width, this.cornerRad+(this.height-this.arrowHeight-(this.cornerRad*2)),
            "Q",
            this.width, this.height-this.arrowHeight,
            this.width-this.cornerRad, this.height-this.arrowHeight,
            "L",
            (this.width/2)+(this.arrowWidth/2), this.height-this.arrowHeight,
            "L",
            this.width/2, this.height,
            "L",
            (this.width/2)-(this.arrowWidth/2), this.height-this.arrowHeight, 
            "Z"
        ];


    };

    sponsorBubble.prototype.getFrame = function(frame, total_steps, current_step) {

    if (this.keypaths[frame + 1]) { //IF THERES FRAMES AFTER
        for (var i = 0; i <= this.keypaths[frame].length; i++) {
            //IF IS A LETTER
            if (isNaN(this.keypaths[frame][i])) {
                if (this.newpath && i < this.keypaths[frame].length - 1) {
                    this.newpath = this.newpath + this.keypaths[frame][i];
                }
                else if (!this.newpath) {
                    this.newpath = this.keypaths[frame][i];
                }
                else if (this.newpath && i == this.keypaths[frame].length - 1) {
                    this.newpath = this.newpath + this.keypaths[frame][i];
                }
            }

            //IF IS A NUMBER
            else {
                if (this.newpath && i < this.keypaths[frame].length - 1) {
                    this.newpath = this.newpath + (((this.keypaths[frame + 1][i] - this.keypaths[frame][i]) / total_steps) * current_step) + ", ";
                }
                else {
                    this.newpath = this.newpath + this.keypaths[frame][i];
                }
            }
        }
    }

    else { //NO FRAMES AFTER
        for (var i = 0; i <= this.keypaths[frame].length; i++) {
            //IF IS A LETTER
            if (isNaN(this.keypaths[frame][i])) {
                if (this.newpath && i < this.keypaths[frame].length - 1) {
                    this.newpath = this.newpath + this.keypaths[frame][i];
                }
                else if (!this.newpath) {
                    this.newpath = this.keypaths[frame][i];
                }
                else if (this.newpath && i === this.keypaths[frame].length - 1) {
                    this.newpath = this.newpath + this.keypaths[frame][i];
                }
            }

            //IF IS A NUMBER
            else {
                if (this.newpath && i < this.keypaths[frame].length - 1) {
                    this.newpath = this.newpath + this.keypaths[frame][i] + ", ";
                }
                else {
                    this.newpath = this.newpath + this.keypaths[frame][i];
                }
            }
        }
    }

        current_step++;

        if (current_step < total_steps) {
                console.log(this.newpath);
            requestAnimationFrame(function() {
                bub.getFrame(frame, total_steps, current_step);
            });
        }
}

snapper = Snap('#svg');
var bub = new sponsorBubble($('#svg'), 'test', 5, 20);
bub.getFrame(0, 30, 0);

var test = snapper.path(bub.newpath);
    test.attr({
        fill: 'white',
        stroke: 'black'
    });
});

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="bubble.css" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="snap.svg-min.js"></script>
        <script type="text/javascript" src="bubble.js"></script>
    </head>

    <body>
        <div id="inset">
            <div id="inset2">
                <svg id="svg" width="100%" height="100%"></svg>
            </div>
        </div>
    </body>

</html>

CSS：

body, html {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
}

#inset {
 width: 20%;
 height: 50%;
 position: absolute;
 bottom: 0;
 left: 50%;
}

#inset2 {
 width: 80%;
 height: 100%;
}

JSfiddle：http://jsfiddle.net/bmjkz1rf/

Answer 1

你的插值算法错了。

要在两个值x0和x1之间进行插值，公式是：

x0 + ((x1 - x0) * current_step / total_steps)

代码目前缺少第一个x0术语。

我想还有更多的事要解决。现在看来，this.newpath是一个字符串，它随着递归的进展而增长和增长，没有在"Z“之后和下一个"M”之前进行任何描述。我不知道确切的要求是什么，但我不认为这是正确的。即使你修好了“...ZM.”描述，您仍然使用一个怪物字符串，而我猜您需要一个集合(一个数组？)单独的框架。

即使我错了，而且您确实想要一个大字符串，最好还是放弃.getFrame()的递归，迭代调用它，在每次迭代时返回单个帧的数据值，从而在调用函数中构建最终的数据结构。