更新记录
1(2020-10-24) 下载此版本
纯粹的一个页面,主要是开发思路
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 2.9.5 app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
思路: 1.整体分三个canvas(画布),通过绝对定位相互重叠. 2.裁剪框画布: 在最上层,通过坐标位置绘制一个方形框.因为框的外边事半透明的,可以分成4快矩形区,分别通过坐标在4个区域画上半透明的矩形. 3.原图画布: 在裁剪框画布的下层,根据大小直接在画布上绘制图片. 4.裁剪后的预览图画布: 在最下层和最上层之间切换. 一.通过手指在选框上坐标的相对变化,修改原图画布中图片的大小,坐标和角度. 二.每次变换保证原图画布中的原点在图片的中心.