uniapp使用canvas

页面中加入组件

<canvas canvas-id="canvas" class="canvas" @touchstart="cas_start" @touchmove="cas_move" @touchend="cas_end"></canvas>

onReady获取页面宽度，加入条件编译

onReady() {//#ifdef APP-PLUSthis.canvasWidth = uni.getSystemInfoSync().windowWidth;this.cas_Drawer(this.canvasWidth,384,1);//#endif}

methods对象中方法

cas_start(e){console.log('触摸开始');console.log(e)if(e.touches.length>1){//大于一的时候，可以判断是两个手指this.startArr=e.touches;}},
cas_move(e){console.log('触摸移动');console.log(e)if(e.touches.length>1){console.log(2);this.nowArr=e.touches;var scale=this.getDistance(this.nowArr[0],this.nowArr[1])/this.getDistance(this.startArr[0],this.startArr[1]); //得到缩放比例，if(scale!=1){this.cas_Drawer(this.canvasWidth,384,scale);}var rotation=this.getAngle(this.nowArr[0],this.nowArr[1])-this.getAngle(this.startArr[0],this.startArr[1]);  //得到旋转角度，}},
cas_end(e){console.log('触摸结束');console.log(e)},
getDistance(p1, p2) {var x = p2.x - p1.x,y = p2.y - p1.y;return Math.sqrt((x * x) + (y * y));//getDistance是勾股定理的一个方法，用于计算放大倍数},
getAngle(p1, p2) {var x = p1.x - p2.x,y = p1.y - p2.y;return Math.atan2(y, x) * 180 / Math.PI;//getAngle是得到夹角的一个方法用于计算放大倍数},
cas_Drawer(width,height,scale){console.log(scale);let ctx = uni.createCanvasContext('canvas');ctx.clearRect(0,0,width,height);//清除画布ctx.drawImage('../../static/img/bg.jpg',0,0,width*scale,height*scale);//绘制图片ctx.draw();//绘制图片}

当前canvas方法主要是用于两个手指缩放图片大小，还有很多地方要改，uniapp组件库里面有相应的组件可以更好的实现这个要求。

uniapp使用canvas相关推荐

uniapp使用canvas完成手写电子签名
uniapp使用canvas完成手写电子签名效果 <template><view ><canvas class="mycanvas" canvas- ...
uniapp生成canvas商品海报
uniapp生成canvas商品海报之前做一个uniapp开发的微信小程序需要生成商品海报,在网上学习后完成,记录一下. 主要使用了canvas,uniapp官网链接:canvas使用方法自定义生 ...
uni-app 之canvas绘制饼状图
uni-app 之canvas绘制饼状图一开始,对于canvas我是拒绝的,后来,我发现我爱上了它,像爱上小哥哥一样~~ 说起canvas,是css3新增的标签.而饼状图又是canvas经典,我们公 ...
uni-app 利用canvas进行画框，移动框，放大缩小并删除，目前支持小程序,h5，其他没测试过
目前没有在小程序上自主画框的,参考了网上资源,但是小程序跟原生的vue写法还是有差别,攻克了很多难题,这里分享给大家先看运行结果 1.页面标签 <view class="tc&quo ...
uni-app使用Canvas实现刮刮乐效果
uni-app使用canvas实现刮刮乐效果在uni-app中使用canvas比较简单,官方参考文档写的非常详细.但是uni-app使用canvas真的有很多坑,所有单独记录下自己的爬坑之旅. dr ...
uniapp中canvas将矩形图片绘制成圆形图片以及保存canvas到手机
废话不多说直接上代码本次是在uniapp中操作的但是canvas都一样前提是你已经赋予了canvas宽高了 //先获取你的canvas let ctx = uni.createCanvasCon ...
uniapp用canvas实现分享海报
做app时通常会遇到分享海报的需求,将当前页面的海报保存到本地相册,然后就可以分享.重点是将当前页面的某一块作为海报页面保存到本地. 这是是通过canvas画图来解决的,参考官网将canvas转换为图 ...
uniapp使用canvas绘制海报
Uniapp中使用canvas绘制海报可以按照以下步骤进行: 1. 引入需要绘制的图片资源这些图片可以是本地的,也可以是远程的.可以将图片资源放在项目的`static`目录下,例如:`static/ ...
小程序uniapp利用canvas生成海报并可以保存至相册
✨uniapp实现生成海报并保存至相册组件,u-popup可以根据自己所使用的组件进行替换这里主要讲的是JS部分,css和元素相关的就不展开赘述了,下方先给大伙看看效果图,图的下方有代码讲解,最下方 ...

uniapp使用canvas

uniapp使用canvas相关推荐

最新文章

热门文章