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

这似乎有效，但我仍然认为解决方案有些混乱。可能有更好的方法，我无法想到。

将图像约束到KineticJS中的路径

1 个答案: