更新

Question

致电所有专家！我见过各种帖子，说实话，我的需求与SO上的答案略有不同。

我想创建一个用户界面，用户可以在特定区域创建各种线条（直线，曲线，摆动等）（现在可以调用此＆＃34;画布＆＃34;）。每行可以有多个实例。然后，用户可以根据需要拖动和编辑这些行。因此，他们可以拉伸它，更改起点，终点等，甚至可以将整行拖动到画布的边界内。

我已设法绘制线条（使用drawRect）并在每条线的末端显示可拖动的手柄（请参阅参考图像），并且用户可以拖动边界内的端点（红色矩形）适合需要的画布。

我面临的问题是如何点按以激活特定行的编辑。因此，默认情况下，拖动句柄将不可见，用户可以点按该行以激活“编辑”。模式让我们说，并显示句柄（再次点击取消选择）。因此，在上图中，我希望能够检测黄色矩形中的触摸。请记住，UIView边界是整个画布区域，允许用户自由拖动，因此检测触摸显然很困难，因为还有透明区域，并且每行可以有多个实例。

这里是我的代码到目前为止的行类（startHandle和endHandle是每一端的句柄）：

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    CGPoint startPoint = CGPointMake(self.startHandle.frame.origin.x + self.startHandle.frame.size.width/2, self.startHandle.frame.origin.y + self.startHandle.frame.size.height/2);

    CGPoint endPoint = CGPointMake(self.endHandle.frame.origin.x + self.endHandle.frame.size.width/2, self.endHandle.frame.origin.y + self.endHandle.frame.size.height/2);

    UITouch *touch = [[event allTouches] anyObject];
    CGPoint touchLocation = [touch locationInView:self];

    if (CGRectContainsPoint(CGRectMake(startPoint.x, startPoint.y, endPoint.x - startPoint.x , endPoint.y - startPoint.y), touchLocation))
    {
        //this is the green rectangle! I want the yellow one :)
        NSLog(@"TOUCHED IN HIT AREA");
    }
}

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextClearRect(context, self.bounds);

    CGPoint startPoint = CGPointMake(self.startHandle.frame.origin.x + self.startHandle.frame.size.width/2, self.startHandle.frame.origin.y + self.startHandle.frame.size.height/2);

    CGPoint endPoint = CGPointMake(self.endHandle.frame.origin.x + self.endHandle.frame.size.width/2, self.endHandle.frame.origin.y + self.endHandle.frame.size.height/2);


    CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
    CGContextSetLineWidth(context, 2.0f);
    CGContextMoveToPoint(context, startPoint.x, startPoint.y ); //start at this point
    CGContextAddLineToPoint(context, endPoint.x, endPoint.y); //draw to this point

    self.arrow.angle = [self pointPairToBearingDegrees:startPoint secondPoint:endPoint];
    self.arrow.center = endPoint;
    [self.arrow setNeedsDisplay];
    // and now draw the Path!
    CGContextStrokePath(context);

}

到目前为止我尝试过的事情：

尝试检测在起点和终点之间绘制的矩形内的触摸，但这确实返回了我需要的矩形，因为如果线的角度是45度（如果它是更大的区域）见绿色矩形）
试图在drawRect的顶部绘制另一条较粗的线，但是徒劳，因为我必须使它透明，并且它与视图的任何其他区域相同。还试图检测颜色，但这条较粗的线条必须是透明的。

我真的很感激这方面的任何帮助。如果你能告诉我如何为曲线做这个，你可以获得奖励积分。非常感谢你阅读。

Answer 1

你可以做一些数学运算。当触摸事件发生时，您正在查看线上最近点对触摸事件的影响，以及该最近点与触摸事件的距离。如果距离太远，您会希望将触摸事件视为与线路无关。如果距离足够近，您会希望将其视为距离该线最近的点。

幸运的是，hard work已经完成了，但是您想要稍微重构代码以返回最近的点，例如：

// Return point on line segment vw with minimum distance to point p
vec2 nearest_point(vec2 v, vec2 w, vec2 p) {

  const float l2 = (v.x-w.x)*(v.x-w.x) + (v.y-w.y)*(v.y-w.y);
  if (l2 == 0.0) return v;   // v == w case

  // Consider the line extending the segment, parameterized as v + t (w - v).
  // We find projection of point p onto the line. 
  // It falls where t = [(p-v) . (w-v)] / |w-v|^2

  const float t = ((p.x-v.x)*(w.x-v.x) + (p.y-v.y)*(w.y-v.y)) / l2;

  if (t < 0.0) return v;       // Beyond the 'v' end of the segment
  else if (t > 1.0) return w;  // Beyond the 'w' end of the segment

  vec2 projection;
  projection.x = v.x + t * (w.x - v.x);
  projection.y = v.y + t * (w.y - v.y);

  return projection;
}

... and later in code used in the touch event handler ...

vec2 np = nearest_point(linePoint0, linePoint2, touchPoint);

// Compute the distance squared between the nearest point on
// the line segment and the touch point.
float distanceSquared = (np.x-touchPoint.x)*(np.x-touchPoint.x) + (np.y-touchPoint.y)*(np.y-touchPoint.y);

// How far the touch point can be from the line segment
float maxDistance = 10.0;

// This allows us to avoid using square root.
float maxDistanceSquared = maxDistance * maxDistance;

if (distanceSquared <= maxDistanceSquared) {
  // The touch was on the line.
  // We should treat np as the touch point.
} else {
  // The touch point was not on the line.
  // We should treat touchPoint as the touch point.
}

更新

以下是jsfiddle here或嵌入在下面（最好以整页运行）的大部分内容的工作概念验证：

＆＃13;

function nearest_point(v, w, p) {
    var l2 = (v.x-w.x)*(v.x-w.x) + (v.y-w.y)*(v.y-w.y);
    if (l2 === 0.0) return v;
    var t = ((p.x-v.x)*(w.x-v.x) + (p.y-v.y)*(w.y-v.y)) / l2;
    if (t < 0.0) return v;
    else if (t > 1.0) return w;
    var projection = {};
    projection.x = v.x + t * (w.x - v.x);
    projection.y = v.y + t * (w.y - v.y);
    return projection;
}

var cvs = document.getElementsByTagName('canvas')[0];
var ctx = cvs.getContext('2d');
var width = cvs.width, height = cvs.height;

function LineSegment() {
    this.x0 = this.y0 = this.x1 = this.y1 = 0.0;
}

LineSegment.prototype.Set = function(x0, y0, x1, y1) {
    this.x0 = x0;
    this.y0 = y0;
    this.x1 = x1;
    this.y1 = y1;
}

var numSegs = 6;
var lineSegs = [];
for (var i = 0; i < numSegs; i++) lineSegs.push(new LineSegment());

ctx.lineCap = ctx.lineJoin = 'round';

var mouseX = width / 2.0, mouseY = width / 2.0;
var mouseRadius = 10.0;

var lastTime = new Date();
var animTime = 0.0;
var animate = true;
function doFrame() {
    // We record what time it is for animation purposes
    var time = new Date();
    var dt = (time - lastTime) / 1000; // deltaTime in seconds for animating
    lastTime = time;
    if (animate) animTime += dt;
    
    // Here we create a list of animated line segments
    for (var i = 0; i < numSegs; i++) {
        lineSegs[i].Set(
            width * i / numSegs,
            Math.sin(4.0 * i / numSegs + animTime) * height / 4.0 + height / 2.0,
            width * (i + 1.0) / numSegs,
            Math.sin(4.0 * (i + 1.0) / numSegs + animTime) * height / 4.0 + height / 2.0
        );
    }
    
    // Clear the background
    ctx.fillStyle = '#cdf';
    ctx.beginPath();
    ctx.rect(0, 0, width, height);
    ctx.fill();
    
    // Compute the closest point on the curve.
    var closestSeg = 0;
    var closestDistSquared = 1e100;
    var closestPoint = {};
    
    for (var i = 0; i < numSegs; i++) {
        var lineSeg = lineSegs[i];
        var np = nearest_point(
            {x: lineSeg.x0, y: lineSeg.y0},
            {x: lineSeg.x1, y: lineSeg.y1},
            {x: mouseX, y: mouseY}
        );
        
        ctx.fillStyle = (i & 1) === 0 ? 'rgba(0, 128, 255, 0.3)' : 'rgba(255, 0, 0, 0.3)';
        ctx.beginPath();
        ctx.arc(np.x, np.y, mouseRadius * 1.5, 0.0, 2.0 * Math.PI, false);
        ctx.fill();
        
        var distSquared = (np.x - mouseX) * (np.x - mouseX)
        	+ (np.y - mouseY) * (np.y - mouseY);
        if (distSquared < closestDistSquared) {
            closestSeg = i;
            closestDistSquared = distSquared;
            closestPoint = np;
        }
    }
    
    // Draw the line segments
    //ctx.strokeStyle = '#008';
    ctx.lineWidth = 10.0;
    for (var i = 0; i < numSegs; i++) {
        if (i === closestSeg) {
        	ctx.strokeStyle = (i & 1) === 0 ? '#08F' : '#F00';
        } else {
            ctx.strokeStyle = (i & 1) === 0 ? '#036' : '#600';
        }
    	ctx.beginPath();
        var lineSeg = lineSegs[i];
        ctx.moveTo(lineSeg.x0, lineSeg.y0);
        ctx.lineTo(lineSeg.x1, lineSeg.y1);
        ctx.stroke();
    }
    
    // Draw the closest point
    ctx.fillStyle = '#0f0';
    ctx.beginPath();
    ctx.arc(closestPoint.x, closestPoint.y, mouseRadius, 0.0, 2.0 * Math.PI, false);
    ctx.fill();
    
    // Draw the mouse point
    ctx.fillStyle = '#f00';
    ctx.beginPath();
    ctx.arc(mouseX, mouseY, mouseRadius, 0.0, 2.0 * Math.PI, false);
    ctx.fill();
    
	requestAnimationFrame(doFrame);
}

doFrame();

cvs.addEventListener('mousemove', function(evt) {
    var x = evt.pageX - cvs.offsetLeft,
        y = evt.pageY - cvs.offsetTop;
    mouseX = x;
    mouseY = y;
}, false);

cvs.addEventListener('click', function(evt) {
    animate = !animate;
}, false);

＆＃13;

Move mouse over canvas to control the red dot.<br/>
Click on canvas to start/stop animation.<br/>
Green is the closest point on the curve.<br/>
Light red/blue is the closest point on each segment.<br/>
<canvas width="400" height="400"/>

＆＃13;

Answer 2

您可以使用行的起点和终点在touchesBegan中创建CGPath，然后使用CGPathContainsPoint（）来确定触摸是否在线上。

编辑：我不知道你怎么能在飞行中创建只有起点和终点的曲线路径。

我认为这需要一个模型。您需要在创建每行时存储每行的信息（作为CGPath或其他内容），并在每次操作后更新它。然后用它来找到被触摸的线。

您是否放弃了为每条线路使用CALayers的想法？你可以获得性能提升，因为你只需要在每个动作中只重绘一行而不是整个行。

P.S。我不是这方面的专家，因此可以采用更聪明的方式处理这个问题。

Answer 3

如果在起点和终点之间有任意曲线，则必须用点集表示该曲线，即表示曲线的点数。这可以是屏幕上曲线的像素，或者是分辨率较低的点，在这些点之间可以通过直线适当地插补曲线。
要找出，如果用户触摸到足够靠近曲线的位置，您可以将点击手势识别器附加到绘制曲线的视图中。点击视图后，它会向您提供点按的位置，请参阅docs 使用此位置，您必须计算此点与曲线的所有点之间的距离。如果这些值的最小值足够小，则用户触摸曲线。

编辑（由于下面的评论）：

如果曲线仅包含起点，终点以及可能的中间控制点，则它是单个线段或两个线段。在这种情况下，问题是找到点和线段之间的距离然后，给出here给出的答案（包括代码）可能会有所帮助。

如何检测可拖动线上的触摸（使用drawRect绘制）

3 个答案:

更新