j***@126.com
j***@126.com
  • 发布:2020-08-28 11:32
  • 更新:2020-10-15 08:57
  • 阅读:1200

【报Bug】canvas在低版本安卓上的异常表现

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 10.15.2

HBuilderX类型: 正式

HBuilderX版本号: 2.8.8

手机系统: Android

手机系统版本号: Android 5.1

手机厂商: vivo

手机机型: vivo X7

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class='contents'>  

        <canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)' @touchend='end'  
         @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>  
        </canvas>  

        <button @click='clearClick'>清除</button>  
        <button @click='saveClick'>保存图片</button>  
        <image id='signatureImg' :src='signImage'></image>  

    </view>  
</template>  

<script>  
    var content = null;  
    var touchs = [];  
    var canvasw = 0;  
    var canvash = 0;  
    //获取系统信息  
    uni.getSystemInfo({  
        success: function(res) {  
            canvasw = res.windowWidth;  
            canvash = canvasw * 9 / 16;  
        },  
    })  
    export default {  
        data() {  
            return {  
                signImage: ''  
            }  
        },  
        methods: {  
            // 画布的触摸移动开始手势响应  
            start: function(e) {  
                console.log(e)  
                // console.log("触摸开始" + event.changedTouches[0].x)  
                //                 console.log("触摸开始" + event.changedTouches[0].y)  
                //获取触摸开始的 x,y  
                let point = {  
                    x: e.touches[0].x,  
                    y: e.touches[0].y,  
                }  
                // console.log(touchs)  
                touchs.push(point);  

            },  
            // 画布的触摸移动手势响应  
            move: function(e) {  
                let point = {  
                    x: e.touches[0].x,  
                    y: e.touches[0].y  
                }  
                touchs.push(point)  
                if (touchs.length >= 2) {  
                    this.draw(touchs)  
                }  
            },  

            // 画布的触摸移动结束手势响应  
            end: function(e) {  
                console.log("触摸结束" + e)  
                //清空轨迹数组  
                for (let i = 0; i < touchs.length; i++) {  
                    touchs.pop()  
                }  

            },  

            // 画布的触摸取消响应  
            cancel: function(e) {  
                console.log("触摸取消" + e)  
            },  

            // 画布的长按手势响应  
            tap: function(e) {  
                console.log("长按手势" + e)  
            },  

            error: function(e) {  
                console.log("画布触摸错误" + e)  
            },  

            //绘制  
            draw: function(touchs) {  
                let point1 = touchs[0]  
                let point2 = touchs[1]  
                touchs.shift()  
                content.moveTo(point1.x, point1.y)  
                content.lineTo(point2.x, point2.y)  
                content.stroke()  
                content.draw(true)  
            },  
            //清除操作  
            clearClick: function() {  
                //清除画布  
                content.clearRect(0, 0, canvasw, canvash)  
                content.draw(true)  
            },  
            //保存图片  
            saveClick: function() {  
                var that = this  
                uni.canvasToTempFilePath({  
                    canvasId: 'firstCanvas',  

                    success: function(res) {  
                        //打印图片路径  
                        console.log(res.tempFilePath)  
                        //设置保存的图片  
                        that.signImage = res.tempFilePath  
                    }  
                })  

            }  

        },  

        /**  
         * 生命周期函数--监听页面加载  
         */  
        onLoad: function(options) {  
            //获得Canvas的上下文  
            content = uni.createCanvasContext('firstCanvas')  
            //设置线的颜色  
            content.setStrokeStyle("#000")  
            //设置线的宽度  
            content.setLineWidth(5)  
            //设置线两端端点样式更加圆润  
            content.setLineCap('round')  
            //设置两条线连接处更加圆润  
            content.setLineJoin('round')  
        },  

    }  
</script>  

<style>  
    content {  
        width: 100%;  
        height: 500px;  
    }  

    .firstCanvas {  
        background-color: #ddd;  
        width: 100%;  
        height: 200px;  
    }  

    .contents image {  
        width: 100%;  
        height: 200px;  
        background-color: orange;  
    }  

    #signatureImg {  
        background-color: #ddd;  
    }  
</style>

操作步骤:

在打开页面的上部画板靠右边位置滑动手指

预期结果:

画出的线条轨迹跟随手指,位置也在画板对应的右边位置

实际结果:

线条位置出现在了画板左上角

bug描述:

在开发中遇到低版本安卓,canvas画图时表现不一致问题,画出来的线条和位置明显比预期的小很多;
为方便复现演示,示例代码直接使用插件市场里 名称为“canvas的手写签名”模块的代码;

2020-08-28 11:32 负责人:无 分享
已邀请:
j***@126.com

j***@126.com (作者)

官方看到了嘛,,

DCloud_UNI_GSQ

DCloud_UNI_GSQ

bug 确认,已加分,后续修复

DCloud_UNI_GSQ

DCloud_UNI_GSQ

HBuilderX alpha 2.9.0+ 已修复

tomJerry

tomJerry - APP,小程序开发

哎~V3编译BUG 很早以前的BUG了 到现在才解决!
https://ask.dcloud.net.cn/question/97308

该问题目前已经被锁定, 无法添加新回复