uniapp使用canvas+手势缩放-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp使用canvas+手势缩放。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

功能介绍，工程类app，需要在手机端查看图纸，canvas绘制点，线。整理随意放大缩小。

canvas uni-app,前端,android,Powered by 金山文档

canvas绘制方法

//画布image
            drawImage(ctx, path, x, y, dWidth, dHeight) {
                ctx.drawImage(path, x, y, dWidth, dHeight)
            },
            //圆角矩形
            roundNode(ctx, x, y, width, height, radius, color) {
                //圆角矩形部分
                ctx.beginPath()
                if (width < 2 * radius) radius = width / 2;
                if (height < 2 * radius) radius = height / 2;
                ctx.moveTo(x + radius, y);
                ctx.arcTo(x + width, y, x + width, y + height, radius);
                ctx.arcTo(x + width, y + height, x, y + height, radius);
                ctx.arcTo(x, y + height, x, y, radius);
                ctx.arcTo(x, y, x + width, y, radius);
                ctx.setFillStyle(color)
                ctx.fill()
            },
            //绘制三角形  type:箭头朝向：bottom、right、left
            drawTriangle(ctx, x, y, color, type) {
                ctx.beginPath()
                let height = 10 //计算等边三角形的高
                ctx.moveTo(x, y); //x y开始
 
                switch (type) {
                    case 'bottom':
                        ctx.lineTo(x - height / 2, y)
                        ctx.lineTo(x, y + height)
                        ctx.moveTo(x, y)
                        ctx.lineTo(x + height / 2, y)
                        ctx.lineTo(x, y + height)
                        break;
                    case 'left':
                        ctx.lineTo(x, y - height / 2)
                        ctx.lineTo(x - height, y)
                        ctx.moveTo(x, y)
                        ctx.lineTo(x, y + height / 2)
                        ctx.lineTo(x - height, y)
                        break;
                    case 'right':
                        ctx.lineTo(x, y - height / 2)
                        ctx.lineTo(x + height, y)
                        ctx.moveTo(x, y)
                        ctx.lineTo(x, y + height / 2)
                        ctx.lineTo(x + height, y)
                        break;
                    default:
                        break;
                }
 
 
                ctx.setFillStyle(color)
                ctx.fill();
            },
            drawText(ctx, text, x, y, color, size) {
                //文字部分
                ctx.beginPath()
                ctx.setTextAlign('center')
                ctx.setFillStyle(color)
                ctx.setFontSize(size)
                const metrics = ctx.measureText(text)
                //文字统一偏移
                ctx.fillText(text, x + metrics.width / 2, y + 17)
            },
            // 绘制带箭头线 type:箭头朝向：bottom、right、left
            drawLine(ctx, fromX, fromY, toX, toY, color, type, isArrow = true, isDash = false) {
                ctx.beginPath()
                if (isDash) {
                    ctx.setLineDash([10]);
                } else {
                    ctx.setLineDash([]);
                }
                ctx.moveTo(fromX, fromY)
                ctx.lineTo(toX, toY)
                ctx.setLineWidth(1)
                ctx.setStrokeStyle(color)
                ctx.stroke()
                
                //是否绘制箭头
                if (isArrow) {
                    this.drawTriangle(ctx, toX, toY, color, type)
                }
            },

手势缩放拖拽功能实现

<movable-area :scale-area="true" :style="{'width':windowWidth+'px','height':windowHeight+'px','backgroundColor':'#ddd','overflow':'hidden'}">
            <movable-view direction="all"  :inertia="true" :scale-min="0.001" :scale-max="4"              :scale="true" :style="{'width':widths+'px','height':heights+'px'}"
                 @scale="scaleChange">
                <canvas id="myCanvas" canvas-id="myCanvas" :style="{'width':widths+'px','height':heights+'px'}"
                    @touchstart="touchstart" />
            </movable-view>
</movable-area>

movable-view + movable-area 实现该功能

windowWidth、windowHeight 是计算屏幕占比如果需要多设备可以参考

widths、heights 动态movable-view宽高（我这里图纸太大需要一定缩放，并且movable-view内容最好跟movable-view宽高相同）

//开始绘制
that.context = uni.createCanvasContext('myCanvas')
//画背景
            that.drawImage(that.context,that.infos.pic, 0, 0,that.widths, that.heights)
            //画节点
            //开始节点
           this.roundNode(this.context, 553, 38, 100, 36, 26, '#1EC1C3')
            this.node.push({
                x:553,
                y:38,
                w:100,
                h:36,
                targe:0
            })
                        that.context.draw()

//s缩放比例
scaleChange(e) {
    this.scale = e.detail.scale
}

//点击事件 判断缩放比例 
            touchstart(e) {
                let x = e.touches[0].x
                let y = e.touches[0].y
                this.node.forEach(item => {
                    if (x > item.x * this.scale && x < (item.x + item.w) * this.scale
                        && y > item.y * this.scale && y < (item.y + item.h) * this.scale) {
                        //在范围内，根据标记定义节点类型
                        this.lookDetial(item)
                    }
                }) 
            },

目前就可以最后需要注意 uniapp 对画布图片的大小，宽高，有很大的限制，如果页面没有显示，或者报错 80%就是这个原因

plus.io.resolveLocalFileSystemURL 安卓可以使用这个来压缩文章来源地址https://www.toymoban.com/news/detail-678496.html

到了这里，关于uniapp使用canvas+手势缩放的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！