Kineticjs 动能JS 5.1.getContext（）

我刚刚将Kinetic JS从4.3.3更新到5.1，使用以下内容绘制了一个圆，以两条相交的线为中心：

    circle1.setDrawHitFunc(function (canvas) {
        var context1 = canvas.getContext();
        var centerX1 = blueLine1.getPosition().x;
        centerY1 = greenLine1.getPosition().y;
        context1.beginPath();
        context1.arc(centerX1, centerY1, this.getRadius(), 0, 2 * Math.PI, false);
        context1.closePath();
        canvas.fillStroke(this);
        currentX = canvas.width / 2;
        currentY = canvas.height / 2;
    });

我得到以下错误：

Object doesn't support property or method 'getContext' 

使用stage1.getDragLayer（）.afterDraw作为

---

在我的旧示例中

自V4.3.3以来，KineticJS的语法发生了很大变化

以下是设置hit函数的新语法：

（请注意，您现在获得的是上下文，而不是画布作为参数）

[添加用于重构代码以在KineticJS V5.1中工作的答案]

工作演示：

KineticJS现在有一个

dragmove

事件，每次拖动绿线或蓝线时都可以响应

这意味着您可以：

• 聆听绿线上的

  dragmove

  ，并自动垂直重新定位圆

• 聆听蓝线上的

  dragmove

  ，并自动水平重新定位圆

这比在版本4中完成的方式简单得多

以下是方法：

// reposition the circle vertically 
// every time the green line is dragged vertically

GreenLine1.on('dragmove',function(){
    circle1.y(GreenLine1.y()+GreenLine1.points()[1]);
    layer.draw();
});


// reposition the circle horizontally 
// every time the blue line is dragged horizontally

BlueLine1.on('dragmove',function(){
    circle1.x(BlueLine1.x()+BlueLine1.points()[0]);
    layer.draw();
});

// save the X position of the green line

GreenLine1.fixedX=GreenLine1.x();

// let the user drag the green line vertically
// but not horizontally

GreenLine1.dragBoundFunc(function(pos){
    pos.x=GreenLine1.fixedX;
    return(pos);
});



// save the X position of the green line

BlueLine1.fixedY=BlueLine1.y();

// let the user drag the blue line horizontally
// but not vertically

BlueLine1.dragBoundFunc(function(pos){
    pos.y=BlueLine1.fixedY;
    return(pos);
});        

还有一件事

您可以设置

dragBoundFunc

以防止用户水平拖动绿线，并防止用户垂直拖动蓝线

以下是方法：

// reposition the circle vertically 
// every time the green line is dragged vertically

GreenLine1.on('dragmove',function(){
    circle1.y(GreenLine1.y()+GreenLine1.points()[1]);
    layer.draw();
});


// reposition the circle horizontally 
// every time the blue line is dragged horizontally

BlueLine1.on('dragmove',function(){
    circle1.x(BlueLine1.x()+BlueLine1.points()[0]);
    layer.draw();
});

// save the X position of the green line

GreenLine1.fixedX=GreenLine1.x();

// let the user drag the green line vertically
// but not horizontally

GreenLine1.dragBoundFunc(function(pos){
    pos.x=GreenLine1.fixedX;
    return(pos);
});



// save the X position of the green line

BlueLine1.fixedY=BlueLine1.y();

// let the user drag the blue line horizontally
// but not vertically

BlueLine1.dragBoundFunc(function(pos){
    pos.y=BlueLine1.fixedY;
    return(pos);
});        

---

我已经在我的答案中添加了显示您的4.3代码经过重构，可以很好地与5.1版配合使用。祝你的项目好运！谢谢你，马克，非常感谢你的帮助。