vue 创建图片坐标点_利用vue+fabric.js获取图片坐标,并实现图片拖拽、旋转、拉伸等功能...
什么是Fabric.js?
Fabric.js是一个可以简化Canvas程序编写的库。 Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具。
为什么要使用Fabric.js?
Canvas提供一个好的画布能力, 但是Api不够友好。绘制简单图形其实还可以, 不过做一些复杂的图形绘制, 编写一些复杂的效果,就不是那么方便了。Fabric.js就是为此而开发,它主要就是用对象的方式去编写代码。
起步
Vue项目中引入Fabric.js
假设您的项目中正在使用ES6和Webpack,您可以开始使用Fabric.js,如下所示:
1、在命令行中:
npm install fabric(或yarn add fabric)
2、将其引入 .vue 文件中
import { fabric } from 'fabric'
3、在 .vue 的单文件中的 mounted: 生命周期里开始你的Fabric.js之旅啦
注:默认的fabric npm模块产生了相当大的包,如果Fabric.js中您有很多可能不需要的包,在这种情况下,可以在 在此处 或在命令行中构建你自己的版本。
绘制图片
1、在组件上添加一个带有id的canvas
2、初始化画布
this.canvasObj = new fabric.Canvas('c',{
preserveObjectStacking:true // 禁止选中图层时自定置于顶部
});
this.canvasObj.setWidth(this.caWidth); //设置画布宽度
this.canvasObj.setHeight(this.caHeight); //设置画布高度
3、添加图形至画布
setImage: function (imgname) {
let imgCoord = fabric.Image.fromURL(imgname, (img) => {
img.scale(1).set({
left: 150,
top: 150,
angle: -15
});
this.canvasObj.add(img).setActiveObject(img);
});
}
至此图形已经添加到画布里面去啦,接下来是要获取图形的XY坐标
通过fabric.js提供的getObjects()方法即可获取到图形对象的所有信息,fabric.js会以数组的形式按照图片先后层次将图片返回出来,在此我只需拿到图片的上右下左四个角的坐标
getImg: function () {
this.imgcoordinate = [];
let items = this.canvasObj.getObjects();
items.forEach((item, index) => {
let itemcoord = {
floorIndex: index,
tl: {
x: item.aCoords.tl.x,
y: item.aCoords.tl.y
},
tr: {
x: item.aCoords.tr.x,
y: item.aCoords.tr.y
},
bl: {
x: item.aCoords.bl.x,
y: item.aCoords.bl.y
},
br: {
x: item.aCoords.br.x,
y: item.aCoords.br.y
}
};
this.imgcoordinate.push(itemcoord);
});
}
至此就可以将图片的坐标信息全部获取到,如果需要改变图片的层次以及删除图片还可以往下看
// 移动层次
moveActive: function (index) {
let t = this.canvasObj.getActiveObject();
switch (index) {
case 0:
t.sendBackwards(); //向下一层
break;
case 1:
t.sendToBack(); //向下至底层
break;
case 2:
t.bringForward(); //向上一层
break;
case 3:
t.bringToFront(); //向上至顶层
break;
case 4:
this.canvasObj.remove(t); //删除图片
break;
default:
return
}
},
如果想要将生成图片并下载,可以将生成的图片信息绑定到一个标签,再模拟点击下载
domeLode: function(){
let url = this.canvasObj.toDataURL();
$('').attr({href:url,download:'a.png'})[0].click();
}
看下最终效果图
E3E7421C-A7DA-41a7-9E49-A6D6BD4EA197.png
vue 创建图片坐标点_利用vue+fabric.js获取图片坐标,并实现图片拖拽、旋转、拉伸等功能...相关推荐
- 高德地图获取坐标距离_利用java、js或mysql计算高德地图中两坐标之间的距离
前言 因为工作的原因,最近在做与地图相关的应用,使用了高德地图,研究了下高德地图计算两坐标距离的方法,官网上提供的开发包中有相关的方法,但是我的产品中比较特殊,无法直接使用提供的方法,所以就自己封装了 ...
- Unity3D实现 UI图片拖拽旋转和拖拽移动
拖拽UI旋转 using UnityEngine; using System.Collections; using UnityEngine.EventSystems; public class Rot ...
- 使用vue创建一个遮罩组件_用于输入遮罩的另一个Vue组件
使用vue创建一个遮罩组件 语音输入蒙版 (vue-input-mask) Yet another Vue component for input masking. Based on react-in ...
- vue页面绘图_利用vue制作在线涂鸦板
效果展示 Canvas API简介 调用方法 getImageData() 返回ImageData对象,该对象为画布上指定的矩形复制像素数据 putImageData() 把图像数据(从指定的 Ima ...
- vue中headers是什么_【vue】饿了么项目-header组件开发
1.数据传递的理解 在App.vue中用到了header组件,首先注册组件 components: {'v-header': header } 然后才能引用 :seller="seller& ...
- vue 给取data值_一些Vue相关的面试题,帮助求职者提升竞争力
Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是Web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来我就给大家分享一些Vue相关的面试题,帮助大家提升 ...
- vue + element 顶部二级菜单_揭秘vue/react组件库中5个quot;作者不造的轮子quot;
点击上方"前端公虾米"关注最新前端资讯 来源: 铁皮饭盒https://juejin.im/post/5d89cd156fb9a06acb3ee19e ? 这五个轮子其实是5个纯j ...
- vue dplayer 加载失败_最新vue脚手架项目搭建,并解决一些折腾人的问题
话不多说,跟好lz的操作!!! 2020/8/1 第一步: ~~~~质问三连: ~~~~~~~~1.node.js安装了吗?:ht tp://nodejs.cn/download/ ~~~~~~~~2 ...
- vue 创建项目并添加路由(Vue路由入门教学,图文详解)
注:初学vue,如有错误.请指教,谢谢! 1.vue-cli 1.1 介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 1.2 下载vue-cli 在命令行下运行 npm ins ...
最新文章
- 电大计算机dm编写程序,中央电大计算机组成原理与汇编语言试题.docx
- 2.2.6 学习率衰减
- 温州大学《深度学习》课程课件(三、浅层神经网络)
- Mac平台下安装与配置MySQL
- VD车辆检测常用方法
- python 中的if else 和in
- OpenCV中绘制外围矩形框和圆框
- tomcat7.0支持什么版本的jdk_JDK/Java 16 可能带来什么新特性?
- C#基础知识之图解TCP IP》读书笔记
- 个人作业——软件工程实践总结作业(待续)
- 编译用户Orcle的package中访问其它Schema的表
- 仿映客直播礼物特效制作流程
- Python 3 字符串 rsplit( ) 方法
- Uber vs. Lyft
- 一行输入两个整数,以空格间隔
- 百度地图、高德地图、腾讯地图餐饮POI内容结构及获取接口
- webpack之css/js/html文件的压缩
- 力扣 1818. 绝对差值和 数学 二分
- 【USACO 2020 January Silver】Berry Picking 题解
- 一头扎进springboot之捕获全局异常
热门文章
- usb3.0u盘写入速度多少正常
- 2022最新的JS面试题第一篇
- 目标检测 YOLOv5 - v6.2版本模型在瑞芯微 Rockchip设备从训练到C++部署实践
- 如今的滴滴就是当初的出租车,被挑战是必然
- 2022-2027年中国网络租车平台行业市场调研及未来发展趋势预测报告
- javaScript蓝桥杯-----平地起高楼
- 亲子游戏:逻辑不一样[图]
- Android FILE_PROVIDER_PATHS 冲突错误 meta-data#android.support.FILE_PROVIDER_PATHS@resource
- 论文查重可能会进入的误区
- 6、Pytest之Fixture参数详解及使用