最近在使用 canvas 画图的时候，遇到了图像文字模糊的问题，解决思路就是根据分辨率绘制不同尺寸的画布。...以下是创建高分辨率画布的代码： /** * 创建高分辨率画布 * @param w 画布宽 * @param h 画布高 * @param ratio 屏幕分辨率 */ function...不创建高分辨率画布 const canvas = document.createElement("canvas"); canvas.width = 100; canvas.height = 100; // 创建使用默认分辨率的画布...const myCanvas = this.createHiDPICanvas(100, 100); // 创建分辨率为 3 的画布 const myCustomCanvas = this.createHiDPICanvas...(100, 100, 3); 最后，贴一个高分辨率画布的开源库 https://github.com/jondavidjohn/hidpi-canvas-polyfill
本文一方面作为自己的学习笔记，另一方面希望能帮助初学者解决实际问题，且看且珍惜 ---- 一.非矢量图模糊问题 假设存在如下图所示的图像，在LaTeX中会调用 \includegraphics 显示图像...然而，如果不是矢量图，其图片放大后边缘会形成锯齿状，即使是EPS格式也可能是错误转换的矢量图形式，如下图所示，其图片内容比较模糊。 那么，如何解决矢量图转换的问题呢？...格式的图像；（2）部分在线网站提供SVG转EPS矢量图的过程，大家可以使用，但需要在最终版PDF论文文件中，放大看是否模糊；（3）部分LaTeX还需要PDF格式的图像文件，但LaTeX会自动将EPS转换为...一方面，读者可以尝试AI编辑EPS图像时调整背景大小；另一方面，Matplotlib导出图像时可以选择SVG图像，再转换为指定的EPS和PDF文件，可以选择在线转换或AI工具转换。...输出结果如下图所示，图像比较模糊。 ---- 六.总结 写到这里，希望这篇文章对您有所帮助，后续也将继续更新内容。还有种在线绘制实验结果图的，以后有机会再介绍。
LOTComposition类是记录动画信息的类，继承 NSObject, 作为整个json文件内容的映射，用于记录所有动画信息的类。...CALayer属性: LOTComposition中有一个属性 CALayer *wrapperLayer 写入当前图层的信息，从类型可以看出是一个CALayer，因此我们可以在CALayer中使用隐式动画...shape是对矢量图的信息携带，这在lottie动画中被大量使用。...因为矢量图要比位图加载更快，并且也会大大减少对设备内存的使用。这里的buildContents方法实现了对矢量图进行描边、填充颜色等操作。...初始化LOTRenderGroup，LOTRenderGroup作为一个矢量图形的类，包含了LOTRenderNode 和 LOTAnimatorNode 拥有的属性和方法。
如果在电子束开始扫描新的一帧时，位图还没有渲染好，而是在扫描到屏幕中间时才渲染完成，被放入帧缓冲器中 ---- 那么已扫描的部分就是上一帧的画面，而未扫描的部分则会显示新的一帧图像，这就造成屏幕撕裂。...也正因为每次要被渲染的内容是被静态的存储起来的，所以每次渲染时，Core Animation 会触发调用 drawRect: 方法，使用存储好的 bitmap 进行新一轮的展示。...CALayer 与 UIView 的关系 UIView 作为最常用的视图控件，和 CALayer 也有着千丝万缕的联系，那么两者之间到底是个什么关系，他们有什么差异？...而从 CALayer 的官方文档中我们可以看出，CALayer 的主要职责是管理内部的可视内容，这也和我们前文所讲的内容吻合。...w=508&h=253&f=png&s=58308] 整个模糊过程分为多步：Pass 1 先渲染需要模糊的内容本身，Pass 2 对内容进行缩放，Pass 3 4 分别对上一步内容进行横纵方向的模糊操作
光栅化的本质是坐标变换、几何离散化。 把layer的shouldRasterize设为YES后，CALayer会被光栅化为bitmap，layer的阴影等效果也会被保存到bitmap中作为缓存。...在使用了shadow或cornerRadius等效果时，缓存使性能得到提升。...3、Blending(混合绘制) GPU会放弃绘制那些完全被其他图层遮盖的内容。...这些中的大多数通常都会导致图片的不正常缩放，如果把一张大图当缩略图显示，或者不正确地模糊图像，那么这个选项将会帮你识别出问题所在。...Flash Updated Regions - 这个选项会对重绘的内容高亮成黄色（也就是任何在软件层面使用Core Graphics绘制的图层）。这种绘图的速度很慢。
一、概念简介 GPU：能够结合几何、颜色、灯光和其他数据而产生一个屏幕图像的硬件组件 渲染：把程序提供的几何数据转换成屏幕上的图像的过程叫做渲染，渲染的结果保存在帧缓存中 像素：计算机上显示的图片都是由矩形的颜色点组成...而是，把渲染结果保存到后帧缓存中，当后帧缓存包含一个完成的图像，前后帧缓存瞬间切换，这样就呈现了新的图像。在iOS系统中，这些操作由系统之家完成，应用不能插手。...参数“GL_STATIC_DRAW”，它表示此缓冲区内容只能被修改一次，但可以无限次读取。...） glEnableVertexAttribArray(GLKVertexAttribPosition); // 填充顶点数据，顶点属性索引（这里是位置）、3个分量的矢量、类型是浮点（GL_FLOAT...）、填充时不需要单位化（GL_FALSE）、在数据数组中每行的跨度是12个字节（4*3=12。
当视频控制器还未读取完成时，即屏幕内容刚显示一半时，GPU 将新的一帧内容提交到帧缓冲区并把两个缓冲区进行交换后，视频控制器就会把新的一帧数据的下半段显示到屏幕上，造成画面撕裂现象 ios_vsync_off.jpg...这里特别说一下 CALayer：CALayer 内部并没有属性，当调用属性方法时，它内部是通过运行时 resolveInstanceMethod 为对象临时添加一个方法，并把对应属性值保存到内部的一个...目前常见的网络图片库都自带这个功能。 图像的绘制 图像的绘制通常是指用那些以 CG 开头的方法把图像绘制到画布中，然后从画布创建图片并显示这样一个过程。...通常你所能看到的内容，主要也就是纹理（图片）和形状（三角模拟的矢量图形）两类。...CALayer 的 border、圆角、阴影、遮罩（mask），CASharpLayer 的矢量图形显示，通常会触发离屏渲染（offscreen rendering），而离屏渲染通常发生在 GPU 中。
Sketch for mac中文激活是专为设计师而打造的矢量绘图软件，拥有简约的设计，调色板，面板，菜单，窗口，控件和功能强大的矢量绘图和文字工具；包含针对UI设计的操作和交互模式，让你设计图标、移动手机... - 灵活的布尔操作简单的图形组合成复杂的形状 - 画板及切片出口多个图像出一个单一的文件- 自动@ 2X出口的视网膜图形 - 独特的颜色（与RGB和HSB模式）和字体选择器- 美丽的原生文本渲染和文本样式...- PDF，EPS和SVG的进口和出口的支持 - 共享与链接图层样式的自动更新彼此 - 功能强大，易于使用的矢量工具 此外，设计师在以下几个方面将享受以下功能： - 为Web和UI设计，复制CSS...样式到剪贴板 - 切片：将出口作为画布上的图像区域- 960px网格，用更先进的网格选项的支持 - 多页的单个文件里面支持用于图标设计师 - 画板，画板每一个是自己的小帆布 - iOS的图标模板...- 像素网格- 像素效果，如高斯和运动模糊
一、概念 Core Graphics Framework Core Graphics Framework 是一套基于C的API框架，使用了Quartz作为绘图引擎。...该框架可以用于基于路径的绘图、变换、颜色管理、脱屏渲染，模板、渐变、遮蔽、图像数据管理、图像的创建、遮罩以及PDF文档的创建、显示和分析 Graphics Context Graphics Context...CoreGraphics绘制图形A，想要使用UIKit绘制完全不同的图形B，此时就希望保存当前绘图context及已绘制内容。...与UIView 视图即UIView，并不是直接显示在屏幕上，而是在创建视图对象的时候视图对象会自动创建一个层，而视图对象把要显示的东西绘制在层上，待到需要显示时硬件将所有的层拷贝，然后按Z轴的高低合成最终的显示结果...view.layer上面 系统再将view.layer的内容拷贝到屏幕, 于是完成了view的显示
Sketch Mac版以简约的设计是基于无限的规模和层次的绘图空间，拥有调色板，面板，菜单，窗口和控件。虽然使用简单，它提供了功能强大的矢量绘图和文字工具。...- 优化的视网膜和非Retina显示屏- 强大的造型，多重阴影，多个填充，渐变，混合，模糊，噪点多...- 灵活的布尔操作简单的图形组合成复杂的形状- 画板及切片出口多个图像出一个单一的文件- 自动@...- PDF，EPS和SVG的进口和出口的支持- 共享与链接图层样式的自动更新彼此- 功能强大，易于使用的矢量工具2、为Web和UI设计- Web和iOS的设计模板标配- 复制CSS样式到剪贴板（包括梯度...）- 切片：将出口作为画布上的图像区域- 960默认网格，与更先进的网格选项的支持- 创建一个文档内的多个页面- 标准响应网页设计画板用于图标设计师- 画板：每个都是自己的小帆布- iOS的图标模板-...像素网格- 像素效果，如高斯和运动模糊- 舍入到最近的像素边缘
目前常见的网络图片库都自带这个功能。 图像的绘制 图像的绘制通常是指用那些以 CG 开头的方法把图像绘制到画布中，然后从画布创建图片并显示这样一个过程。...通常你所能看到的内容，主要也就是纹理（图片）和形状（三角模拟的矢量图形）两类。...图形的生成 CALayer 的 border、圆角、阴影、遮罩（mask），CASharpLayer 的矢量图形显示，通常会触发离屏渲染（offscreen rendering），而离屏渲染通常发生在...为了避免离屏渲染，你应当尽量避免使用 layer 的 border、corner、shadow、mask 等技术，而尽量在后台线程预先绘制好对应内容。...YYAsyncLayer 是 CALayer 的子类，当它需要显示内容（比如调用了 [layer setNeedDisplay]）时，它会向 delegate，也就是 UIView 请求一个异步绘制的任务
当视频控制器还未读取完成时，即屏幕内容刚显示一半时，GPU 将新的一帧内容提交到帧缓冲区并把两个缓冲区进行交换后，视频控制器就会把新的一帧数据的下半段显示到屏幕上，造成画面撕裂现象，如下图： ?...卡顿监控 1.Instruments 在开发阶段，使用内置的性能工具instruments来检测性能问题是最佳的选择，正常情况下，CPU会周期性的提交要渲染的图像信息给GPU处理，保证视图的更新。...通常你所能看到的内容，主要也就是纹理（图片）和形状（三角模拟的矢量图形）两类。...CALayer 的 border、圆角、阴影、遮罩（mask），CASharpLayer 的矢量图形显示，通常会触发离屏渲染（offscreen rendering），而离屏渲染通常发生在 GPU 中。...延时加载，是指首先加载当前必须的可视内容，在稍后一段时间内或特定事件时，再触发其他内容的加载。这种方式可以很有效的提升界面绘制速度，使体验更加流畅。
CAShapeLayer 实际中，能够用CALayer完成的任务是比较少的，如果使用这个基础图层就能实现绝大部分的功能，咱们就没有必要再开启一个CAShapeLayer了嘛。...1.1 CAShapeLayer的优点 那CAShapeLayer到底有啥子优点嘛！ CAShapeLayer作为继承自CALayer的子类，当然可使用CALayer的所有属性。...也就是说，CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形。而且是矢量图形噢！！所以无论有多大，都不会占用太多的内存。...1.2 基本属性 属性名 作用 path 图像的绘制路径，path不支持隐式动画 fillColor 填充path的颜色，或无填充。默认为不透明黑色。 fillRule 填充path的规则。...斜接长度指的是在两条线交汇处和外交之间的距离。只有lineJoin属性为kCALineJoinMiter时miterLimit才有效。边角的角度越小，斜接长度就会越大。
， * UIView VS CAlayer 后者更轻量，在不需要处理触摸事件的场景可以考虑使用CAlayer。...屏幕上的内容，主要也就是纹理（图片）和形状（三角模拟的矢量图形）两类。一般来说，CALayer的大多数属性都是使用GPU来绘制的。...，在iOS8之后，UILabel使用的是CALayer作为底图层，而在iOS8开始，UILabel的底图层变成了\_UILabelLayer，绘制文本也有所改变。...因此shouldRasterize**适用于渲染耗时、图像内容不变的情况，在列表中由于内容要频繁变化，因此不推荐使用此属性** * **Color Copied Images** 大多数时，Core...但是光栅化原始图像需要时间，而且会消耗额外的内存。光栅化也会带来一定的性能损耗，是否要开启就要根据实际的使用场景了，图层内容频繁变化时不建议使用。
UI渲染的简单过程： CPU，GPU，显示器协同工作，CPU 中计算显示内容，比如视图的创建、布局计算、图片解码、文本绘制等，然后将计算结果提交给GPU，由 GPU 进行变换、合成、渲染。...由于垂直同步的机制，如果在一个 VSync 时间内，CPU 或者 GPU 没有完成内容提交，则那一帧就会被丢弃，等待下一次机会再显示，而这时显示屏会保留之前的内容不变。这就是界面卡顿的原因。...当在操作 UI 时，比如改变了 Frame、更新了 UIView/CALayer 的层次时，或者手动调用了 UIView/CALayer 的 setNeedsLayout/setNeedsDisplay...8 CALayer 的 border、圆角、阴影、遮罩（mask），CASharpLayer 的矢量图形显示，通常会触发离屏渲染（offscreen rendering），而离屏渲染通常发生在 GPU...避免使用圆角、阴影、遮罩等属性。
保持图像为空：这样可以保证内容不会出现跳动。 默认占位符：比如说用户想要查看个人资料显示头像内容，如果请求失败或者没有上传过图片，那么通常会使用默认占位符（这种占位符一般会使用 SVG 资源）。...纯色：从图像中获取颜色，并作为背景颜色。图片在过度是时候回显得比较平滑（pinterest就是使用这种方式）。 模糊的图像：这种方式会获取原图的缩略图并对其进行渲染，等图片加载完成再过度到原图。...基于 SVG 的 placehold SVG 是矢量图像的理想选择，但是大部分情况是需要显示位图，我们需要考虑的是如何将位图转换成矢量图，下面提供几种转换方案。 1....使用矢量图作为 placehold 有一个很好的优点是小，例如上图 10 个图形的矢量图仅仅只占了 1030 个字节，当通过 SVGO 来传输时，代码还能减少到 640 个字节。...SQIP 这是一种折中处理方式，我们可以理解为 Primitive 和高斯模糊的简单叠加，这种方式我可以使用少量的图形块就能达到我们满意的效果。
大家好，又见面了，我是你们的朋友全栈君。 #背景 明明有了高清的图片，为什么导入PPT后图像反而模糊了？导出pdf后图片更是惨不忍睹？今天为了解决这个问题，我又折腾了一会儿。...（如果是matlab或者origin画的数据图，直接复制到ppt转pdf即可。...体积小而且是矢量） #准备 Adobe Acrobat pro PPT PhotoZoom #获得高清图片 一般用别的软件导出图片可以调节格式分辨率，采用矢量图或者分辨率高的位图就可以，然而从网上获取的图片就没办法了...只需要一步，选项->高级->图像大小和质量->不压缩 #导出高质量pdf文件 打印->选择adobe PDF->打印机属性->默认设置编辑->一般 对象级压缩设置为关，优化快速web查看去掉对勾...图像，所有选项全部设置为关。确定后保存。 打印->保存pdf。这样的pdf体积很大。 #效果 以下是对比效果。pdf直接截图。很明显吧？
1.3更新内容： 去掉了ployly渲染，那个渲染交互真的很好。但是有两个缺点一个是不能输出矢量pdf图，另外一个就是太卡了。所以站长舍弃了ployly，自己操刀实现了几个经常用到的交互功能。...ps出现红色的提示不要担心，记得把Select Gene那个勾上。 3.优化输出。图片可以直出矢量pdf，不用担心图像因为页面大小变形，输出的pdf是正常的，这样在手机上也可以使用。...配合AnnoE的功能，可以实现提取LncRNA后做火山图，具体操作看下面： 1.2更新内容： 如果想选某个基因，在2的位置勾选，在1的位置填写准确填写基因SYMBOL（如果不知道准确信息，可以到Geneinfo...中去查询） 3的位置是下载火山图pdf的位置，图生成完点击就好！...当然这个工具还可以实现 1、基因信息查询 之前需要输入准确的基因名字，现在可以实现一丢丢模糊搜索： 不必记住全名，输入几个字母，就能返回结果，可以在下面列表查看结果。
火山图的使用方法： 一、输入的表格要求： 1、格式为csv！！！...1.3更新内容： 去掉了ployly渲染，那个渲染交互真的很好。但是有两个缺点一个是不能输出矢量pdf图，另外一个就是太卡了。所以站长舍弃了ployly，自己操刀实现了几个经常用到的交互功能。...ps出现红色的提示不要担心，记得把Select Gene那个勾上。 3.优化输出。图片可以直出矢量pdf，不用担心图像因为页面大小变形，输出的pdf是正常的，这样在手机上也可以使用。...中去查询） 3的位置是下载火山图pdf的位置，图生成完点击就好！...当然这个工具还可以实现 1、基因信息查询 之前需要输入准确的基因名字，现在可以实现一丢丢模糊搜索： 不必记住全名，输入几个字母，就能返回结果，可以在下面列表查看结果。
对于数据可视化而言，我们在使用软件可视化做图之后，还要把图片进行保存。所以对于图片的格式就需要有一些认识。 就作者而言，目前偏好是将pdf用于高质量保存的文件，同时将png作为进行在线使用的图片格式。...首字母缩写 全称 类型 应用 pdf Portable Document Format 矢量图 普遍使用 eps Encapsulated PostScript 矢量图 普遍用途，已被pdf取代 svg...例如，将矢量图形保存为位图格式后，例如 pdf文件转换为jpeg格式，作为矢量图形的关键特征的分辨率独立性已丢失。相反，将jpeg图像保存为pdf文件并不能神奇地将图像转换为矢量图形。...因此，对于数据可视化，要么将图形储存为pdf，然后在必要时将其转换为png或jpg，或者将其存储为高分辨率png。...如果仅可作为位图使用的图像（例如数码照片），请以不使用有损压缩的格式进行存储，如果无法做到无损压缩，则将其压缩程度尽可能减少。同样，以尽可能高的分辨率存储图像，并在需要时缩小图像。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
