elementui展示多张图片_fabric.js之旅图片
有什么建议或者意见都可以告诉我。接下就让我来阐述一下我是如何使用fabric.js来实现上期文章视频演示中已经实现的功能。我会将它分为几个部分分别来描述，包括在实现过程中遇到过哪些问题。那就不多废话了，直接进入本期的主题—图片。PS:建议在开始之前，大家可以先去看一下fabric.js官方文档以及官方实现的Demo，非常具有代表性和参考价值。我已经将之前提到过的中文文档上传至码云，有需要的同学可以去项目自取。在开始着手之前，我们需要先考虑要实现哪些功能，怎么实现这些功能？要做一个可以自定义的海报，需要有三个部分：1.素材1.1 图片1.2 背景图片1.3 文本2.工作台(即展示海报的模块)3.操作台(即控制/操作海报上素材的模板)素材的准备就不做赘述了。这次主要讲述如何初始化工作台、向工作台添加图片素材、简单的操作素材。项目技术栈：vue+elementui+fabric一.初始化工作台在初始化工作台之前，我们需要HTML里面写上canvas标签，并设置ID,定义好画布的宽高属性。在data里面定义一个canvas，让它来接收实例化后的fabric画布对象。定义好了之后，就可以在vue生命周期mounted里面实例化画布。实例化画布之后，再调用renderAll()方法就可以了。代码如下：
在实例化代码这里，有一个clipPath。它的作用是将画布裁剪出一块区域来作为显示区域，之所以要这样做是因为，假如我们的工作台尺寸大小为1200px*800px。有时候误操作将一些元素拖拽出画布显示范围，想再将元素拖拽回画布就不行了，通过clipPath来裁剪出一个600px*600px区域作为画布的显示区域，这样的话,素材只会在600*600的范围内显示，范围之外是不可见的。但是依然可以通过鼠标框选来选中素材并拖回画布显示区域(后面会仔细说明)。需要注意的是，默认情况画布左上角顶点为原点即(0,0)。二.添加图片到工作台工作台渲染好之后，我们就可以开始向工作台添加提前准备好的图片素材。在添加之前，我们需要了解到一个函数fabric.Image.fromURL(image,callback,option)第一个参数为图片的路径，可以为base64编码。第二个参数为实例化后的image对象。第三个参数为实例化后对图片设置的相关参数。对图片参数的设置可以在实例化后通过set()方法设置,也可以规定好设置参数作为第三个参数传入。两者皆可。具体代码如下：
图片可以设置的参数并不只有代码片段这些。其他可以设置的属性可以参考官方文档。另外，也可以设置一些自定义属性，参见代码片段注释。简单来说，如果要设置图片的属性就可以通过获取图片对象调用set()方法。既可以设置单一属性，如：img.set('left',100)。也可以同时设置多个属性，如：img.set({"left":100,"top":100})。当然，既然有设置属性的方法，自然也要有获取属性的方法—get()。如：img.get("left")就可以获取到图片left属性的值了。三.操作台在实例化工作台和渲染好图片素材之后，我们就可以开始编写操作台模块的代码。常见的图片操作有：1.拉伸2.缩放3.平移4.翻转5.设置透明度6.锁定7.排序8.复制9.删除在实现这些功能之前，我们需要在data里面提前定义好一些变量来接收当前被操作元素的状态值。方便在选中被操作元素后，正确回显它当前的状态。其中拉伸、缩放、平移这些都是在实例化图片素材之后，可以直接看到图片周围有控制器(前提是你在初始化时没有禁用这些属性)，可以直接拉伸、缩放、平移图片，这都得益于fabric.js，它已经帮我们做好了，通过观察left，top，scaleX，scaleY，width，height的值就可以计算出图片素材在工作台的位置信息和大小。其次，翻转功能分为水平翻转和垂直翻转，分别对应flipX和flipY。值只能是布尔值。通过set()方法设置这两个属性，就可以达到水平翻转和垂直翻转图片的效果。设置透明度也是一样的道理，也是通过set()方法设置opacity属性的值来实现图片透明。锁定、排序、复制、删除这四个功能在后面处理文字素材也会用到，就留着处理文字素材的时候再说吧。希望上面提到的内容已经让你对fabric有一个大致的认识，如果你在看过这篇文章之后再结合fabric.js文档实现文章提到的功能，那你就真的太棒了！有兴趣的coder可以试一试哦。最后就是有什么疑问可以留言告诉我，感觉说得不是很仔细。码字真的太累了...欢迎留言！写留言
elementui展示多张图片_fabric.js之旅图片相关推荐
- elementui展示多张图片_elementUI 上传多张图片并预览大图左右切换
前段时间项目需求中涉及到上传多张图片 当条信息查看时可预览大图功能,项目框架vue.js+elementUI,抽时间在此做个整理记录,如有更好的方法 欢迎大家互相交流 页面列表更多操作-修改-先选择图 ...
- elementui展示多张图片_Element-ui实现合并多图上传（一次请求多张图片）
前言 工作中碰到需要多图上传,在使用element-ui解决过程中碰到一些问题,在这里分享给大家. 环境: Springboot+Vue+Element-ui 正文 这次上传使用的是Elemet-ui ...
- element-ui+js+vue——实现图片的放大缩小拖动等功能——技能提升
elementui+js+vue--实现图片组件的封装 1. 实现图片的放大缩小 2. 实现图片的拖动功能 3. 实现图片的预览 最近同事在写一个关于 图片放大缩小拖动的功能,其实不止是图片,只要是在 ...
- css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
- 灵活的数据管理和展示javascript类库 - Recline.js
日期:2012-7-15 来源:GBin1.com 在线演示 今天我们介绍一款用来创建数据相关应用的开源Javascript类库 - Recline.js,使用这个类库可以帮助你使用Javascri ...
- 使用v-for循环展示多张图片，并且标记选中的图片
因为项目需求,需要使用v-for展示多张图片,并且供用户选择其中一张,当用户选中一张图片的时候需要改变该图片的样式,来反映用户的选择.由于刚学vue,踩了好多坑,因此作以下记录,以时刻提醒自己: 1. ...
- OpenGL ES之十——纹理贴图（展示一张图片）
概述 这是一个系列的Android平台下OpenGl ES介绍,从最基本的使用最终到VR图的展示的实现,属于基础篇.(后面针对VR视频会再有几篇文章,属于进阶篇) OpenGL ES之一--概念扫盲 ...
- elementui el-image组件 点击按钮 预览图片
今天遇到一个新的需求,点击按钮查看图片,且图片能放大缩小.如下图: 想到了使用element-ui的el-image组件,官网示例: <div class="demo-image__p ...
- ElementUI + express实现头像上传及后台图片保存
ElementUI + express实现头像上传及后台图片保存 记录大创项目中的解决方式.只说明基本的实现方法,不代表实际代码.如果你需要在后台保存头像图片的话. 当然也可以直接使用base64格式 ...
最新文章
- 黑马28期Android全套视频无加密完整版
- 【深度学习】神经网络的Python代码实现
- LeetCode 2 Keys Keyboard
- linux 查看可执行文件动态链接库相关信息(转)
- 【itext学习之路】--1.创建一个简单的pdf文档
- 容器 10 年，Docker 6 年
- 2.4g 无线键鼠对码软件_RK526无线键鼠套装开箱体验
- (O)JS核心：call、apply和bind
- 【老生谈算法】matlab实现萤火虫算法源码——萤火虫算法
- 机械设计基础类毕业论文文献都有哪些？
- 探讨职业化的表达方式
- beatmaker3 android,Hip-Hop Beat Maker app
- Mdict to macOS Dictionary转换笔记
- 如何在web配置一个高效采集数据的DTM？
- rbd feature
- 信创IT网管运维管理软件，信创运维服务平台
- win10修改用户名/指纹无法置入/用户文件没有重命名的选项
- 深度学习——NLP中词的表示方法word embeddingword2vec
- 【递归】进制转换、字符串反转、判断回文
- 在线网络考试系统源码