矢量图

2.1 图形系统 2.1.1 图形系统的基本功能（5个） 基本功能包括：计算、存储、对话、输入和输出 2.1.2 图形系统的组成 计算机图形系统包括硬件系统和软件系统 硬件系统 由主机和图形输入/输出设备组成 软件系统 由系统软件和应用软件组成 2.2 计算机图形学系统的基本术语 1.光点(Point) 光点是电子枪向荧光屏发射电子束产生的亮点，也称像素光电 2.像素(Pixel) 像素是计算机软件可控的、显示屏幕上的最小可视单位，也称像素点 3.图形分辨率(Resolution) 图形系统具有的实际屏幕图形精度称为图形分辨率（受屏幕分辨率、显示分辨率、存储分辨率三者限制） 4.屏幕显示方式 文本方式(Text Mode)： 显示缓冲器中存放的是字符的ASCII码和字符的显示属性，屏幕上只能显示字符，不能显示图形。 图形方式(Graphics Mode)： 显示缓冲器中存放的是屏幕像素的属性。 5.图形模式 图形方式下具体的图形显示方式称为图形模式 6.颜色调色板(Palette) 图形能够使用的一组颜色称为一个颜色调色板 7.视频缓冲区(Video Buffer) 视频缓冲区也称帧缓冲区或视频随机存储器(VRAM) 2.2.1图形与图像 图形指可以用数学方程式描述的平面或立体透视图。 图像指通过实际拍摄或卫星遥感获得，或印刷、绘制得到的画面。 图形用矢量表示，可存储为矢量文件。

CorelDRAW是国外加拿大Corel公司开发的一款功能强大的专业平面设计软件、矢量设计软件、图形设计软件。其非凡的设计能力广泛地应用于商标设计、标志制作、封面设计、CIS设计、产品包装造型设计、模型绘制、插图描画、时装/服饰设计、印刷制版、排版及分色输出等诸多领域。20多年的历史其被广泛应用的程度足以说明，其用户涵盖图形设计、平面设计、图文设计、广告设计、商业设计和美术设计等多个领域行业。 CorelDRAW 2019简体中文正式版(即CorelDraw Graphics Suite 2019)，版本号21，本版官方自带英语、简体中文、繁体中文日语、葡萄牙语、西班牙语等多国语言。 Warning!解压密码：www.ssdax.com 来源： https://www.cnblogs.com/iorics/p/11531160.html

SVG Scalable Vector Graphics 可缩放的矢量图形 起源 在 2003 年一月，SVG 1.1 被确立为 W3C 标准，在过去很长一段时间，网页注重文字和图片的展示， SVG就被遗忘了，随着网页对图形的要求越来越高，SVG又出现在人们的视野中。 关注点 可以从SVG这个名字就能瞄到我们第一个关注点在哪里，没错，就是可缩放的矢量图形，这个还是得从位图和矢量图说起，可以直白来说，位图缩放容易模糊，而矢量图一般不会，因为矢量图记录了位置信息，每次按照大小重新计算图形，而位图只能对像素粗暴的缩放，就会导致我们常见的图片模糊。 SVG不会模糊？ NONONO,由于是矢量图，是人去编写的，所以矢量图质量决定了其缩放效果，具体因素待确定 其余优点 1. 支持多色图标 2. 可以使用CSS实现动画，不需要再使用gif 4. 本身就是DOM规范的一部分，可以像普通DOM一样修改颜色，交互性非常强 提一下权重 SVG有些属性属于DOM属性比如说fill,也可以作为CSS属性，生效的效果是一样的 <path fill="#fff" />> or <style style="fill:#fff"> 那么问题来了，涉及到样式，就必须有个权重规则， SVG能够作为CSS属性，写到DOM作为属性上的时候，权重仅比继承权重大,理解这点很重要 修改SVG颜色的前提

一、首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中 二、阿里云图标的四种方式（推荐第三种方式引入，如果不考虑网络问题可以用在线引入的方式） 进入项目以后会看到阿里云可以选择三种方式进行导入图标，选中图标后点击下载至本地。 下载到本地，解压以后的文件夹列表如下： 选中iconfont.js文件 在项目中创建如下目录及文件 iconfont.js就是上上面目录中复制的文件 index.js内容如下 /** * 字体图标, 统一使用SVG Sprite矢量图标(http://www.iconfont.cn/） * * 使用: * 1. 在阿里矢量图标站创建一个项目, 并添加图标(这一步非必须, 创建方便项目图标管理) * 2-1. 添加icon, 选中新增的icon图标, 复制代码 -> 下载 -> SVG下载 -> 粘贴代码(重命名) * 2-2. 添加icons, 下载图标库对应[iconfont.js]文件, 替换项目[./iconfont.js]文件 * 3. 组件模版中使用 [<icon-svg name="canyin"></icon-svg>] * * 注意: * 1. 通过2-2 添加icons, getNameList方法无法返回对应数据 */ import Vue from 'vue' import IconSvg from '@/components

这段时间做了一些利用地理信息进行定位导航的系列工作，其中很重要的一部分是如何获取到地图数据，比如道路的矢量图、某一区域的栅格图，我用到的主要工具是QGIS。QGIS是一个跨平台的免费应用，其中集成了对矢量图、栅格图处理的很多功能，同时也集成了很多开放地图数据网站的接口，比如OpenStreetMap等，因此，在获取数据，并处理成我们需要的格式方面非常便利。本篇博文主要介绍如何使用QGIS下载数据，并处理成特定的格式。 一、 指定区域指定地物矢量图获取 我们经常会遇到这样一种需求：获取某一区域的指定地物的地图，比如获取某一区域的道路图、河流图等。这一节的内容能够解决这一需求。通常我们从开放的地图平台OpenStreetMap中下载某一区域的矢量地图，而后通过后续的处理，来获取我们需要的地图信息。 1、数据下载 1) 在vector菜单栏中选择OpenStreetMap ->Download Data，即可打开数据的下载框： 2）而后设定需要下载数据的区域，这里提供了三种区域设置方式： a) From map canvas：当前窗口显示的区域 b) From layer：某一图层所代表的区域 c) Manual：人为设定区域 通常当我们已知我们需要下载的数据的区域，我们采用第三种方式。 3）下载数据：设置好下载区域，并输入保存文件名后，点击确定，即开始下载数据。这里需要注意的一点是

寻找一些特别的，为众所不知的矢量图网站不是一件容易的事情，又要高质量，又要免费使用，尽管鱼和熊掌不能兼得，但是谁叫我们碰到了互联网时代呢，谁叫我们知道一句台词：一切皆有可能呢！这些免费的矢量图网站是我在互联网上搜索到的，经过权衡和对比，选择了9个比较不错的拿出来为大家分享。里面有的是博客网站，所以如果你对矢量图片有大量的研究，不如订阅他们，这样获取的速度较快，而且方便. 矢量图：计算机中显示的图形一般可以分为两大类——矢量图和位图。矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。例如一幅花的矢量图形实际上是由线段形成外框轮廓，由外框的颜色以及外框所封闭的颜色决定花显示出的颜色。由于矢量图形可通过公式计算获得，所以矢量图形文件体积一般较小。矢量图形最大的优点是无论放大、缩小或旋转等不会失真；最大的缺点是难以表现色彩层次丰富的逼真图像效果。Adobe公司的Illustrator、Corel公司的CorelDRAW是众多矢量图形设计软件中的佼佼者。大名鼎鼎的Flash MX制作的动画也是矢量图形动画。 1. Vecteezy Vecteezy拥有非常多的高质量矢量图片，而且可视化选择，免费下载，毫无限制。 2. FreeVectors.net FreeVectors.net 有一个庞大的矢量图片下载基地，可供免费下载

一、SVG概念 1.什么是SVG? SVG英文全称为Scalable Vector Graphics，意思为可缩放的矢量图 2.位图和矢量图 在计算机中有两种图形, 一种是位图, 一种是矢量图 2.1 位图: 传统的 jpg / png / gif图都是位图 位图是一个个很小的颜色小方块组合在一起的图片。一个小方块代表1px 2.2 位图的优点和缺点: 优点: 色彩丰富逼真 缺点: 放大后会失真, 体积大 2.3 矢量图 矢量图是用XML格式（HTML也是XML格式，是特殊的xml）定义, 通过各种「路径」和「填充颜色」来描述渲染的的图片 2.4 矢量图优点和缺点: 优点: 放大后不会失真（因为小方格不是固定死的）, 体积小 缺点: 不易制作色彩变化太多的图象 3.svg的宽高： 默认值：同canvas一样，svg也有默认的宽高、；并且默认宽高同canvas一样也是：300 * 150 修改宽高：同canvas不一样。canvas只能在行内修改。而svg使用css和行内属性都可以修改宽高。 二、SVG使用方式 1.SVG常见的四种使用方式 1.1、内嵌到HTML中（直接在HTML的body中绘制） <svg width="500" height="500"> <circle cx="100" cy="100" r="50" fill="transparent" stroke="

㈠表格 ⑴表格的基本结构 ①表格的基本标签有：table标签（表格），tr标签（行），td标签（单元格）。<tr>标签和<td>标签都要在表格的开始标签<table>和结束标签</table>之间才有效。 ②tr即"table row"(表格行)，td即"table data cell"(表格单元格)。 ③<table>和</table>标记着表格的开始和结束；<tr>和</tr>标记着行的开始和结束；<td>和</td>标记着单元格的开始和结束。在表格中包含几组<tr></tr>就表示该表格为几行。 ④用代码看一下它的语法： 1 <html> 2 3 <body> 4 5 <p>每个表格由 table 标签开始。</p> 6 <p>每个表格行由 tr 标签开始。</p> 7 <p>每个表格数据由 td 标签开始。</p> 8 9 <h4>一列：</h4> 10 <table > 11 <tr> 12 <td>100</td> 13 </tr> 14 </table> 15 16 <h4>一行三列：</h4> 17 <table > 18 <tr> 19 <td>100</td> 20 <td>200</td> 21 <td>300</td> 22 </tr> 23 </table> 24 25 <h4>两行三列：</h4> 26 <table> 27 <tr> 28 <td

iconfont（图标字体） 可以缩放的矢量图标。你可以使用CSS对它们进行修改:大小，颜色，阴影等。体积特别的小。可能几百个图标才几十KB。 优点： 高清保真，因为是SVG图形 灵活性，可以设置大小，颜色等 兼容性好，支持IE6 开源的字体库很多 减少HTTP请求 缺点： 维护自己的字体库麻烦一些 图表字体只能被渲染为单色的 使用中可能会遇到的坑： 1、webkit浏览器会在加缘加粗1个像素 这个问题在间距比较小的时候就会比较明显。解决文案是加一个font-smoothing的属性：-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; 2、注意缓存：加版本号 iconfont 的 symbol引用(多色图标) 优缺点： 支持多色图标了，不再受单色限制 通过一些技巧，支持像字体那样，通过font-size,color来调整样式 兼容性较差，支持 ie9+,及现代浏览器 浏览器渲染svg的性能一般，还不如png 使用办法： 第一步：拷贝项目下面生成的symbol代码：在本地项目中引入iconfont.js(在线的可能读取不出来) //at.alicdn.com/t/font_8d5l8fzk5b87iudi.js 第二步：加入通用css代码（引入一次就行）： <style type="text

iPhone 6 / 6 Plus 设计·适配方案 关于iPhone6/6+适配问题一直有争议，今天小编专门为大家整理了相关的有效方案，希望对大伙儿有帮助！ 移动app开发中多种设备尺寸适配问题，过去只属于Android阵营的头疼事儿，只是很多设计师选择性地忽视android适配问题，只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6，iOS平台尺寸适配问题终于还是来了，移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。 加上Android生态中纷繁复杂的各种奇葩尺寸，现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题？设计和开发之间采用什么协作模式？一个基本思路是： 1、选择一种尺寸作为设计和开发基准； 2、定义一套适配规则，自动适配剩下两种尺寸； 3、特殊适配效果给出设计效果。 手机淘宝的iPhone 6/iPhone 6 Plus适配版本即将提交App store审核。先晒一下我们采用的协作模式，再慢慢说明原委。 第一步，视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。 第二步