Cirry's Blog

konvajs实现图片缩放画板功能

2023-02-18
技术
js
最后更新:2024-03-29
2分钟
247字

最近在用konvajs开发canvas画板功能,目前已经实现了大部分功能,细节还可以完善,目前在网上能搜索到的konvajs相关的资料也不多,分享给大家顺便自己也做一下经验积累。

当前的功能是在vue下实现,如果是原生js开发的话,会更简单一点。接下来就去主要说一下在vue下的开发思路。

安装konva和vue-konva

Terminal window
1
npm add konva vue-konva@2 # 安装vue和vue-konva的vue2版本
2
npm add konva vue-konva # 安装vue和vue-konva的vue3版本

引入vue-konva

main.js中引入vue-konva:

1
import Konva from 'konva'
2
import VueKonva from 'vue-konva'
3
4
Vue.use(VueKonva)

准备自己开发一个demo出来给大家预览,目前这个demo,我还不是很有时间弄,最近一直在开发,挺忙的,还得等等。

目测后续会更新的功能有,在图片上设置区域矩形,多边形区域。自适应图片大小。

最近有点忙,未完待续。。。

本文标题:konvajs实现图片缩放画板功能
文章作者:Cirry
发布时间:2023-02-18
版权声明:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
感谢大佬送来的咖啡☕
alipayQRCode
wechatQRCode