KineticJS Uncaught TypeError：更新后无法读取未定义属性'x'

Question

我正在使用本教程构建可拖动的多边形。 Tutorial

现在我想添加文本到它并试图从kinetic-v3.10.0.js更新到一个新的。 但更新后，我总是得到提到的错误信息。

有人可以看看我的代码，并帮我看看我需要改变什么，它可能会再次工作？

这里是我的代码部分：

建立锚

function buildAnchor(layer, x, y, name) { 
var anchor = new Kinetic.Circle({ 
    x: x, 
    y: y, 
    radius: 12, 
    stroke: 'red', 
    fill: '#ddd', 
    strokeWidth: 4, 
    draggable: true, 
    name : name 
}); 

// add hover styling 
anchor.on('mouseover', function() { 
    document.body.style.cursor = 'pointer'; 
    this.setStrokeWidth(6); 
    layer.draw(); 
}); 
anchor.on('mouseout', function() { 
    document.body.style.cursor = 'default'; 
    this.setStrokeWidth(4); 
    layer.draw(); 
}); 

layer.add(anchor); 
return anchor;} 

构建线：

function buildLine(layer, x1, y1, x2, y2, name) { 
var line = new Kinetic.Line({ 
    points: [x1, y1, x2, y2], 
    stroke : '#000', 
    strokeWidth : 2, 
    name : name 
}); 

var xDiff = x1 - x2; 
var yDiff = y1 - y2; 

var text = new Kinetic.Text({ 
    x: 0, 
    y: 0, 
    text: 'Test', 
    fontSize: 20, 
    fontFamily: 'Calibri', 
    fill: 'green' 
}); 


if (xDiff < 0 && yDiff == 0) { 
    line.move(0,-30); //Point a -> b 
} 
else if (xDiff == 0 && yDiff < 0) { 
    line.move(30,0); //Point b -> c 
} 
else if (xDiff > 0 && yDiff == 0) { 
    line.move(0,30); //Point c -> d 
} 
else if (xDiff == 0 && yDiff > 0) { 
    line.move(-30,0); //Point d -> a 
} 
else if (xDiff < 0 && yDiff < 0) { 
    line.move(0,-30);  
} 
else if (xDiff < 0 && yDiff > 0) { 
    line.move(0,-30); 
} 
else if (xDiff > 0 && yDiff > 0) { 
    line.move(-5,30); 
} 

layer.add(text); 
layer.add(line); 
return line; 
return text;} 

构建三角：

function buildTriangle(layer, points, name) { 
var triangle = new Kinetic.Polygon({ 
    stroke : '#666', 
    strokeWidth : 8, 
    name : name 
}); 

triangle.scaleAnchor = function(anchor, factor) { 
    anchor.attrs.x = (anchor.attrs.x - this.center.x) * factor + this.center.x; 
    anchor.attrs.y = (anchor.attrs.y - this.center.y) * factor + this.center.y; 
}; 
triangle.calculateCenter = function() { 
    this.center.x = (this.a.attrs.x + this.b.attrs.x + this.c.attrs.x)/3; 
    this.center.y = (this.a.attrs.y + this.b.attrs.y + this.c.attrs.y)/3; 
}; 

triangle.a = buildAnchor(layer, points[0], points[1], 'anchor'); 
triangle.b = buildAnchor(layer, points[2], points[3], 'anchor'); 
triangle.c = buildAnchor(layer, points[4], points[5], 'anchor'); 
line1 = buildLine(layer, points[0], points[1], points[2], points[3], 'line'); 
line2 = buildLine(layer, points[2], points[3], points[4], points[5], 'line'); 
line3 = buildLine(layer, points[4], points[5], points[0], points[1], 'line'); 
triangle.was = { x : 0, y : 0 }; 
triangle.center = { x : 0, y : 0 }; 

layer.add(triangle); 
return triangle;} 

绘制三角形：

function drawtriangle() { 
var triangle = this.get('.triangle')[0]; 

triangle.setPoints([ triangle.a.attrs.x - triangle.was.x, 
         triangle.a.attrs.y - triangle.was.y, 
         triangle.b.attrs.x - triangle.was.x, 
         triangle.b.attrs.y - triangle.was.y, 
         triangle.c.attrs.x - triangle.was.x, 
         triangle.c.attrs.y - triangle.was.y ]); 
line1.setPoints([triangle.a.attrs.x - triangle.was.x, triangle.a.attrs.y - triangle.was.y, triangle.b.attrs.x - triangle.was.x, triangle.b.attrs.y - triangle.was.y]); 
line2.setPoints([triangle.b.attrs.x - triangle.was.x, triangle.b.attrs.y - triangle.was.y, triangle.c.attrs.x - triangle.was.x, triangle.c.attrs.y - triangle.was.y]); 
line3.setPoints([triangle.c.attrs.x - triangle.was.x, triangle.c.attrs.y - triangle.was.y, triangle.a.attrs.x - triangle.was.x, triangle.a.attrs.y - triangle.was.y]); 

triangle.calculateCenter.apply(triangle);} 

Answer 1

没有阅读和测试您的所有代码，但我发现一个错误是。

function buildLine(layer, x1, y1, x2, y2, name) { 
    .... 
    .... 
    return line; 
    return text; 
} 

您可以在函数返回只有一个。您的buildLine函数绝不会显示文本，但仅限行。所有与文本相关的操作都将失败。