您现在的位置是:首页 > 前端开发 > Uni-App

uni-app 画布canvas手写签名

admin2019-03-17Uni-App 人已围观

简介uni-app 画布canvas手写签名,

1、html 代码  , uniApp  
 

            <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>
 


2、css 样式
 

    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;
    }


3、 代码 
 

<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(event) {
                            console.log(event)    
                // console.log("触摸开始" + event.changedTouches[0].x)
//                 console.log("触摸开始" + event.changedTouches[0].y)
                //获取触摸开始的 x,y
                let point = {
                    x: event.x,
                    y: event.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 = wx.createCanvasContext('firstCanvas')
            //设置线的颜色
            content.setStrokeStyle("#000")
            //设置线的宽度
            content.setLineWidth(5)
            //设置线两端端点样式更加圆润
            content.setLineCap('round')
            //设置两条线连接处更加圆润
            content.setLineJoin('round')
        },



    }
</script>
 


效果图:

很赞哦!2209

文章评论

      匿名评论
    • 评论
    人参与,条评论

站点信息

  • 建站时间:2018-12-23
  • 网站程序:帝国CMS7.5
  • 文章统计: 183
  • 文章评论:490条
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们