vue 鼠标拖动画矩形_canvas+vue实现图片的缩放、拖拽

最近做项目遇到一个需求，对图片进行拖动+缩放，本来这个功能直接采用viewerjs这个插件就可以实现的。

但是我们还有其他需求啊，在底层图片上添加一些图片或者文字注释，并且随着底层图片的拖动和缩放后，其相对位置不能发生改变，因此选择了用canvas解决，毕竟x,y坐标在那里，敌动我也动。

定义canvas，解决绘制图片模糊的问题

这里注意一下，canvas有自身的width、height和style里面的width、height，这两者是不同的 。

敲黑板： canvas的width、height是canvas实际的宽高，而style里面设置的width、height是被浏览器渲染的宽高。如果我们不设置style宽高，那么canvas会默认将一个逻辑单位映射到一个像素。

但是一般浏览器都是两个像素点映射称一个像素的，所以为了保证图片不模糊，简单的将画布的大小设置成了浏览器渲染大小的一半(这个有更精确的方法，可以自己去百度)。

实现图片渲染

在data中定义一些参数，按需定义

//定义需要渲染的图片数组

canvasWidth: 2400, // 画布大小

canvasHeight: 1400,

myCanvas: null,

ctx: null,

imgX: 200, // 图片在画布中渲染的起点x坐标，这个坐标为后期的添加注释图片、文字位置提供了相对坐标点

imgY: 100,

imgScale: 0.9, // 图片启示的缩放大小

extraImgList: [ {url:require("@public/images/dashboard/labor3.png"), x: 0, y: 0, width: 2400, height: 1400},

{url:require("@public/images/icon-menu-2.png"), x: 700, y: 100, width: 40, height: 40}

],

imgObject: [], // 存放预加载好了的图片对象

在mounted中获取到canvas对象，并调用方法

mounted() {

this.myCanvas = this.$refs.bargraphCanvas;

this.ctx = this.myCanvas.getContext('2d');

this.loadImg();

this.canvasEventsInit();

},

实现函数：

图片预加载

loadImg() {

var _this = this;

let extraImgList = _this.extraImgList;

let length = extraImgList.length;

var imageList = [];

let count = 0;

//加载底层图片，这个先后顺序一定要有，不然用来注释的图片可能会被底层图片覆盖

var isBgLoaded = false;

var img = new Image();

var bgImg = extraImgList[0];

img.src = bgImg.url;