为什么在UIView上绘制的矩形是模糊的，而在UIView上添加图层在放大UIView时却不是？ - 腾讯云开发者社区

本系列文章算是一系列读书笔记，想了解更多，请看原文 1.图层树 1.1 视图一个视图就是在屏幕上显示的一个矩形块（比如图片，文字或者视频），它能够拦截类似于鼠标点击或者触摸手势等用户输入。...CALayer类在概念上和UIView类似，也是一些被层级关系树管理的矩形块，也可以包含一些内容，并且管理子视图的位置。...1.3 平行的层级关系每个UIView都对应着一个CALayer，视图的职责是创建并管理这个图层，以确保党子视图在层级关系中添加或者被移除的时候，他们对应的图层也同样的在对应的层级关系树中有相同的操作...真正用来在屏幕上显示的是图层（CALayer）,UIView是对它的一个封装，提供一些交互触摸功能，和一些Core Animation底层的接口。...在blueLayer上显式调用了-display。因为当图层显示在屏幕上时，CALayer不会自动重绘，这和UIView不同。需要手动调用。我们没有调用masksToBounds。

1.2K2 0

iOS 页面渲染 - UIView & CALayer

这里说的 view 的 layer 是指 view 的 RootLayer，对于后添加上去的子 Layer 还是会有隐式动画的。页面渲染流程那么为什么 CALayer 可以呈现可视化内容呢？...} CALayer渲染流程上图是 CALayer 在渲染之前的流程，我们可以稍微进行归纳一下：当调用 [UIView setNeedsDisplay] 时，实际上会直接调用底层 layer 的同名方法...如果能够响应，实际上是提供了异步绘制的入口，也就是给我们进行异步绘制留有余地。...补充一点，视图在初始化时会自动触发 setNeedsDisplay，添加到视图层级之后还会自动触发 setNeedsLayout；下面我们再分别看下上图的系统绘制流程以及异步绘制展开后相关知识。...，其中 origin (CGPoint 类型) 便是矩形左上角的位置，size (CGSize 类型) 为矩形的尺寸；上节我们已经说到 UIView 的视图属性其实本质上就是对其持有的 CALayer

1.9K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

iOS动画-CALayer基础知识

它实际上是一个复合引擎，可以将存储在图层树体系中的不同独立图层，尽可能快地组合成不同的可视内容呈现于屏幕上；所以做动画只是Core Animation的特性之一； Core Animation直接作用于...时，其内部会自动创建CALayer图层对象(即UIView的关联图层)，UIView调用drawRect:方法进行绘图，并且将所有的内容绘制到自己的图层上，绘制完毕后，系统会将图层拷贝到屏幕上，于是就完成了...contentsRect (CGRect) 允许在图层边框里显示寄宿图的一个子域 contentCenter (CGRect) 定义一个固定的边框和一个在图层上可拉伸的区域三、UIView方法绘制自定义寄宿图...主动绘制我们需要显式的调用-display方法；这不同于UIView，当图层显示到屏幕上时，CALayer不会自动重绘它的内容，CALayer把重绘的决定权交给了开发者； 2.绘制特点尽管没有使用...(或视图)坐标系下的点或者矩形转换为另一个图层(或视图)坐标系下的点或者矩形；开发过程中我们通常操作的对象都是视图，所以下面以视图为例简单演示其用法：首先创建添加两个宽高都是100*100的橙色、紫色视图在控制器的

1.9K5 0

CALayer的寄宿图

CALayer类在概念上和UIView类似，同样也是一些被层级关系树管理的矩阵块，同样也可以包含一些内容（像图片、文本、背景色），管理子图层的位置。...如果你只是单纯地想放大图层的contents图片，那么你可以通过layer的transform和affineTransform属性来达到此目的，放大和缩小图片并不是contentsScale的目的所在。...它用来判断在绘制图层的时候应该为寄宿图创建的空间的大小，和需要显示的图片的拉伸度（假设没有设置contentsGravity属性）。...的值，就可以改变绘制图片时每个点的像素数，进而改变展示在屏幕上的图片大小。...当图片大小超过了视图的边界时，默认情况下，UIView会绘制超过边界的内容或者子视图，在CALayer下也是这样的。

1K2 0

【IOS开发进阶系列】动画专题

关系 CALayer类在概念上和UIView类似，同样也是一些被层级关系树管理的矩形块，同样也可以包含一些内容(像图片，文本或者背景色)，管理子图层的位置。...其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层，在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层 @...property(nonatomic,readonly,retain) CALayer *layer; 当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上...不同于UIView，当图层显示在屏幕上时，CALayer不会自动重绘它的内容。它把重绘的决定权交给了开发者。 ...当给立方体添加视图的时候，我们实际上是按照一个顺序添加，所以按照视图/图层顺序来说，4，5，6在3的前面。

5671 0

iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程

在CoreAnimation中，大多数的动画效果是添加在图层属性的变化上，例如，改变图层的位置，大小，颜色，圆角半径等。Layer层并不决定视图的展现，它只是存储了视图的几何属性状态。...三、锚点对几何属性的影响关于Layer层，我们需要了解一个有关锚点的概念，锚点决定了图层的绘制位置以及动画展示时其参照的点，锚点的取值范围为0-1，锚点有两个地方在应用中会有很大影响：...2.锚点决定进行动作的参照点例如一个旋转动作，锚点决定了层旋转的中心点，对于放大缩小的动作，锚点决定了放大或者缩小参照的中心点。可以来看下边一组图： ? ? ?...上面两个矩形，frame和bounds都是一样的，第一个矩形的锚点位置为(0.5,0.5)，第二个为(0,0), 因此，两个矩形的position点是不同的，第一个是(100,100),第二个是(40,60... Layer是专门用于辅助我们绘制图像的层，它使支持三维坐标系的绘制的，通过每个坐标点与转换矩阵的运算，来决定最后绘制的状态，并且，Layer可以更高帧率的绘制动画效果。

1K3 0

【IOS开发基础系列】UIView专题

iOS程序启动完毕后，创建的第一个视图控件就是UIWindow，接着创建控制器的view，最后将控制器的view添加到UIWindow上，于是控制器的view就显示在屏幕上了。...重写这个方法可以用来选择忽略一些他们不关心的对象 drawRect: 在接收者视图中绘制矩形 - (void)drawRect:(CGRect)rect 参数 rect 一个定义的需要绘制的矩形...当这个方法被调用，接收者可以假定他的帧在坐标上已经转换，边界矩形已经应用；所有他要做的就是绘制自定义的方法。...消息或者子视图从接收者视图层次中移除因为它要被添加到其他视图了 3 UIView动画 3.1 概述 UIView视图的动画功能，可以使在更新或切换视图时有放缓节奏、产生流畅的动画效果，进而改善用户体验...但是须知：CATransition只针对图层，不针对视图。图层是Core Animation与每个UIView产生联系的工作层面。

7043 0

CALayer 图层概念二、CALayer属性二、方法

UIView负责监听和相应事件.UIView是更高层的封装在 iOS 中,你能看得见,摸得着的东西基本上都是UIView.比如一个按钮,一个文本标签,一个文本输入框, 一个图标等.这些都是UIView...,其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层,在创建UIView对象时, UIView内部会自动创建一个图层 (即CALayer对象), 通过UIView的layer属性即可访问这个图层....当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘图,并且会将所有内容绘制在自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了UIView得显示.换句话说,UIView...UIColor, UIImage是定义在UIKit框架中的....其次 : QuartzCore框架和CoreGraphics框架是可以跨平台使用的,在iOS和Mac OS X上都能使用 (C语言编写) 但是UIKit只能在iOS中使用 (OC编写).

1.4K7 0

视觉效果 -- iOS Core Animation 系列三

borderColor定义了边框的颜色，默认为黑色。 borderColor是CGColorRef类型。边框绘制在图层边界里面，在所有子图层之前。...如上面的示例的结果一样，边框并不会把寄宿图或子图层的相撞计算出来。而且绘制边框会显示在最上层。阴影 shadow 阴影属性控制图层阴影的属性会比前面的边框多一些。...shadowOpacity属性控制阴影透明度的，它是一个在0.0和1.0之间的浮点数，如果设置为1.0将会显示一个轻微模糊的阴影。...imageview 上 self.imageView.layer.mask = maskLayer; // 两张图片素材是在原文中截图处理的，所以展示的效果和原文有所差别。...这显示的效果有点怪。右边的设置了alpha为0.5。但是在UILabel的位置好像不是0.5的效果。这是因为透明度的混合叠加造成的。实际上右侧中间的透明度是0.75。

1.1K3 0

iOS-圆角、边框、阴影

当设置成YES时，图层里面所有东西都会被截取边框边框需要设置layer的两个属性，borderWidth和borderColor，并且边框是沿着图层bounds绘制，同时包含图层的角 borderWidth...，当值越来越大的时候，边界线看上去就会越来越模糊和自然 5）shadowPath 可以通过这个属性单独于图层形状之外指定阴影的形状阴影是绘制在layer的边界之外的，所以当我们设置masksToBounds...属性为YES 时，阴影就会被裁剪掉圆角+阴影从上面我们可以得出，因为对裁剪属性不同需求，在一个view上，圆角和阴影一般是不可并存的，那么我们需要怎么办呢？...是需要我们传入切圆角view的bounds属性，为什么需要传这个值呢？...self.cCorner是通过conrnerCorner赋值的，self.cRadius是通过conrnerRadius赋值的，所以，在切圆角时，我们需要知道view的大小，如果我们用了约束或者切圆角时没有设置

2.7K5 0

Core Animation实战四（视觉效果）

这里有一些UIView没有暴露出来的CALayer的功能：阴影，圆角，带颜色的边框 3D变换非矩形范围透明遮罩多级非线性动画这篇主要说阴影圆角边框，先看一下Demo效果： ?...self.shadowView.layer.shadowOffset = CGSizeMake(1, 1); //shadowRadius属性控制着阴影的模糊度，当它的值是0的时候，阴影就和视图一样有一个非常确定的边界线...当值越来越大的时候，边界线看上去就会越来越模糊和自然。苹果自家的应用设计更偏向于自然的阴影，所以一个非零值再合适不过了。...双线性滤波算法通过对多个像素取样最终生成新的值，得到一个平滑的表现不错的拉伸。但是当放大倍数比较大的时候图片就模糊不清了。...从名字不难看出，这个算法（也叫最近过滤）就是取样最近的单像素点而不管其他的颜色。这样做非常快，也不会使图片模糊。但是，最明显的效果就是，会使得压缩图片更糟，图片放大之后也显得块状或是马赛克严重。

5402 0

Core Animation Programming

Core Animation 是一个复合引擎,它能快速的组合屏幕上不同显示的内容. 并将其分解成独立图层,存储到Layer Tree 的体系中....视图在屏幕上可以是一个矩形块,它能够拦截类似鼠标点击或者触摸手势等用户交互方式. 并且在层级关系上可以互相嵌套,一个视图可以管理它所有的子视图的位置等.在开发项目过程中,这是非常常见的一个使用场景....一个我们最常用的控件,我们是否真正了解它What's CALayer CALayer 类是一个与UIView 非常类似的类. 同样也是被层级关系树管理的矩形块....UIView 与 CALayer 平行的层级关系每个UIView 都会有一个CALayer 实例图层属性.也就是backing layer.UIView 的职责就是创建并管理这个图层.用来确保当前子视图在层级关系中添加或者移除的时候...实际上,这背后的关联的图层才是真正用来在屏幕上显示和做动画的.UIView 就是对CALayer图层的封装,提供用户交互接口.

1.1K1 0

iOS 事件处理机制与图像渲染过程

CALayer类在概念上和UIView类似，同样也是一些被层级关系树管理的矩形块，同样也可以包含一些内容（像图片，文本或者背景色），管理子图层的位置。它们有一些方法和属性用来做动画和变换。...UIView和CALayer是一个平行的层级关系，每一个UIView都有一个CALayer实例的图层属性，也就是所谓的backing layer，视图的职责就是创建并管理这个图层，以确保当子视图在层级关系中添加或者被移除的时候...实际上这些背后关联的Layer图层才是真正用来在屏幕上显示和做动画，UIView仅仅是对它的一个封装，提供了一些iOS类似于处理触摸的具体功能，以及Core Animation底层方法的高级接口。...UIView 的 Layer 在系统内部，被维护着三份同样的树形数据结构，分别是：图层树（这里是代码可以操纵的，设置属性的最终值会立刻在这里更新）；呈现树（是一个中间层，系统就在这一层上更改属性，进行各种渲染操作...比如一个动画是更改alpha值从0到1，那么在逻辑树上此属性会被立刻更新为最终属性1，而在动画树上会根据设置的动画时间从0逐步变化到1）；渲染树（其属性值就是当前正被显示在屏幕上的属性值）； CADisplayLink

5.6K10 0

详解CALayer的anchorPoint和position

CALayer CALayer属于QuartzCore框架,用于在iOS和Mac OS系统上可见元素的绘制,和属于UIKit框架的UIView的关系是,UIView默认会创建一个CALayer属性...我们所熟悉的UIView有三个重要的布局属性:frame,bounds和center,CALayer对应的叫做 frame,bounds和position. frame代表了图层的外部坐标(在父图层上占据的空间...和position共同决定图层相对父图层的位置,即frame的x,y 在图层旋转时的固定点锚点使用单位坐标来描述,范围为左上角{0, 0}到右下角{1, 1},默认坐标是{0.5, 0.5}....图层旋转时,如何修改锚点在图层旋转时,锚点就是图层的固定点,旋转是沿着这个定点进行的. 来根据一个钟表的demo进行说明吧....bounds.size.width； frame.origin.y = position.y – anchorPoint.y * bounds.size.height anchorPoint是图层在旋转时的固定点

1.1K3 0

iOS学习——Quartz2D学习（1）

他是一个二维的绘图引擎,同时支持iOS和Mac系统 2、Quartz2D能完成的工作　　画基本线条,绘制文字,图片,截图,自定义UIView. 3、Quartz2D在开发中的价值　　当我们的控件样式极其复杂时...Graphics Context(图层上下文,自定义UIView取得上下文就是图层上下文....相关联.才能将内容绘制到View上面.在DrawRect方法方法里步骤: 1.要先自定定UIView 2.实现DrawRect方法 3.在DrawRect方法中取得跟View相关联的上下文...第二种方法:直接在原来的基础上添加线.把上一条的终点当做下一条线的起点.添加一根线到某个点直接在下面addLineToPoint: 10、怎么样设置线的宽度,颜色,样式?...使用stroke和fill方法进行渲染时，不需要我们手动去获取上下文了，这两个方法会自定获取view的上下文，然后在该view上绘制渲染path对应的路径，stroke是绘制线，fill是填充path对应的封闭区域

1.1K2 0

iOS 渲染原理解析

可以看到简单的三角形绘制就需要大量的计算，如果再有更多更复杂的顶点、颜色、纹理信息（包括 3D 纹理），那么计算量是难以想象的。这也是为什么 GPU 更适合于渲染流程。...当放大位图时，可以看见赖以构成整个图像的无数单个方块。只要有足够多的不同色彩的像素，就可以制作出色彩丰富的图象，逼真地表现自然界的景象。缩放和旋转容易失真，同时文件容量较大。...如果在电子束开始扫描新的一帧时，位图还没有渲染好，而是在扫描到屏幕中间时才渲染完成，被放入帧缓冲器中 ---- 那么已扫描的部分就是上一帧的画面，而未扫描的部分则会显示新的一帧图像，这就造成屏幕撕裂。...当然还剩最后一个问题，为什么要将 CALayer 独立出来，直接使用 UIView 统一管理不行吗？为什么不用一个统一的对象来处理所有事情呢？...【UIBezierPath】用贝塞尔曲线绘制闭合带圆角的矩形，在上下文中设置只有内部可见，再将不带圆角的 layer 渲染成图片，添加到贝塞尔矩形中。

2.2K5 0

iOS开发~UIView layer 之前的关系

在最终绘制屏幕时，子图层可以被排列后固定在一起。这可以参考赛车游戏中的图层。游戏可能有几个图层组成：一个绘制背景、一个绘制角色、一个绘制地图显示器。...每个类单独绘制他自己的图层，但当游戏图层被显示出来的时候，3个图层就全都融合在一起了。 gameView不是唯一能够添加子图层的图层。子图层也可以添加自己的子图层，并且可以构建一个完整的图层层次结构。...当你用 addSublayer 来添加一个子图层时，他会被添加到图层层次结构的顶层，所以他会显示在现有所有子图层的最前面。...YES:NO; } 五、绘制在更新一个图层时，变化不是立刻被绘制在屏幕上的。这样你就可以偷偷地对图层做很多写操作而不会被展示给用户，直到所有的操作全部结束为止。...x-y-z 的值定义了轴上在各个方向上的度量(介于-1和+1之间)。在一个轴上赋予值，就会指示变换绕该轴进行旋转。可以把这些值看作是插在图像上的草棍。

1.2K4 0

iOS学习——核心动画之Layer基础

UIImageView中是UIView的主layer上添加了一个次layer（用来绘制contents），我们设置边框的是主layer，但是次layer在上变，不会有任何的影响，所以当我们调用切割语句的时候...在明白要怎么选择之前，我们先了解一下UIView和layer的不同点：在iOS中看的见，摸得着的都是UIView，例如一个按钮，UITextField，UILable等等，都是UIView UIView...之所以能够显示在屏幕上，是试音UIView中有一个图层在创建UIView的时候，系统会自动创建一个CALayer在其中，用于显示东西，可以通过view.layer来去获取图层属性当UIView要去显示的时候...，先去调用drawRect方法，将要绘制的东西绘制到图层上，然后拷贝图层，完成了UIView的显示 UIView只有交互的功能，没有显示的功能 CALayer只要显示的功能，没有交互的功能 UIView...，在开始时每秒执行一次旋转布局绘制。

1.5K6 1

大前端开发中的“树” (下)

全权负责显示内容 (contents) 视图显示原理图 [3] 4.5.1 图层树 CALayer 在概念上与 UIView 类似，同样也是一些被层级关系树管理的矩形块，同样也可以包含一些内容（像图片，...文本或者背景色），管理子图层的位置，在数据结构上构成树的形式，称之为图层树；图层树的能力包括：阴影、圆角、带颜色的边框 3D 变换非矩形范围透明遮罩多级非线性动画在 CALayer 的工作过程中...它的作用是，CALayer 在做隐式动画时，CoreAnimation 就需要在设置一次新值和新值生效之间，对屏幕上的图层进行重新组织。...典型场景包括同步动画和处理用户交互：如果是实现一个基于定时器的动画，而不仅仅是基于事务的动画，这个时候需要准确知道在某一时刻图层显示在什么位置，以便正确摆放图层；如果想让做动画的图层响应用户输入，...这三种类型都遵循一个统一的流程，下面用更新流程图展示。 build 流程某一个节点需要刷新时，会将自己添加到一个单例对象 Owner 的 dirty 列表中，表示自己需要更新。

1.9K3 0

绘图-几个较复杂统计图案例的实现分析

很多UIView）刚开始的是不显示的，加载在当前的UIView上，计算每一个点的动画开始时间，达到小圆点依次作动画的效果。...UIBezierPath，把这个路径拼接上X坐标轴上的两个垂直投影点形成一个底部矩形状的封闭路径，把个路径作为渐变图层的path，并绘制一条比这个UIBezierPath顶部低一点的路径作为渐变图层的遮罩图层...在使用drawRect：重绘页面时注意首先移除已有的图层maskLayer 同时做动画。...(4) 在弹性动画的执行期间，定时器会不断的获取某一时刻的所有的子视图的坐标，并修改曲线上的点的位置的坐标，并根据 currentLinePathForWave 这个方法绘制出渐变图层的 mask...的上沿的边界，然后绘制好整个完整的渐变图层的 mask的完成path并赋值。

1.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

图层树和寄宿图 -- iOS Core Animation 系列一

iOS 页面渲染 - UIView & CALayer

iOS动画-CALayer基础知识

CALayer的寄宿图

【IOS开发进阶系列】动画专题

iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程

【IOS开发基础系列】UIView专题

CALayer 图层概念二、CALayer属性二、方法

视觉效果 -- iOS Core Animation 系列三

iOS-圆角、边框、阴影

Core Animation实战四（视觉效果）

Core Animation Programming

iOS 事件处理机制与图像渲染过程

详解CALayer的anchorPoint和position

iOS学习——Quartz2D学习（1）

iOS 渲染原理解析

iOS开发~UIView layer 之前的关系

iOS学习——核心动画之Layer基础

大前端开发中的“树” (下)

绘图-几个较复杂统计图案例的实现分析

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐