如何使用 Core Graphics 绘制自定义样式的线条?

发布于 2024-11-17 14:33:28 字数 2190 浏览 1 评论 0原文

我目前正在使用 Core Graphics 画一条线。这真的很简单。

- (void)drawRect:(CGRect)rect {
    CGContextRef c = UIGraphicsGetCurrentContext();
    CGFloat red[4] = {1.0f, 0.0f, 0.0f, 1.0f};
    CGContextSetStrokeColor(c, red);
    CGContextBeginPath(c);
    CGContextMoveToPoint(c, 5.0f, 5.0f);
    CGContextAddLineToPoint(c, 300.0f, 600.0f);
    CGContextSetLineWidth(c, 25);
    CGContextSetLineCap(c, kCGLineCapRound);
    CGContextStrokePath(c);
}

这效果很好。假设我们想要绘制一条自定义样式线。例如,假设我们想模仿蜡笔的风格。设计师给了你蜡笔风格的图片:https://i.sstatic.net/zcazJ.jpg

要实现此效果,我认为我需要执行以下操作:

  1. 创建 crayonImage1-crayonImage4 的特殊彩色版本

  2. 每次您在线条之间添加一条线,您使用一个蜡笔图像

  3. 每次绘制一个点时,您都​​会交替使用蜡笔图像。

第 1 步是有道理的。我可以使用以下方法:

- (UIImage *)image:(UIImage *)img withColor:(UIColor *)color {    
    // begin a new image context, to draw our colored image onto
    UIGraphicsBeginImageContext(img.size);

    // get a reference to that context we created
    CGContextRef context = UIGraphicsGetCurrentContext();

    // set the fill color
    [color setFill];

    // translate/flip the graphics context (for transforming from CG* coords to UI* coords
    CGContextTranslateCTM(context, 0, img.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);

    // set the blend mode to color burn, and the original image
    CGContextSetBlendMode(context, kCGBlendModeColorBurn);
    CGRect rect = CGRectMake(0, 0, img.size.width, img.size.height);
    CGContextDrawImage(context, rect, img.CGImage);

    // set a mask that matches the shape of the image, then draw (color burn) a colored rectangle
    CGContextClipToMask(context, rect, img.CGImage);
    CGContextAddRect(context, rect);
    CGContextDrawPath(context,kCGPathFill);

    // generate a new UIImage from the graphics context we drew onto
    UIImage *coloredImg = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    //return the color-burned image
    return coloredImg;
}

我不确定如何完成步骤2和3。CoreGraphics中是否有API用于将图像设置为线点?如果是的话,它是什么?我该如何使用它?

预先感谢,

-大卫

I'm currently drawing a line using Core Graphics. It's really bare bones and simple.

- (void)drawRect:(CGRect)rect {
    CGContextRef c = UIGraphicsGetCurrentContext();
    CGFloat red[4] = {1.0f, 0.0f, 0.0f, 1.0f};
    CGContextSetStrokeColor(c, red);
    CGContextBeginPath(c);
    CGContextMoveToPoint(c, 5.0f, 5.0f);
    CGContextAddLineToPoint(c, 300.0f, 600.0f);
    CGContextSetLineWidth(c, 25);
    CGContextSetLineCap(c, kCGLineCapRound);
    CGContextStrokePath(c);
}

This works well. Let's say that we wanted to draw a custom style line. Say we wanted to imitate the style of a crayon for example. And that the designer handed your crayon style images: https://i.sstatic.net/zcazJ.jpg

To do accomplish this effect I think I need to do something like this:

  1. Create a special colored versions of crayonImage1-crayonImage4

  2. Every time you add a line to line you use one of the crayonImages

  3. You alternate the crayonImages every time you draw a point.

Step 1 makes sense. I can use the following method:

- (UIImage *)image:(UIImage *)img withColor:(UIColor *)color {    
    // begin a new image context, to draw our colored image onto
    UIGraphicsBeginImageContext(img.size);

    // get a reference to that context we created
    CGContextRef context = UIGraphicsGetCurrentContext();

    // set the fill color
    [color setFill];

    // translate/flip the graphics context (for transforming from CG* coords to UI* coords
    CGContextTranslateCTM(context, 0, img.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);

    // set the blend mode to color burn, and the original image
    CGContextSetBlendMode(context, kCGBlendModeColorBurn);
    CGRect rect = CGRectMake(0, 0, img.size.width, img.size.height);
    CGContextDrawImage(context, rect, img.CGImage);

    // set a mask that matches the shape of the image, then draw (color burn) a colored rectangle
    CGContextClipToMask(context, rect, img.CGImage);
    CGContextAddRect(context, rect);
    CGContextDrawPath(context,kCGPathFill);

    // generate a new UIImage from the graphics context we drew onto
    UIImage *coloredImg = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    //return the color-burned image
    return coloredImg;
}

I'm unsure how I can complete steps 2 and 3. Is there an API in CoreGraphics for setting an image as the point of line? If so what is it and how can I use it?

Thanks in advance,

-David

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

云朵有点甜 2024-11-24 14:33:28

从以下示例开始: http://www.ifans.com/forums/showthread .php?t=132024

但是对于画笔,不要画线。只需使用 CGContextDrawImage 绘制画笔图像即可。

基本上,您只需为每次触摸绘制一个图像即可。

Start with the following example: http://www.ifans.com/forums/showthread.php?t=132024

But for brushes, don't draw a line. Simply draw the brush image using CGContextDrawImage.

Basically, you simply draw an image for every touch.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文