Question

我正在尝试将一组整数和字符串连接成一个长字符串以用于svg动画，但是当我想要M15,140，L20,34之类的东西时，我的输出似乎会导致NaN结果。 ..等等。

HTML：

<div id="test"></div>

CSS：

#test {
    background-color: green;
    height: 150px;
    width: 150px;
}

JS：

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

    var pathy = "M" + 
        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";

        console.log(pathy);
};        

    var bub = new bubbleObj($('#test'), "test_content", 15);

的jsfiddle： http://jsfiddle.net/p9abkmwx/

Answer 1

使用括号优先处理所有算术运算。

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

    var pathy = "M" + 
    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";

    console.log(pathy);
};        

var bub = new bubbleObj($('#test'), "test_content", 15);

将整数和字符串连接到单个字符串

1 个答案: