矢量图

说明位图,矢量图,像素,分辨率，PPI,DPI？ 显示全部 关注者 28 被浏览 7,031 关注问题 写回答 ​邀请回答 ​添加评论 ​分享 ​ 2 个回答 默认排序 刘凯 21 人赞同了该回答 位图：位图图像（bitmap）, 亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。只要有足够多的不同色彩的像素，就可以制作出色彩丰富的图象，逼真地表现自然界的景象。缩放和旋转容易失真，同时文件容量较大。bmp，jpg，gif，png。便携式网络图形（Portable Network Graphics，PNG）是一种无损压缩的位图图形格式，截图首选png格式。 矢量图像：由数学向量组成，文件容量较小，在进行放大、缩小或旋转等操作时图象不会失真，缺点是不易制作色彩变化太多的图象。 像素：像素，又称画素，为图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意。像素表示图形尺寸的大小。不同设备显示效果相同。这里的“相同”是指像素数不会变，比如指定UI长度是100px，那不管分辨率是多少UI长度都是100px。也正是因为如此才造成了UI在小分辨率设备上被放大而失真

一、阿里矢量图的网址：http://iconfont.cn/，截止到发稿共有1,094,241个图标。 二、使用： 输入自己想找的图标，搜索，例如我搜索home，出现了许多图标 ,将选好你要用的所有图标加入购物车,() 如图： 在购物车里是你选好的所有图标: 点击下载代码 在你的页面中引入压缩包里的这个css文件 并用浏览器打开压缩包里的这个html文件 然后选择页面中的font-class选项如图: 下面是对应的图面名字 使用方法 如下: 第一步：引入项目下面生成的 fontclass 代码： <link rel="stylesheet" href="./iconfont.css"> 第二步：挑选相应图标并获取类名，应用于页面： <span class="iconfont icon-xxx"></span> " iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。 来源： https://www.cnblogs.com/0826sw/p/11934070.html

SVG 1.SVG简介 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 矢量图与位图 位图:基于颜色的描述,如BMP、PNG、JPG 矢量图:基于数学的描述,如SVG、AI 基本图形和属性 1.基本图形 <rect> <circle> <ellipse> <line> <polyline> <polygon> 2.基本属性 fill、stroke、stroke-width、transform 示例如下: <svg xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" rx="5" ry="5" width="150" height="100" stroke="red" fill="none"> </rect> <circle cx="250" cy="60" r="50" stroke="red" fill="none"> </circle> <ellipse cx="400" cy="60" rx="70" ry="50" stroke="red" fill=

1.引入已经下载好的图标 2.input 里面的value 属性绑定 3.效果 这样才操作 将阿里巴巴矢量图供图插入如input框中了 其实就是将图标绑定在属性value上面 来源： https://www.cnblogs.com/maibao666/p/11897092.html

前言 随着web的发展，网站资源的流量也变得越来越大。据统计，60% 的网站流量均来自网站图片，可见对图片合理优化可以大幅影响网站流量，减小带宽消耗和服务器压力。 有时候你花大力气去配置 webpack 使打包体积减少，不如好好优化几张图片，这篇文章就是让你明白如何选择正确的图片，并且让你明白这么多图片格式，在什么场景下使用什么格式，如果想看答案，那么直接滑到文末看图即可。 基本概念 在进入正题之前，先聊聊一些图片相关的基本概念。 一张照片（位图）不断放大之后，会看到一个个小格子，这些小格子，叫像素。 一个格子（像素），在计算机中，用二进制来表示，使用的二进制位数越多，像素的色彩就越丰富。 举个🌰，如果一个像素用一位二进制数表示，能有多少种颜色呢？ 两种，一个二进制位，要不放 0（表示黑色），要不放 1（表示白色） 下图展示了一个像素二进制的位数最多可以展示多少种颜色。 在对图片有了基本的了解之后，接下来对图片进行分下类，有利于理解各种格式图片的特点。 根据图的类型分类 点阵图(位图) 矢量图 位图(点阵图) 位图，也叫做点阵图，像素图。构成点阵图的最小单位是像素，位图就是由像素阵列的排列来实现其显示效果的， 每个像素有自己的颜色信息 ，在对位图图像进行编辑操作的时候，可操作的对象是每个像素，我们可以改变图像的色相、饱和度、透明度，从而改变图像的显示效果。

EazyDraw for Mac是Mac上简单易用的一款矢量图绘制软件，EazyDraw for Mac将最新的macOS技术与原始Mac绘图程序的创新优雅结合在一起，对于每个人都很简单，对位图和矢量图形格式的全面支持，印刷色预览等，一款非常实用的矢量图绘制软件。本站macdown.com提供EazyDraw for Mac(矢量图绘制软件)下载。 https://www.macdown.com EazyDraw for Mac软件功能 世代EazyDraw和Mac 对于从宽捷色彩屏幕上的Jaguar（运行摩托罗拉32位代码的OS X版本10.2）到运行安全硬化64位应用程序的Mojave（运行安全硬化64位应用程序）的全程旅程，EazyDraw一直是用于在macOS上进行矢量绘制的创新应用程序。 EazyDraw版本9.1.6：Mojave（macOS 10.14）支持的全新外观。全彩色管理支持宽色域显示P3颜色。 EazyDraw是一种用于表达和传播知识的生产力工具。信息，概念和想法很少仅通过语言（文字处理）传达。使用矢量绘图App - EazyDraw，使用集成的符号和图表扩展您的想法的表达。 EazyDraw提供了一个平衡的功能集，其中包括技术绘图，Web和App图形设计，打印发布，徽标，页面文本布局等所需的工具。对于每个人来说都很容易，但是你的项目需要的深度。

项目里需要做一个图片标注工具，就是在一张底图上绘制特定的图形，连线，或者标注长度。如下图所示 核心需求如下： 浏览器PC端使用 绘制的点、线、图形，应该是矢量图，可以移动、缩放和旋转 可以定制需要的标注工具，比如绘制坐标轴，需要跟随鼠标移动 可以加载底图 可以把绘制完成的矢量图+底图一起导出 基础技术没啥可选的，肯定是基于Canvas实现，关键是选一个好用的库，搜索了一下，并没有像三维引擎那样出现“大一统”的局面（Three.js），只有几款不太热门的选项，根据github热度粗选，剩下两个： Fabric.js vs Two.js 一开始因为Two.js和Three.js命名接近，而且界面风格更现代而倾向于它，但调研后发现，Two.js竟然完全不支持加载image，虽说是专注于矢量图，这也有点过分了；而且它明显是为了做动画设计的，所有的example都是动画；它还没有自己的事件体系，借用了Backbone的。 这样看起来，老旧的 Fabric.js 就显得很可爱了，特别是它还直接支持鼠标拖拽、缩放、旋转矢量图对象。 不过引用Fabric的时候，出现了一点问题——我们的项目是基于iView的，模块化开发，一开始也想用npm安装，然后import的方式引用Fabric.js，谁知道引进来以后总是出错；后来发现只要用npm管理，Fabric就认为自己跑在服务器端的Node.js环境中

用过绘图软件的朋友都知道矢量图的优点，矢量图不同于位图，矢量图的各个属性都是相对独立的，比如位置、形状、轮廓、颜色等等。所以矢量图的保存形式不同于位图是将像素点在保存在图中，所以矢量图的优点就是（1）理论上可以无限放大，图像不会模糊;（2）保存后占空间小。 矢量图由于这些特点，所以只能有软件制作，目前没有可能将相机拍的图片转换成矢量图的形式。动漫和游戏的图或者其中的部分图可以由矢量图制成。典型的就是地图的应用。在2017-18年红极一时的吃鸡类游戏就可以很好的应用，以往，这类游戏玩家在其中用高倍镜看近处的建筑会看到模糊的画面，那是因为放大倍数高，原本的位图势必会模糊，如果用矢量图，将规避这一问题。当然，远处用高倍镜为了游戏公平无需清晰的可不用。笔者认为这个设想如果能应用，效果应该不会太差。 来源： https://www.cnblogs.com/xiang123/p/11848059.html

1、在阿里矢量图标库将想要的图标加入购物车，然后在购物车中将图标添加到项目； 2、到我的项目中，将图标下载到本地 3.在vue项目的assets文件夹下新建一个iconfont文件夹（名字自定义），将刚刚下载下来的代码包中的 iconfont.css、 iconfont.eto、 iconfont.svg、 iconfont.ttf、 iconfont.woff 复制到iconfont文件夹下。 4.在main.js中全局引入iconfont.css。 　　 import './assets/iconfont/iconfont.css' 5.之后就可以在项目中正常使用了 　　 <i class="iconfont icon-ren"></i> 来源： https://www.cnblogs.com/wangRong-smile/p/11833707.html

☆图片格式 ㈠位图 ①位图又称为点阵图像，是由像素（图片元素）的单个点组成的。通常分为8位，16位，24位和32位。 ②所谓8位图并不是只有8种颜色，而是2的8次幂（即256）种颜色，8位图指的是用8个bits来表示颜色，对人眼的感觉来说，16位色基本能满足需要了。 ③24位又称为“真色彩”，2的24次幂，大概有1600万种颜色之多，这个数字差不多是人眼可以分辨颜色的极限了。 ④32位色并不是2的32次幂，其实也是2的24次幂，不过它添加了2的8次幂阶颜色的灰度，也就是8位透明度，因此规定它为32位色。 ⑤在制作页面的时候，一般选用24位图像。因为32位图像会带来更大的图像容量，会使浏览器加载页面速度变慢。 ⑥放大原始位图，图像会失真，缩小原始位图，同样会使图像效果失真，这是因为缩小图像，减少的是图像中像素的数量。 ㈡位图格式 ①JPG格式 jpg可以很好地处理大面积色调的图像，如相片，网页中一般的图片 ②PNG格式 PNG支持透明信息。所谓透明，即图像可以浮现在其他页面文件或页面图像之上。可以说PNG是专门为web创造的图像，通常大部分页面设计者在页面中加入logo或者一些点缀的小图像时，都会选用PNG格式。PNG格式图片体积小，而且无损压缩，能保证网页打开速度，所以PNG格式图片是很好地选择。 ③GIF格式 GIF只支持256色以内的图像。所以，GIF格式的图片效果是很差的