ionic自定义字体图标

合集下载

让我来教你使用css中的字体图标的方法

让我来教你使⽤css中的字体图标的⽅法⾸先什么是字体图标呢，那就是表⾯上是图标，其实它是⽂字，我们可以就像设置⽂字⼀样去设置字体图标，⼀般可以使⽤两种⽅式去设置字体图标，⼀种是引⼊css⽂件，然后设置特殊的class就可以了；另外⼀种是通过伪元素中的content去设置，下⾯跟我⼀起来看看如何设置吧！1：引⼊css⽂件，然后设置特殊的class去使⽤字体图标我使⽤iconfont官⽹来进⾏实验，⾸先使⽤百度搜索iconfont，进⼊官⽹之后登录，登录之后先去新建⼀个项⽬，⾸先打开我的项⽬：点击新建项⽬图标：然后输⼊项⽬名称，点击新建：之后就可以去上⽅搜索框搜索你想要的图标了，例如输⼊“天猫”，点击回车，然后把⿏标放在你想要的图标上⾯，点击购物车图标添加⼊库：之后在右上⾓打开购物车图标，点击添加⾄项⽬，选择你的项⽬名称点击确定就可以了，我的项⽬名称是“HelloWorld”：之后就会进⼊我的项⽬⾥⾯，该项⽬正是你上⾯添加图标的那个项⽬，如果你想在本地使⽤的话，点击下载⾄本地：下载完成之后解压，把解压⽂件中最⾥⾯的所有⽂件（以css、eot、woff等结尾的⽂件）复制到我项⽬下⽅的某⽂件夹下，该⽂件夹可以随意命名：之后在html⽂件⾥⾯引⼊⾥⾯的iconfont.css⽂件：使⽤的⽅法是在我想要放置图标的元素的class中⾸先加⼊iconfont，之后在加⼊该图标的名称，名称如下：如果要使⽤该名称，只需要把移动到该图标上⾯，在弹出框中点击复制代码就可以了：之后就可以直接去使⽤了：其中iconfont是必须的，后⾯的是我们上⾯复制代码后的名称如果你不想下载到本地的话，你也可以使⽤在线css⽂件来做，⾸先我们找到iconfont官⽹中上述项⽬那个界⾯，⾸先点击“Font class”，然后点击“暂⽆代码，点此⽣成”，之后我们就可以看到⼀个链接：那我们就不需要下载⽂件了，也不需要导⼊相关⽂件了，只需要在使⽤图标的html代码中引⼊css⽂件：之后就可以直接去使⽤了，class依然⾥⾯需要包含 iconfont，之后需要包含图标的名称作为class，图标名称还是通过“复制代码”的⽅式获得：之后就这样写就可以了:2、通过伪元素中的content去设置通过上⾯的步骤可以把图标添加到项⽬中，由于上⾯的那种引⼊⽅式已经叙述过了，这⾥在叙述，假设我们现在已经把图标引⼊到项⽬中了，我们依然可以先下载到把项⽬下载到本地，在上⼀个⽅法中已经说了，这个也不再叙述，之后把⾥⾯以eot、woff2、woff、ttf、svg结尾的⽂件复制⼀下，然后把这些⽂件赋值在我们的项⽬中的某个⽂件⾥⾯：之后在css⽂件中引⼊这些⽂件，⽅法如下：@font-face {font-family: 'iconfont';src: url('../fonts/iconfont.eot');src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('../fonts/iconfont.woff2') format('woff2'),url('../fonts/iconfont.woff') format('woff'), /* Modern Browsers */url('../fonts/iconfont.ttf') format('truetype'),/* Safari, Android, iOS */url('../fonts/iconfont.svg#iconfont') format('svg');/* Legacy iOS */}以上的font-family是我们⾃⼰定义的，需要在url中引⼊这些⽂件，url()中的单引号⾥⾯是这些⽂件相对于这些css⽂件的url地址，⾥⾯的#iefix、#iconfont不能少，其中#iefix是固定不变的，⽽#iconfont中的名称是font-family中的名称，他们需要加在相应⽂件名称的后⾯，format()中的内容不能变，你可以先把上述的内容复制到你⾃⼰的⾥⾯，只根据后缀名去更改相应的url地址就可以了，别乱改不然会出错，由于我们会多次使⽤⾥⾯的图标，所以我们需要把某些属性放在公共的class中，如下所⽰：[class^="icon-"],[class*="icon-"] {font-family: 'iconfont';font-style: normal;}这代表只要class中包含有icon-就会有font-family和font-style属性，该font-family的名称就是@font-face中的font-family中的名称，如果我们需要使⽤该class属性的话，那就htm⽂件中的元素的class⾥⾯加⼊以icon-开始的名称，如下所⽰：之后我们就可以设置相应的图标了，⼀般是利⽤伪元素来设置，在css中可以这样设置：⾄于⾥⾯的content内容，前⾯的\是固定的，后⾯的e799是这⾥来的，我们回到iconfont官⽹，找到我们项⽬中的图标，在上⾯停留之后，点击编辑图标：复制“Unicode(16进制)”下⾯的内容：这就完成了如果你不想下载到本地的话，你也可以使⽤在线Unicode编码，⾸先我们找到iconfont官⽹中上述项⽬那个界⾯，点击“Unicode”，然后点击“暂⽆代码，点此⽣成”，之后我们就可以看到⼀个链接：复制链接内容，这样我们就不需要复制⽂件到项⽬中了，只需要把上述链接内容放置到css⽂件⾥⾯：@font-face {font-family: 'iconfont'; /* project id 2074612 */src: url('///t/font_2074612_ndaz958615n.eot');src: url('///t/font_2074612_ndaz958615n.eot?#iefix') format('embedded-opentype'),url('///t/font_2074612_ndaz958615n.woff2') format('woff2'),url('///t/font_2074612_ndaz958615n.woff') format('woff'),url('///t/font_2074612_ndaz958615n.ttf') format('truetype'),url('///t/font_2074612_ndaz958615n.svg#iconfont') format('svg');}之后就在css中写：[class^="icon-"],[class*="icon-"] {font-family: 'iconfont';font-style: normal;}之后还要写上，content中的内容到底是什么在上⾯有详细说明，不在赘述：.icon-tianmao::before {content: '\e799';}然后html⽂件中的它也不能少，这些都在第⼆种⽅法中有详细解释，这⾥就不在赘述了：<i class="icon-tianmao"></i>到此这篇关于让我来教你使⽤css中的字体图标的⽅法的⽂章就介绍到这了,更多相关css字体图标内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！。

Iconfont字体图标和渐变色图标的应用

2019 年第 1 期（总第 132 期）
济南职业学院学报
Journal of Jinan Vocational College
Feb.2019 No.1（Serial No.132）
Iconfont 字体图标和渐变色图标的应用
王婷婷
（济南职业学院，山东济南 250103）
摘要：随着信息技术的不断发展，网页的表现方式也在不断地发生变革。本文以网页中图标的显示方
这势必会加大 HTTP 的请求次数，增加服务器的响 Word 文档中的符号一样，简单地说，就是一种特殊
应时间，这是现在网站性能优化需要解决的问题之的字体，通过设置这种字体，可以在网页上显示一
一。并且如果在移动端使用，还要考虑 2 倍屏、3 个个图片。
倍屏问题。图片都是位图格式，放大时会失真，在
字体图标的应用完美地解决了图片方式和雪碧
一、传统网页图标的显示方式
碧图中相邻的图片会被显示在网页上。如果雪碧图
网页图标最初的显示方式是图片方式，该方式足够复杂，会大大增加 CSS 代码的编写和维护难度。
将一个图标制作成一张小图片，再将若干小图片保
二、字体图标技术及其优点
存在站点文件夹中，通过 <img> 标签或 background
字体图标是一种比 CSS 雪碧图技术更灵活的
式为例，探讨在移动互联网时代背景下，基于页面轻量加载、快速响应、变化灵活等新需求而产生的呈现
方式的重大技术变革，详细分析 iconfont 字体图标和渐变色图标的应用方法，并对未来技术发展的新趋势
进行展望。
关键词：网页；iconfont；字体图标；文字渐变
中图分类号：TP317
文献标志码：B 文章编号：1673-4270(2019)01-0122-03

在线制作自定义字体

在线制作⾃定义字体本⽂介绍如何使⽤现有的免费⼯具制作⾃定义的字体。

我们将会⽤到下⾯⼏个免费的在线⼯具。

IconMoon是⼀个优秀的免费创建⾃定⽹页图标字体的⼯具。

提供⼀个在线的字体制作APP，也提供离线版的Chrome插件，同时还提供免费开源的图标供⼤家选⽤。

⽀持上传SVG格式的图标或者单个字符。

EverythingFonts提供了丰富的字体转换⼯具，可以把ttf，otf，wotf等字体转换为SVG格式。

使⽤上⾯两个⼯具我们就能够把⾃⼰喜欢的开源字符“搬”到我们的⾃定义字体中去。

第⼀步：使⽤字体转换⼯具把TTF转成SVG格式。

有⼀些开源的字体已经提供了SVG格式（例如：fontawesome-webfont.svg）可以下后⾯的步骤中直接上传，就不需要字体转换这⼀步了。

当我们找不到SVG格式的字体的时候就⽐较适合⽤到这个⼯具。

EverythingFonts 的字体转换器使⽤⽐较简单，a) 打开⽹页，确认没有版权问题，勾选“The EULAs of the font allow this conversion: ”b) 后点蓝⾊的“Pickup Font File”按钮从本地上传TTF字体⽂件。

c) 然后点绿⾊的“Convert”按钮就可以下载转换后的SVG⽂件了。

转换后的SVG⽂件是包含字符编码的，在后⾯我们导⼊之后别的字体的A也就会是我们⾃定义字体的A。

第⼆步：开始制作我们⾃⼰的字体打开之后免费的iconmoon图标已经显⽰在你⾯前了，可以直接选⽤也可以点击最后⾯的“Add Icons From Library…”链接去图标库⾥⾯去选。

【2】新建⼀个空的图标集，这样便于我们分类选⽤。

【4】使⽤图标集旁边的“import to set”菜单项，导⼊我们之前制作（或者开源）的.svg⽂件。

也可以在这⾥上传你⾃⼰⾃作的SVG单个字符。

【5】编辑字符如果是从别的字体导⼊过来的，有时候会发现实际排版会出现字符宽度不⼀的问题，这样的话我们就需要通过iconmoon的编辑功能进⾏修改。

NGUI自定义图集与自定义字体

自定义图集第一步：导入NGUI外部包。

这个大家都应该会吧。

第二步：准备一些图片资源，这里我借用一下2DToolKit的一些图片，并将其导入到Unity3D工程中第三步：创建图集，并为图集起名为MyAtlas，随即选图集中所需要的图片资源，点击Create。

如图：这时就会在Font&Atlas目录下生成一个Prefab文件一个Material和一个贴图此时我们自定义图集就创建完毕了。

下面我们开始创建自定义字体。

自定义字体集第四步：这里用到的是BM font工具，运行，界面如图：第五步：设置字体样式和大小，这里我用了我比较喜欢的萝莉体，并讲字体大小设置成32，字符编码选择<Unitcode>第六步：由于字量太大，我只需要少量的字，那么我需要对其进行筛选，如果你需要的多，例如聊天功能，那么就跳过这步吧。

创建一个文本文件，讲你需要的文字写在里面。

并保存为UTF-8编码筛选文字打开你刚刚建立的文本文件，然后选择第七步：导出设置第八步：导出选择保存路径，和文件名，这里我为其起名为：myFont。

随后找到myFont.fnt文件，将其扩展名改为.txt 然后讲txt和png文件导入到Unity3D的项目中第九步：自定义字体集其中Font Data中拖进你刚刚建立的txt文件，Texture拖进刚刚建立的png文件，Font Name自己随便起个名字，这里我起名叫MyFont，Atlas拖进之前图集Prefab文件，点击“Create the Font”此时项目中，就会生成你刚刚建立的字体MyFont测试：创建一个Button试试看吧，下面这个是我建立后的效果。

iconpark font class用法

iconpark font class用法Iconpark是一个优秀的图标库，拥有众多精美的免费图标可供使用；同时也提供iconpark font class用法，方便用户快捷使用图标。

iconpark font class是利用iconpark提供的字体图标，通过在html的元素上添加类名，即可轻松使用对应的图标，以下依次介绍iconpark font class的使用步骤：1.打开iconpark官网，搜索需要的图标，如搜索“搜索”图标，找到对应的图标并点击进入；2.在弹出的页面中选择iconpark font class，并复制所需图标的类名，如“iprk-search”；3.在需要使用该图标的html元素中添加类名，如“<i class="iprk-search"></i>”；4.刷新页面查看效果，即可成功使用iconpark font class所提供的图标。

除此之外，iconpark font class也支持多参数的使用，如改变图标大小、颜色等操作，具体方法如下：1.改变图标大小，可通过在类名后加上“-lg”、“-2x”、“-3x”等参数，表示图标的放大倍数；2.改变图标颜色，可通过设置css属性“color”，对图标进行颜色的设定；3.同时改变图标大小和颜色，配合上述两种方法即可。

需要注意的是，iconpark font class使用前需先引入iconpark的字体文件，可通过以下步骤操作：1.进入iconpark官网；2.在首页右侧找到“自定义标签页”，点击进入；3.选择所需要的图标，点击“下载”；4.下载完成后，解压缩文件，将“iconpark.ttf”字体文件拷贝到代码中；5.在css中添加字体文件路径：“@font-face {font-family:"iconpark"; src:url('iconpark.ttf')format('truetype');}"。

利用WebClip实现自定义应用名字和图标

利⽤WebClip实现⾃定义应⽤名字和图标1. 准备iPhone升级⾄iOS14以上 (不然可能会出现打开应⽤中间还是有⼀段空⽩页⾯过渡)参考博客了解webclip的基本信息下载Mac App Apple configurator22. 描述⽂件解析(直接上代码了)<dict><key>PayloadContent</key><array><dict><key>FullScreen</key><true/><key>IsRemovable</key><false/><key>Icon</key><data>base64编码(实际是需要填这个字段的太长了这⾥就略了)</data><key>Label</key><string>应⽤名</string><key>PayloadDescription</key><string>这个是webClip ⽤于替换应⽤启动更换图标之类的或者⽹页书签的⼀个桌⾯快捷打开的⽅式</string><key>PayloadDisplayName</key><string>WebClip内部名字</string><key>PayloadIdentifier</key><string>com.example.appclip.apple.webClip.managed.xxxooo</string><key>PayloadType</key><string>com.apple.webClip.managed</string><key>PayloadUUID</key><string>25F701C5-1305-42D4-B6C4-0FB453940C05</string><key>PayloadVersion</key><real>1</real><key>Precomposed</key><true/><key>URL</key><string>appcliplaunch://</string><key>TargetApplicationBundleIdentifier</key><string>com.sanche.AppClips</string></dict></array><key>PayloadDisplayName</key><string>WebClip描述⽂件的名字</string><key>PayloadIdentifier</key><string>com.example.appclip</string><key>PayloadRemovalDisallowed</key><true/><key>PayloadType</key><string>Configuration</string><key>PayloadUUID</key><string>95EF972A-9463-4037-83B8-7B23602F5C5D</string><key>PayloadVersion</key><integer>1</integer></dict></plist>3. 如何使⽤使⽤Apple configurator2配置好描述⽂件,然后再利⽤AirDrop传送到⼿机安装把描述⽂件托管到⽂件服务器上或者互联⽹⽹盘然后使⽤⼿机⾃带的Safari浏览器下载打开安装即可App Store下载第三⽅换图标App也可快速实现功能~ (良莠不齐,有些是要跳空⽩页再跳的,有些是跳捷径再跳的,有些是webclip处理好的~ ⽐如: 趣图标和捷径集以及捷径盒⾥的⼀些捷径)4. ⼤致原理获取bundleID,已知或者从调⽤App Store搜索api获取 ,替换TargetApplicationBundleIdentifier字段获取图标图⽚⽣成base64编码,替换Icon字段⽣成UUID等唯⼀标识,替换相关UUID标识替换应⽤名字段把各个需要替换的字段更新⽣成新的描述⽂件进⾏安装即可其实可以⼀个描述⽂件包含多个书签或者应⽤,因为内部PayloadContent那⼀层是⼀个array,我发现捷径集好像就是这样实现的⾄于签不签名好像并不影响使⽤5. 尝试⼀下这个微信替⾝(⽤⼿机Safari打开)iOS代码实现可以如下这样打开Safari加载远程配置⽂件即可:let downStr = "https:///gh/WangGuibin/MyFilesRepo/files/weixin.mobileconfig"let realURL = URL(string: downStr)UIApplication.shared.openURL(realURL!)。

CSS3自定义字体、字体图标

CSS3⾃定义字体、字体图标⾃定义字体通常情况下，我们⼀般在设置字体的时候设置的是操作系统上的字体。

如果⽤户的操作系统中没有该字体就会影响整个前端的⼀个⽤户体验。

在CSS3 中，新增了⾃定义字体的内容，可以让我们⾃⼰定义⼀个字体，然后放到服务器上，这样尽管⽤户的操作系统中没有该字体，也会从服务器下载到指定的字体，不会影响⽤户体验。

⽂件结构如下<style>/* 使⽤ @font-face 来指定⼀个⾃定义的字体 */@font-face {font-family: "Custom font"; /* 起⼀个名字 */src: url("fonts/Courier New.ttf"); /* 指定⼀下字体的位置 */}p {font-family: "Custom font"; /* 为 p 元素设置这个⾃定义字体 */font-size: 20px; /* 设置字体⼤⼩ */}</style><body><p>Hello, this text font is a custom font...</p></body>运⾏结果字体图标使⽤字体图标可以在⽹页加载的时候被快速渲染出来，减少了图⽚的请求次数，减少⽹络负担。

字体图标的优缺点优点1. 轻量性：⼀个图标字体⽐⼀系列的图像（特别是在Retina屏中使⽤双倍图像）要⼩。

⼀旦图标字体加载了，图标就会马上渲染出来，不需要下载⼀个图像。

可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。

2. 灵活性：图标字体可以⽤过font-size属性设置其任何⼤⼩，还可以加各种⽂字效果，包括颜⾊、Hover状态、透明度、阴影和翻转等效果。

可以在任何背景下显⽰。

使⽤位图的话，必须得为每个不同⼤⼩和不同效果的图像输出⼀个不同⽂件。

3. 兼容性：⽹页字体⽀持所有现代浏览器，包括IE低版本。

Ionic5手写签名SignaturePad

Ionic5⼿写签名SignaturePad 测试程序下载：初始化项⽬1. ⾸先新建⼀个Ionic5的项⽬：ionic start test-1 blank2. 安装对应的npm依赖：npm install angular2-signaturepad --save3. 依赖安装完成后在app.module.ts中注册该模块：// 模块路径import { SignaturePadModule } from 'angular2-signaturepad';@NgModule({declarations: [AppComponent],entryComponents: [],// 在imports中进⾏注册imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, SignaturePadModule], providers: [StatusBar,SplashScreen,{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],bootstrap: [AppComponent]})export class AppModule { }创建签名页1. 签名需要屏幕上有⾜够的空间，我们新建⼀个Page页⾯专门⽤于签名：ionic g page sign2. 然后编辑sign.page.html⽂件，针对这个页⾯布局做⼀些修改（⼩弟UI功底贼差，这⾥可以⾃⾏发挥）<ion-content><div #div class="rule"></div><signature-pad *ngIf="isShowPad" [options]="options" class="sign"></signature-pad><div class="div-btn"><ion-button (click)="clear()" class="btn">重绘</ion-button><ion-button (click)="back()" class="btn">返回</ion-button><ion-button (click)="ok()" class="btn">确认</ion-button></div></ion-content>3. 页⾯的CSS样式：.rule { // 起到格尺的作⽤// 宽⾼撑满width: 100%;height: 100%;// 透明opacity: 0;// 脱离⽂档流position: absolute;top: 0;left: 0;// 设置⿏标穿透pointer-events: none;// 防⽌拖拽报错touch-action: none;}.sign { // 画布添加下边框起到分割线作⽤border-bottom: 1px solid #eaeaea;}.div-btn{ // 底部三个操作按钮居中显⽰text-align: center;}.btn { // 设置每个按钮的⼤⼩、间隔width: 85px;height: 40px;margin: 30px 10px;}4. 开始写JS代码（代码都写了注释，就不再解释了）：import { SignaturePad } from 'angular2-signaturepad';@Component({selector: 'app-sign',templateUrl: './sign.page.html',styleUrls: ['./sign.page.scss'],})export class SignPage {@ViewChild("div")private div: any; // 尺⼦DIV对象@ViewChild(SignaturePad)private pad: SignaturePad; // 画布private options: any; // 宽⾼参数private isShowPad: boolean; // 是否显⽰private otherPage = {that: null, callBack: null}; // 其他页⾯传来的参数(回调)constructor(private navCtrl: NavController, private navParam: ActivatedRoute) { // 设置初始值this.options = { canvasWidth: 200, canvasHeight: 200 };this.isShowPad = false;// 接收传参this.otherPage.that = navParam.snapshot.queryParams.that;this.otherPage.callBack = navParam.snapshot.queryParams.callBack;}// 页⾯加载完成在调⽤初始化⽅法ionViewWillEnter() {this.canvasResize();}// 设置画布⼤⼩canvasResize() {// 获取当前屏幕宽⾼，留出100⾼度(下边框有1px)显⽰操作按钮，let dom = this.div.nativeElement;this.options.canvasWidth = dom.offsetWidth;this.options.canvasHeight = dom.offsetHeight - 99;// 等待属性设置完成之后再显⽰画布this.isShowPad = true;}// 清空画布内容clear() {this.pad.clear();}// 确认按钮ok() {// 点击确认后将图⽚转换为Base64传给回调、然后关闭该页⾯this.otherPage.callBack(this.otherPage.that, this.pad.toDataURL());this.navCtrl.back();}// 返回按钮back() {this.navCtrl.back();}}⾸页的调⽤测试1. 签名页⾯已经绘制好了，接下来在Home组件中进⾏调⽤，编辑home.page.html：<ion-header [translucent]="true"><ion-toolbar><ion-title>请输⼊签名</ion-title></ion-toolbar></ion-header><ion-content [fullscreen]="true"><div style="text-align: center;"><ion-button (click)="openPage()">点击开始签名</ion-button><br /><img [src]="base64" style="border: 1px solid rgb(196, 196, 196); width: 80%;"> </div></ion-content>2. ⾸页这⾥就不修改样式了，能⽤就⾏，接下来是JS代码：export class HomePage {private base64: string = "";constructor(private navCtrl: NavController) {}// 打开画布页⾯openPage() {this.navCtrl.navigateForward("sign", {queryParams: {// 传⼊当前组件的this指向和回调that: this,callBack: this.setBase64}});}// 获取base64图像然后显⽰在页⾯上setBase64(that, base64) {that.base64 = base64;}}这样最简单的⼿写签名程序就完成了，运⾏查看效果：Base图⽚旋转从测试效果上来看，我们已经实现了⽬标功能，但是客户签字时肯定是横着签的，然后回显到Home页之后显⽰也会出现问题，如果把画布修改为宽⼤于⾼，画布是横过来了，但是局限于⼿机屏幕⼤⼩根本没办法签名，这⾥我在⽹上找了⼀个Base64的图像旋转代码可以使⽤：1. 创建Ionic服务：ionic g service service/util2. 在服务中添加Base64图⽚旋转代码（代码来源：export class UtilService {constructor() { }rotateBase64Img(src, edg, callback) {var canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");var imgW;//图⽚宽度var imgH;//图⽚⾼度var size;//canvas初始⼤⼩if (edg % 90 != 0) {console.error("旋转⾓度必须是90的倍数!");throw '旋转⾓度必须是90的倍数!';}(edg < 0) && (edg = (edg % 360) + 360)const quadrant = (edg / 90) % 4; //旋转象限const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0}; //裁剪坐标var image = new Image();image.crossOrigin = "anonymous"image.src = src;image.onload = function () {imgW = image.width;imgH = image.height;size = imgW > imgH ? imgW : imgH;canvas.width = size * 2;canvas.height = size * 2;switch (quadrant) {case 0:cutCoor.sx = size;cutCoor.sy = size;cutCoor.ex = size + imgW;cutCoor.ey = size + imgH;break;case 1:cutCoor.sx = size - imgH;cutCoor.sy = size;cutCoor.ex = size;cutCoor.ey = size + imgW;break;case 2:cutCoor.sx = size - imgW;cutCoor.sy = size - imgH;cutCoor.ex = size;cutCoor.ey = size;break;case 3:cutCoor.sx = size;cutCoor.sy = size - imgW;cutCoor.ex = size + imgH;cutCoor.ey = size + imgW;break;}ctx.translate(size, size);ctx.rotate(edg * Math.PI / 180);ctx.drawImage(image, 0, 0);var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey); if (quadrant % 2 == 0) {canvas.width = imgW;canvas.height = imgH;} else {canvas.width = imgH;canvas.height = imgW;}ctx.putImageData(imgData, 0, 0);callback(canvas.toDataURL())};}}3. 然后在Home组件中引⼊这个服务，在显⽰图⽚的回调中将Base进⾏旋转：export class HomePage {// 这⾥引⼊刚刚写好的⼯具类服务constructor(private navCtrl: NavController, private util: UtilService) {}// ....省略代码// 获取base64图像然后旋转270度后显⽰在页⾯上setBase64(that, base64) {// 第⼀个参数：Base64字符串// 第⼆个参数：旋转⾓度// 第三个参数：回调，接收返回的参数就是旋转后的Base64图⽚字符串that.util.rotateBase64Img(base64, 270, res=>that.base64 = res);}}这样图⽚旋转也已经处理好了，再来测试⼀下：。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

ionic自定义图标
概述
Ionic 框架中内置了很多图标，我们只需要引用ionic icons 中的样式即可
Ionic tabs 示例工程中的tab 图标
<ion-tab title="Chats"
// ion-ios7-chatboxes-outline on-ios7-chatboxes 指的就是图标样式icon-off="ion-ios7-chatboxes-outline"
icon-on="ion-ios7-chatboxes" href="#/tab/chats"> <ion-nav-view name="tab-chats"></ion-nav-view> </ion-tab>
但是有时我们需要自己的图标，因此我们需要定义自己的图标比如
原理
Ionic 中内置的所有图标，都是通过字体文件以css 样式的方式引入
@font-face {
font-family: "Ionicons";
src: url("../fonts/ionicons.eot?v=1.5.2");
src: url("../fonts/ionicons.eot?v=1.5.2#iefix") format("embedded-opentype"), url("../fonts/ionicons.ttf?v=1.5.2") format("truetype"),
url("../fonts/ionicons.woff?v=1.5.2") format("woff"),
url("../fonts/ionicons.svg?v=1.5.2#Ionicons") format("svg");
font-weight: normal;
font-style: normal; }
修改起来太麻烦
因此我们想要自己的图标，可以参照这种方式，定义自己的图标，自定义图标实际上就成
了自定义字体，归纳起来可分为三步
1这里我们需要自己准备svg格式的矢量图
2 生成字体文件
3 在CSS中引用字体文件
自定义图标操作步骤
A将要生成的图标做成svg格式详情可参见
/help/platform.html
B到https://icomoon.io/app/#/select网站生成图标
1 单击import icons 按钮导入我们准备好的svg 图标集，或者Add icons From Library 引用这个网站上的一些现成图标
2 选择要生成的图标，或者通过其菜单选择，全选SelectAll / 不选None
3 点击右下角Generate Font F按钮进入属性设置页面
4 进行字体属性设置
5 下载字体文件及dome
6解压下载后的压缩包可以得到以下的文件夹其中包括demo ，style.css 及fonts 文件中的字体文件就是我们要的
使用时，一起拷贝到我们的工程中即可
C 在Ionic工程中引用
1将所要用的css 及字体文件放到一个文件夹中
2 在index.html 中引入我们的css
<link href="css/style.css" rel="stylesheet">
3 在需要的地方引用，和ionic 中自带图标的方式相同，所有图标的样式名称可在dome.html 文件中找到
示例工程可参见
https:///longtaoge/iconFontDome/tree/master。