Bootstrap

基于Vue Konva的canvas图片放大缩小

最近一个项目要实现图片根据鼠标位置多级放大缩小的功能,在网上找了好久的资源没有找到,偶然看到了一篇文章,但是没有完整的代码,研究了两天把代码补全了,其实也不难,但是困扰了我好几天,这个方法相对于网上别的方法我觉的算简洁简单的了,链接等下放在文章最后

1、首先要下载插件

npm install vue-konva konva --save

普通html页面的引用我就不放了

2、在vue项目中main.js中导入

import Vue from 'vue';
import VueKonva from 'vue-konva';

Vue.use(VueKonva);

3、先了解一下这个插件的构成图,这个在konva的官网上面也有

4、最基本的结构

<v-stage ref="stage" :config="configKonva">
 <v-layer ref="layer">
   <v-group :draggable="true" @wheel="wheelForScale" :config="config">
    <v-image :con
;