Question

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

现在我想在其中添加Text并尝试从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函数将永远不会发送文本，但仅限于行。并且所有与文本相关的操作都将失败。

KineticJS Uncaught TypeError：在Update之后无法读取未定义的属性“x”

1 个答案: