Question

我在Canvas中有一些二次贝塞尔曲线。我怎么能最好选择hit detection，如果它们只有1-2 px宽，我想提供某种容差，这样用户就不必完全点击该线。

是否有东西可以计算距离贝塞尔的最小距离，如果该距离足够小，请选择贝塞尔曲线？

Answer 1

我能想到至少3种扩大二次贝塞尔曲线命中区域的方法

我不推荐这个第一个解决方案，但无论如何它都在这里！

解决方案＃1 - 针对您的贝塞尔曲线上计算的各种点手动测试您的ClickPoint

这是一个计算XY的函数，它是沿着bezier的方式的n％，以及一个测试你的clickPoint是否在该bezier点范围内的函数。

var startPt=makePt(10,100);
var controlPt=makePt(50,30);
var endPt=makePt(90,100);

function makePt(X,Y){ return( { x:X, y:Y } ) }

// find points at various percent along bezier path
// (where percent is a decimal from 0 to 1)
function getQuadraticBezierXY(percent,startPt,controlPt,endPt) {
    var x = Math.pow(1-percent,2) * startPt.x + 2 * (1-percent) * percent * controlPt.x + Math.pow(percent,2) * endPt.x; 
    var y = Math.pow(1-percent,2) * startPt.y + 2 * (1-percent) * percent * controlPt.y + Math.pow(percent,2) * endPt.y; 
    return( makePt(x,y) );
}

// find whether 2 points are close to each other
// range is your pixel tolerance
function arePointsInRange(bezPt,testPt,range){
    var dx=testPt.x-bezPt.x;
    var dy=testPt.y-bezPt.y;
    return( dx*dx+dy*dy <= range*range )
}

解决方案＃2 - 针对“扩大”曲线的封闭路径进行点击测试

注意：下面使用的isPointInPath（）在现代浏览器中可用，但在旧版浏览器上不可用

注意：您不必实际向用户显示加宽的曲线 - 您可以绘制加宽的曲线，但不能绘制context.stroke（）。（请务必查看isPointInPath的文档。）

注意：务必调整起点和终点之间斜线的偏移量。为简单起见，下面的插图使用0斜率。

这是代码和小提琴：http://jsfiddle.net/m1erickson/4GEeu/

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.lineWidth=2;
    ctx.strokeStyle="red";


    var startX=10;
    var startY=100;
    var controlX=50;
    var controlY=50;
    var endX=90;
    var endY=100;
    var offset=20;

    ctx.beginPath();
    ctx.moveTo(startX,startY-offset);
    ctx.quadraticCurveTo(controlX,controlY-offset,endX,endY-offset);
    ctx.lineTo(endX,endY+offset);
    ctx.quadraticCurveTo(controlX,controlY+offset,startX,startY+offset);
    ctx.closePath();
    ctx.stroke();

    // hitTest point [15,110] which is known to be inside
    // the widened curve path
    if(ctx.isPointInPath(15,110)){
        alert("Point [15,110] is in the closed quadratic curve path");
    }

解决方案＃3 - 针对屏幕外画布上的加宽曲线进行命中测试

注意：我的插图只是将屏幕曲线绘制得更宽。您可以在屏幕外的画布上进行测试。

这是代码和小提琴：http://jsfiddle.net/m1erickson/MJfZt/

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.lineWidth=20;
    ctx.strokeStyle="red";

    var startX=10;
    var startY=100;
    var controlX=50;
    var controlY=50;
    var endX=90;
    var endY=100;
    var offset=20;

    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.quadraticCurveTo(controlX,controlY,endX,endY);
    ctx.stroke();

    // hitTest point [10,100] which is known to be inside
    // the widened curve path
    if(hittestByColor(10,100,255,0,0)){
          alert("Pixel [10,100] is inside the widened curve");       
    }

    function hittestByColor(x,y,red,green,blue){
        var pxData = ctx.getImageData(x,y,1,1);
        return(pxData.data[0]==red 
            && pxData.data[1]==green 
            && pxData.data[2]==blue);
    }

Beziercurves上的检测具有公差？

1 个答案: