将图像约束到 KineticJS 中的路径

Question

是否可以将对象（如Image）限制为Polygon 的笔画？

jsfiddle: http://jsfiddle.net/CZzpZ/

在 JSfiddle 中，我希望 Yoda Image 将其拖动限制在多边形 poly 的笔划上。查看了Complex Drag Bounds KineticJS 教程，但没有得到任何关于限制路径的线索，只限制在一个区域内。

Answer 1

一种方法是在dragBoundFunc 中获取Polygon 的点，然后应用一些基本的矢量数学来找出该位置最接近多边形上的哪个点。

Demo

我必须指出，我不喜欢为每个可能的可拖动图像设置一个不同的dragBoundFunc，因为它们会有不同的多边形。所以，我创建了一个通用函数polyStrokeBoundDragFunc（很有想象力，对吗？），并假设多边形是作为参数传递的。

所以，dragBoundFunc 看起来像

...

dragBoundFunc: function(pos) {
            return polyStrokeBoundDragFunc(pos, poly, group);
        }
...

这里包含组是因为我们还需要多边形的组来将位置从绝对位置转换为局部位置。这是必需的，因为如果多边形在一个组中，polygon.getPoints 将给出局部点。并且传递给dragBoundFunc 的位置似乎是绝对的。

现在，问题的肉，仍然很生（因为它是未经优化的肉，你看）！此函数找出每边距给定位置最近的点，然后比较距离。选择距离该位置最小的一侧。

var polyStrokeBoundDragFunc = function(pos, poly, group) {
    //Check if the poly is usable as a polygon
    if(!poly || !poly.getPoints) {
        return pos;
    }

    //Convert the drag position from absolute to local to the group
    //if, of course, there is a group
    if(group && group.getAbsolutePosition) {
        pos.x = pos.x - group.getAbsolutePosition().x;
        pos.y = pos.y - group.getAbsolutePosition().y;
    }

    var newX = pos.x, newY = pos.y,
        diff = 9999;   //A bloated diff, for minimum comparision

    //Get the list of points from the polygon
    var points = poly.getPoints();

    //The algorithm is simple, iterate through the list of points
    //and select a pair which forms a side of the polygon.
    //For this side, pick a main point. Find the direction vector
    //with respect to this main point, and find the position vector
    //from this main point to the drag position.
    //Dot product of position vector and direction vector give us
    //the projection of the point on the current side.
    //A simple bounds checking to ensure that the projection is on
    //the side, then a distance calculation.
    //If the distance found is less than the current minimum difference
    //update diff, newX and newY.   
    for(var i=0; i<points.length; i++) {
        //Get point pair.
        var p1 = points[i];
        var p2 = points[(i+1)%points.length];

        //Find the bounds for checking projection bounds later on        
        var minX = (p1.x < p2.x ? p1.x : p2.x),
            minY = (p1.y < p2.y ? p1.y : p2.y),
            maxX = (p1.x > p2.x ? p1.x : p2.x),
            maxY = (p1.y > p2.y ? p1.y : p2.y);

        //Select p2 as the main point.
        //Find the direction vector and normalize it.       
        var dir = {x: p1.x - p2.x, y: p1.y - p2.y};
        var m = Math.sqrt(dir.x*dir.x + dir.y*dir.y);
        if(m !== 0) {
            dir.x = dir.x/m;
            dir.y = dir.y/m;
        }

        //Find the position vector        
        var pVec = {x: pos.x - p2.x, y: pos.y - p2.y};

        //Dot product        
        var dot = pVec.x * dir.x + pVec.y * dir.y;

        //Find the projection along the current side        
        var p = {x: p2.x + dir.x*dot, y: p2.y + dir.y*dot};       

        //Bounds checking to ensure projection remains
        //between the point pair.       
        if(p.x < minX)
            p.x = minX;
        else if(p.x > maxX)
            p.x = maxX;

        if(p.y < minY)
            p.y = minY;
        else if(p.y > maxY)
            p.y = maxY;

         //Distance calculation.
         //Could have simply used squared distance, but I figured 9999 may
         //not be bloated enough for that.       
         var d = Math.sqrt((p.x-pos.x)*(p.x-pos.x) + (p.y-pos.y)*(p.y-pos.y));

         //Minimum comparision.       
         if(d < diff) {
              diff = d;
              newX = p.x;
              newY = p.y;
         }
    }

    //If in a group's local, convert back to absolute    
    if(group && group.getAbsolutePosition) {
        newX += group.getAbsolutePosition().x;
        newY += group.getAbsolutePosition().y;
    }

    //Return updated drag position.
    return {
        x: newX, 
        y: newY
    }
};

这似乎可行，但我仍然觉得解决方案有些混乱。可能有更好的方法，我想不出。