iOS 通过手指滑动绘制人字形图案

Question

我试图通过在绘图 Canvas 中拖动手指来绘制人字形 图案(基本上只是一条锯齿形线)。所以这条线上升 Y 量然后下降 Y 量并重复。我想知道最好的方法来做到这一点。到目前为止，我正在 wave 中创建 1 个部分，然后将其添加到可变路径，然后显示新路径。我真的很希望它像这里绘制之字形的方式一样工作:seamless lite这是我的代码。显然会有部分缺失，但它们在其他地方，以便显示图纸。

现在发生的事情是，当我通过从左向右滑动手指达到特定距离值时，它将绘制锯齿形的一部分。它会闪烁绘图然后消失。在这一点上，我希望线条保持在那里，这样我就可以根据我选择的任何距离继续添加到之字形图案上。如果您继续滑动手指，它将在到达相同距离后再次出现，然后在离开该值后立即消失。

主要抽奖:

- (void)draw
{
CGContextRef context = UIGraphicsGetCurrentContext();

// set the line properties
CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor);
CGContextSetLineWidth(context, self.lineWidth);
CGContextSetAlpha(context, self.lineAlpha);

CGContextAddPath(context, [self drawChevronFromOrigin:CGPointMake(self.firstPoint.x, self.firstPoint.y)]);
CGContextStrokePath(context);

}

绘制之字形并返回新路径:

- (CGMutablePathRef)drawChevronFromOrigin:(CGPoint)origin
{
CGMutablePathRef path = CGPathCreateMutable();

CGPathMoveToPoint(path, nil, origin.x, origin.y);

if (fmodf(self.lastPoint.x - origin.x, 50) == 0)
{
    // Add new chevron wave to specific point
    CGPathAddPath(path, nil, [self drawChevronWaveToPoint:CGPointMake(self.lastPoint.x, self.lastPoint.y)]);
}


return path;
}

如何绘制每个之字形:

- (CGMutablePathRef)drawChevronWaveToPoint:(CGPoint)point
{
// Creates one wave in the chevron pattern
CGMutablePathRef chevronWave = CGPathCreateMutable();
CGPathMoveToPoint(chevronWave, nil, point.x, point.y);
CGPathAddLineToPoint(chevronWave, nil, point.x + 25, point.y+25);
CGPathAddLineToPoint(chevronWave, nil, point.x + 50, point.y-25);
CGPathAddLineToPoint(chevronWave, nil, point.x + 75, point.y+25);

return chevronWave;
}

Answer 1

我认为我会以不同于使用 Core Graphics 的方式来处理这个问题。假设锯齿形沿直线延伸，您可以创建一个以重复图案图像作为背景的 View ，然后随着手指向左或向右移动而更改其宽度。你也可以用一个角度来做，在这种情况下你可以用一个变换来旋转 View (这里没有显示)。

(我会画一条波浪线，因为我更喜欢波浪线而不是之字形)

在图像编辑器中，创建一个锯齿形(或在我的例子中是波浪形)，它可能看起来像这样。只需确保左右边缘是镜像的，以便在重复时成为漂亮的图案。

然后在代码中，你可以像这样创建一个图案color

UIColor *pattern = [UIColor colorWithPatternImage:[UIImage imageNamed:@"squiggle.png"]];

对于实际交互(点击然后拖动以绘制曲线，我使用的是平移手势识别器，创建方式如下:

UIPanGestureRecognizer *pan = 
    [[UIPanGestureRecognizer alloc] initWithTarget:self
                                            action:@selector(userDidPan:)];
[self.view addGestureRecognizer:pan];

为了使平移代码更容易，我为当前波浪线和平移开始的点创建了一个属性

@property (nonatomic, weak)   UIView *currentSquiggleView;
@property (nonatomic, assign) CGPoint startLocation;

平移手势代码包含 3 个部分:开始、更改和结束。当平移开始时，我创建了一个新的波浪形 View ，其高度与我的图像相同但没有宽度，并将其放置在手指的位置。当手指移动时，平移会发生变化，我会更新当前波浪线的宽度，使其变大。并不是说向左平移可能会导致负宽度，在这种情况下 View 也必须移动。最后，当平移结束时，我将当前波浪线设置为 nil，这样我就不能再修改它了。整个 pan 代码如下所示:

- (void)userDidPan:(UIPanGestureRecognizer *)pan
{
    switch (pan.state) {
        case UIGestureRecognizerStateBegan: {
            // Create a new squiggle
            UIColor *pattern = [UIColor colorWithPatternImage:[UIImage imageNamed:@"squiggle.png"]];

            CGPoint panLocation = [pan locationInView:self.view];

            CGRect startRect = CGRectMake(panLocation.x,
                                          panLocation.y,
                                          0,   // no width to begin with
                                          24); // my squiggle image is 24px high
            UIView *squiggle = [[UIView alloc] initWithFrame:startRect];
            squiggle.backgroundColor = pattern;
            [self.view addSubview:squiggle];

            self.startLocation = panLocation;
            self.currentSquiggleView = squiggle;

        } break;

        case UIGestureRecognizerStateChanged: {
            // Change the width of the squiggle
            CGRect previousFrame = self.currentSquiggleView.frame;

            CGPoint panMovement = [pan translationInView:self.view];

            // when panning to the right, increase the width.
            // when panning to the left, increase the width and move the view to the left
            CGRect newFrame = previousFrame;
            newFrame.size.width = fabs(panMovement.x);
            if (panMovement.x < 0) {
                newFrame.origin.x = self.startLocation.x + panMovement.x;
            }

            // standardize the rect before assigning since a left pan could give a negative width
            self.currentSquiggleView.frame = CGRectStandardize(newFrame);

        } break;

        case UIGestureRecognizerStateEnded: {
            // Stop referencing this squiggle so that we don't modify it anymore
            self.currentSquiggleView = nil;
        } break;

        default:
            break;
    }
}

波浪形的结果是这样的: