Kinetic JS 5.1 .getContext（）

Question

我刚刚将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 as得到错误 在我的旧例子中http://jsfiddle.net/m1erickson/cgF8y/

Answer 1

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

以下是设置命中功能的新语法：

（注意，现在给你一个上下文而不是画布作为参数）

myShape.hitFunc( function(context){ ... } );

[除了回答重构您的代码以便在KineticJS V5.1中工作]

正在进行的演示：http://jsfiddle.net/m1erickson/2QG5W/

KineticJS现在有一个dragmove事件，让您每次拖动greenLine或blueLine时都会响应。

这意味着你可以：

• 在绿线上收听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();
});

另一件事

您可以设置dragBoundFunc以防止用户水平拖动绿线，并防止用户垂直拖动蓝线。

以下是：

// 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);
});