Tag: 图形
核心图形第1部分
Core Graphics是IOS内建的绘图框架，当系统内建的样式无法满足您的需求时，可以拿一张图丢进元件中代替原本的图样，或者用Core Graphics绘制出需要的样式。 当你想要在一个元件上做绘图时，你需要在draw（_ rect：CGRect）里面添加Core Graphic的程序代码，以下使用UIView作为示例： 这是一个UIBezierPath已经内建的方法椭圆形，但路径本身并不会有任何动作，所以需要一个fill来填满这个封闭的路径，当然也可以改变它的颜色。 在这边如果要看到你每一次修改的结果，可能会觉得很麻烦需要一直重新构建你的模拟器，Xcode里面有个属性@IBDesignable可以让Storyboard中的查看及时更新。 除了填满（fill）的方法之外，还有无填满（stroke）的方法： 在上面的示例可以看到因为有线宽的关系，在边界会被切掉一些，所以试图不要让图形完全贴合在视图的边上，尤其是在无填满的状况下尤其明显。 上面的例子都是一个完整的图形，那若是要画线条呢？在UIBezierPath的有移动与addLine的方法： 利用前面介绍过的方法应该能够组合出很简单的图形 在Core Graphic上绘图都是一层一上上去的，如果换个顺序，把最细长的矩形quad往下放时 以下补充一些方法 这些方法都很常在图片中出现，可以自己尝试看效果会是某种子
核心图形第2部分
上一篇介绍的是线条与几何图形，但很多时候光是用几何图形是没办法做到想要的效果。首先要介绍的是渐层色，渐层色非常非常的常见，Core Graphics有中有CGGradient可以定义渐层色的颜色与比例区块： 那如何在这个色块里面增加另一个拥有渐层色的图形？现在画布是全部的范围，所以要先裁切出你需要的图形，现在addClip这个方法裁切区块： 在处理完第二个色块之后，看起来都没什么问题，但是如果要添加新的色块呢？我们尝试看加一个同木板的圆，然后把圆心位置移动： 会发现圆被裁掉了，因为现在画布就只有中间圆形的大小，所以可以编辑的区块链只有在这个圆的范围内，那如果编辑区域要超过这个被裁切过的画布，就要恢复到裁切之前，那要如何回到哪裁切之前，在裁切之前，我们使用saveGState这个方法把裁切之前的画布存起来，在用restoreGState把存起来的画布调用出来： 以上是Core Graphic比较基础的用法，当然还有很多方法，但在这边就不多做介绍。如果是太复杂的图就需要很大量的数学运算，看到这边应该都会觉得画图就是在算数学，所以如果不是图表之类需要运算的图，把找图片套入元件就好，不要把自己搞到疯掉。如果有什么想知道的方法可以留言让大家一起讨论！ Nibelheim11 / CoreGraphicsDemo 通过在GitHub上创建一个帐户为CoreGraphicsDemo开发做出贡献。 github.com
在iOS 10中将领域和图表与Swift 3结合使用
当我阅读有关如何一起使用Realm和Charts的一些教程时，我面临的挑战很少。 主要是因为我发现的所有教程都是针对Swift 2和旧版本的Realm和/或Charts的。 因此，我决定在GitHub上创建一个简单的示例项目，并写下所采取的步骤。 这是为了让我更好地记住，并希望能帮助其他遇到相同问题的人。 关于本教程 本教程从创建新项目开始，并假定读者已经对Xcode和Swift有所了解。 在此示例中，我们制作了一个简单的应用程序，您可以在其中计算访问者，并通过按按钮将当前计数和日期添加到数据库中。 然后它将立即显示在图表中。 本教程中使用的软件 这是我在本教程中使用的已使用软件的列表。 如果您的计算机上尚未安装CocoaPods，请从下面查看安装指南，因为需要遵循该指南。 Xcode 8.0（8A218a） CocoaPods（1.0.1）（ 安装指南 ） RealmSwift（2.0.2） 图表（3.0.1） 您最喜欢的用于编辑Podfile的文本编辑器（我使用Sublime Text） 建立新专案 启动您的Xcode并创建新的Xcode项目。 然后选择Single View Application，然后单击Next 。 现在，我们为项目设置选项。 您可以使用任何想要用作产品名称 ， 组织名称和组织标识符的 名称 。 根据需要填充数据后，单击“ 下一步” 。 接下来，您将选择要存储在设备上的项目的位置。 在此示例中，我选择了桌面。 如果您想为项目创建Git存储库，请选中Source Control 。 此后，将创建您的项目，并向您显示类似的Xcode。 现在关闭Xcode。 使用CocoaPods 接下来，我们将为项目设置CocoaPods。 为此，您必须打开终端并转到创建项目的文件夹。 因为我们确实将本教程中的项目保存到了桌面，所以我们将这样写到终端： cd桌面/ RealmAndCharts示例/ RealmAndCharts示例/ 现在您位于正确的文件夹中，我们准备设置CocoaPods。 因此，将以下命令写入Terminal。 荚初始化 CocoaPods将生成一个名为Podfile的文件。 在您喜欢的文本编辑器中将其打开。 […]
ARKit + SceneKit几何图形教程（第2部分）
如果您还没有，我强烈建议您阅读《 ARKit + SceneKit几何图形教程》（第1部分），其中有一些核心图形概念，您需要对其进行理解才能继续。 到目前为止，我已经向您展示了如何使用带有顶点，法线贴图和纹理贴图的原始类型重新创建SCNPlane和SCNBox的示例。 我接下来要讨论的是如何通过缩放，旋转或平移场景节点无法实现的方式使这些几何体生动起来。 这是本教程随附的GitHub存储库： maxxfrazer / SCNCustomGeometries-Part2 伴随我的中篇文章的第2部分。 通过创建以下内容，为maxxfrazer / SCNCustomGeometries-Part2开发做出贡献： github.com 我们要做的第一件事是获取多维数据集的单个顶点，并制作一个动画，使其看起来像是从多维数据集的中心拉开，然后随着其移回原位而产生摆动效果。 下面的GIF演示了动画： 单击此处在GitHub上查看此项目 这里的基本思想是，给定点[x,y,z]处的顶点，我想将其拉至[1.5x, 1.5y, 1.5y] ，然后将其释放回[x,y,z] 。 此处是随机选择顶点的，但是您可以添加hitTest来通过点击选择点。 当做这样的事情时，我发现使用图形计算器很有用，Desmos确实很棒，我已经使用了很多年了。 我建立了一个新类BoxStretcher ，它是SCNNode子类。 我还在SCNGeometry添加了另一个类函数，以返回具有8个顶点的标准多维数据集的顶点和索引。 我添加到BoxStretch的另一个有用函数是updateGeometry() ，它在给定更新后的顶点和索引的情况下创建SCNGeometry，并在顶点更新时重新分配节点的几何形状。 我发现为几何更新设置动画的最佳方法是使用SCNAction.customAction（duration：action :)。 无论您在代码块中放置什么，都称为每一帧，这是大多数动画所需要的。 这是animateCorner()的内容，它将在每次调用时更新顶点并刷新几何： 上面看起来有点复杂，所以让我们分解一下。 elapsedTime将是一个数字[0–3]，因此在开始的0.5秒内，我们将通过if而不是else。 使用Desmos，我们可以看到它的图形如下所示（将时间交换为x）： 因此，当elapsedTime达到0.5时，顶点应为[x，y，z] *（1 + 0.5），这将是我们想要的最远距离。 现在，当我们在0.5之后引入该部分时，如果将其分解，则为正弦波乘以指数衰减。 没有衰减，它将永远继续摆动，但是有了衰减，我们得到了顶点的良好运动，速度变慢并回到零。 当我们有零时，我们有：[x，y，z] *（1 + 0.0）; 回到我们的起点。 这是指向我的Desmos图的链接，沿y轴有一个点，该点应遵循与顶点完全相同的模式。 拉伸释放 拉伸释放 拉伸释放www.desmos.com 对不起，如果我在那里失去你。 关键是我们希望该点沿[x，y，z]方向移动，但是自从我们开始以来基于时间多少？ 我们需要一个函数，该函数需要花费时间并输出我们应该沿着曲线移动多少。 […]
工业视图：矢量化视图
今天的iOS建筑工人食谱：如何使用通过PaintCode创建的自定义UIView在iOS项目中“矢量化”一个以太坊图标文件。 在适当的情况下使用，在代码中绘画一些图标将使该项目更加敏捷，更加幸福，并与世界全面实现精神和情感上的和平。 问题 在日常的工业iOS工作中，开发人员会为iOS应用遇到很多图像。 通常这些文件打包为PNG或JPG文件，因此随着时间的推移，该项目最终会产生数十个图像文件。 有时，您的设计师会要求您对图标进行颜色或大小上的细微调整，而来回剥离图像文件可能会很累。 尽管有很多出色的工具（Zeplin，Sketch等），但手动将图像文件一次又一次地添加到Xcode中并造成潜在的合并冲突总是很麻烦的。 解 使用PaintCode创建自定义UIView，它将始终绘制您需要的所有变体，所有A / B测试组合。 是的 图标最适合绘图吗？ 我上线了，从jax gotham找到了一组50个以太坊图标，可以在SVG中使用，并且是开源的……谢谢Jax！ 通常，当图标没有太多点并且很容易调整大小时，它们非常适合这种矢量化的UIView。 只需将ethereum-coin3.svg拖到PaintCode中，它就会在下面的代码翻译中显示，非常好！ 正如Caroline Begbie所指出的那样，PaintCode还是学习iOS（和其他平台）上Core Graphics和UIKit上绘图的一种好方法。 我对这些层进行了分组和调整，以便以后可以在代码中对其进行自定义。 自定义颜色，然后将它们分配给特定的组以供以后自定义也是一个好主意。 调整大小限制功能是PaintCode最好的功能之一。 您只需要对元素进行分组，然后将它们放置在框架下-这将使图标随框架正确调整大小。 您可以从PaintCode的代码菜单中复制和调整代码，也可以将其导出为StyleKit：此StyleKit可以包含多个图标和自定义颜色的绘图代码。 一旦在Xcode中提供了CryptoCoin样式包，就可以很容易地对代码进行调整，以执行基本的工作，例如为每个组设置颜色（完整代码）： 公共 类 CryptoCoin：NSObject { @objc 动态 公共 类 func drawEthereumcoin3（frame：CGRect = CGRect（x：0，y：0，宽度：1024，高度：1024）， coinColor：UIColor = .white， outlineColor：UIColor = .black， logoColor：UIColor = .black， gleamColor：UIColor = .black）{ /// 以太坊硬币视图 这是日常使用的原始模板，以及用于日常情况的默认初始化器。 就是这样！ 现在，您已经有了一个不错的UIView类，可以随时用于工业化日常使用： […]
Swift CAShapeLayerで図形にグラデーションをつける方法
UIViewにCAShapeLayerを补充し図形を表示できる。CAShapeLayerのプロパティには，fillColor（背景を涂る色指定）やstrokeColor（図形の轮郭を书く时の色指定）が用意されているので，简単に図形に色を涂ることができる。 ではCAShapeLayerで背景色にグラデーションショ场合はどうするのか？ 毎回忘れるのと误解していたので整理がてらメモ。 CALayerの面膜 ayラデーションを付ける前にCALayerのmaskの机能を见てみる。 口罩— CALayer | Apple开发人员文档 var mask: CALayer? { get set } を，别のCALayerを面具にセットすると，もともとのCAlayerの図形が「マスク」され部分的に表示されるという机能である。 面具サンプル 赤い星のCAShapeLayerに黒丸4つのCAShapeLayerをmaskとして设定すると，星の一部が切り抜かれて表示される。 黒丸4つのマスクと重なった部分が表示されたのだ。 如Swiftコード。 黒丸マスクCAShapeLayer // mask path let maskpath = CGMutablePath() maskpath.addEllipse(in: CGRect(x: 10, y: 10, width:30, height:30)) maskpath.addEllipse(in: CGRect(x: 10, y: 60, width:30, height:30)) maskpath.addEllipse(in: CGRect(x: 60, y: 10, width:30, height:30)) maskpath.addEllipse(in: CGRect(x: 60, y: 60, […]
