无法绘制一个或多个图层:_UIBezierPath课程：如何在图层上绘制Cuphead

无法绘制一个或多个图层:

I have a lot of custom shape layers and bezier paths on my last projects. I want to share my experience in custom shapes drawing. The knowledge about Core Animation has some interesting problems. As for me, the main problem here is rare in custom shapes using. So only sometimes you need to draw something custom, and you don’t have, such experience in that, because it isn’t a core knowledge of iOS developer. Don’t get me wrong. I am talking developers with 1–2 years of experience and I think that I know why. A developer like I said above has a list of must-have skills and Core Animation not a part of them. That’s why some developers have knowledge gaps in custom shapes drawing.

在上一个项目中，我有很多自定义形状图层和贝塞尔曲线路径。 我想分享我在自定义形状绘图中的经验。 有关核心动画的知识有一些有趣的问题。 对于我来说，这里的主要问题在自定义形状使用中很少见。 因此，只有有时候您需要绘制一些自定义的东西，而您却没有这样的经验，因为这不是iOS开发人员的核心知识。 不要误会我的意思。 我说的是具有1-2年经验的开发人员，我想我知道为什么。 像我上面说的那样，开发人员列出了一些必备技能，而Core Animation并不是其中的一部分。 这就是为什么一些开发人员在自定义形状绘图方面存在知识空白的原因。

BezierPath has a lot of ways to draw elements of shape. We will talk only about used here. In this post, we will use the most used ways to draw custom shapes. I think it can be a good start for developers who have problems and misunderstandings about shapes drawing. We will draw a cuphead like in the screen below.

BezierPath有很多绘制形状元素的方法。 我们只会在这里谈论使用。 在本文中，我们将使用最常用的方式绘制自定义形状。 我认为对于形状绘制有问题和误解的开发人员，这可能是一个好的开始。 我们将在下面的屏幕中绘制一个茶杯头。

理论部分 (Theoretical Part)

1. Parts of BezierPath: Line, QuadCurve, Curve, UIBezier ready to use predefined shapes (rectangles, ovals, circles, the arc of circles, rounded rectangles.
   BezierPath的部分：线，QuadCurve，曲线，UIBezier准备使用预定义的形状(矩形，椭圆形，圆形，圆弧，圆角矩形)。
2. How to create shapes from bezier paths.
   如何从贝塞尔曲线路径创建形状。

CAlayers中的坐标系 (The coordinate system in CAlayers)

The coordinate system inside the layer is a little bit different from the Cartesian coordinate system. In the layer coordinate system, you don’t have a negative value, and all shapes will draw from the left-top corner. You can see an empty coordinate system below. It will have a gray background for better understanding.

图层内部的坐标系与笛卡尔坐标系略有不同。 在图层坐标系中，您没有负值，所有形状将从左上角绘制。 您可以在下面看到一个空的坐标系。 它将具有灰色背景，以便更好地理解。

贝塞尔曲线 (Bezier Lines)

For the drawing line, you need to set the first point with the method move (x: 200, y: 200). After that, you can add the second point with function addLine (x: 380, y: 380). You can easily add as many lines as you need. In my example below I added 2 lines.

对于绘图线，您需要使用move方法设置第一个点(x：200，y：200)。 之后，您可以使用功能addLine添加第二个点(x：380，y：380)。 您可以根据需要轻松添加任意行。 在下面的示例中，我添加了2行。

贝塞尔曲线曲线 (Bezier QuadCurve)

If you want to draw a curve with 1 control point you can easily do it with addQuadCurve method.

如果要绘制带有1个控制点的曲线，则可以使用addQuadCurve方法轻松完成。

贝塞尔曲线 (Bezier Curve)

If you want to draw a curve with 2 control points you can do it with addCurve method. With 2 control points, you can easily build difficult paths with any form as you need.

如果要绘制带有2个控制点的曲线，则可以使用addCurve方法进行addCurve 。 通过2个控制点，您可以根据需要轻松构建任何形式的困难路径。

即用型预定义的Bezier路径。 (Ready-to-use predefined Bezier paths.)

UIBezierPath class has predefined inits which can create ovals, circles rectangles, etc.

UIBezierPath类具有预定义的初始化，可以创建椭圆形，圆形矩形等。

形状部分 (Shapes Part)

Let’s talk a little bit about the shape part. UIBezierPath creation isn’t enough. You need to put a path inside CAShapeLayer. You can customize (lineWidth, fillColor, strokeColor) your CAShapeLayer. UIBezierPath can’t be customized because it is just a curve.

让我们谈谈形状部分。 仅创建UIBezierPath是不够的。 您需要在CAShapeLayer中放置一个路径。 您可以自定义CAShapeLayer(lineWidth，fillColor，strokeColor)。 无法自定义UIBezierPath，因为它只是一条曲线。

实现 (Realization)

The theoretical part you can easily find anywhere on the internet. But it is not clear how to create some complex parts. We can draw lines, curves, rectangles, circles, ovals and that’s why I want to show how to draw a complex shape with all these elements. I choose a cuphead icon for this. Now we will draw the image from this post preview.

您可以在互联网上的任何地方轻松找到理论部分。 但是尚不清楚如何创建一些复杂的零件。 我们可以绘制直线，曲线，矩形，圆形，椭圆形，这就是为什么我想展示如何使用所有这些元素绘制复杂的形状。 我为此选择了一个cuphead图标。 现在，我们将从该帖子预览中绘制图像。

开始 (Start)

Here you can find the ready project. I created a CupheadView.swift file, and all shapes will be here.

在这里您可以找到准备好的项目 。 我创建了一个CupheadView.swift文件，所有形状都在这里。

Full Code

完整代码

In the setup method, you can see a full list of all shapes.

在setup方法中，您可以看到所有形状的完整列表。

头部形状 (Head Shape)

The head shape has only 1 QuadCurve and 1 Curve.

头部形状只有1个QuadCurve和1条曲线。

嘴形 (Mouth Shape)

Mouth shape has 2 main parts — parent shape and tongue shape. The parent path has only 2 curves and black fill color. The tongue has 3 parts — 2 curves and 1 QuadCurve. The tongue is also filled but in red color.

嘴形有两个主要部分-父母形和舌形。 父路径只有2条曲线和黑色填充颜色。 榫舌有3个部分-2个曲线和1个QuadCurve。 舌头也很饱，但是颜色是红色的。

眼睛和鼻子的形状 (Eyes and Nose Shape)

Each eye has a parent shape and eye shape. Eye shape contains only 1 Curve shape. Eye Shape has 1 QuadCurve and 2 Curve shapes and filled to black. The nose is a UIBezier oval predefined element. It has a stroke and filling.

每只眼睛都有一个父形状和一个眼睛形状。 眼睛形状仅包含1个曲线形状。 眼形有1个QuadCurve和2个Curve形状，并填充为黑色。 鼻子是UIBezier椭圆形预定义元素。 它有中风和填充。

饮水管和耳朵的形状 (Drinking Tube and Ear Shapes)

The drinking tube is the most difficult part here. It has 4 elements inside. Each element has its own curves and lines

饮水管是这里最困难的部分。 它内部有4个元素。 每个元素都有自己的曲线和线

结论 (Conclusions)

The BezierPath drawing only looks like a difficult thing. But even with technics from this post, you can easily create a complex icon look like above. You just need to see the simple curves, lines, and shapes inside the complex shapes that you need.

BezierPath绘图看起来只是一件困难的事情。 但是，即使使用本文中的技巧，您也可以轻松创建类似于上图的复杂图标。 您只需要查看所需的复杂形状中的简单曲线，直线和形状。

I have other posts about shapes drawing, layers, custom progress bars, etc. You can check it here:

我还有其他有关形状绘图，图层，自定义进度栏等的文章。您可以在此处进行检查：

我的社交媒体 (My Social Media)

LinkedIn Twitter Original Blog Github

LinkedIn Twitter 原始博客 Github

翻译自: https://medium.com/flawless-app-stories/uibezierpath-lesson-how-to-draw-cuphead-on-layers-d164fd23cf61

无法绘制一个或多个图层: