JavaScript+HarmonyOS 实现一个手绘板

更新时间：2022年07月19日 14:50:35 作者：开源基础软件社区官方

这篇文章主要介绍了 JavaScript+HarmonyOS 实现一个手绘板，利用openHarmony内置的API cnavas组件实现，具体详细内容需要的小伙伴可以参考一下

前言

最近在学习openHarmony，恰好之前了解过canvas，所以本篇文章分享一下我实现的一个手绘板，利用openHarmony内置的API cnavas组件实现。

这是一个手绘板，并且可以根据滑动屏幕速度，动态生成线条大小，当用户触摸屏幕，会生成线条，并且速度越快，线条越细。

效果展示

原理分析

1.绘制原理

使用前，需要线了解canvas组件，可以参考harmonyOS开发者文档，文档介绍的非常详细，这里就不多介绍了

首先，我们需要将canvas上下文对象，需要在触摸移动事件中绑定，因为我们是通过触摸来生成对应线条的。

然后，属性选择lineCap，属性值有三种：butt、round、square，我尝试了后发现round效果比较好。

属性值为butt时的效果：

属性值为round：

属性值为square：

其实butt效果也还行，就是锯齿太严重，虽然API中有内置抗锯齿属性，但是不知道为啥设置了没有效果，可能粒度太大了，现在这个粒度已经有点卡了，如果把粒度小设置小一点估计更卡

综上还是选择了round，它会将线端点以圆形结束，所以效果上更圆润

最后将数组中的最后一个值取出，作为moveTo的坐标，将鼠标移动后的点作为lineTo的坐标，然后再通过stroke就能绘制出图像。

绘制直线，通常使用moveTo ()与lineTo ()两个方法。. moveTo ()方法用于将画笔移至指定点并以改点为直线的开始点，lineTo ()则为结束点。

        const el = this.$refs.canvas;
        this.ctx = el.getContext('2d')
        this.ctx.lineWidth =this.lineWidth/2
        this.ctx.beginPath()
        // 向线条的每个末端添加圆形线帽。
        this.ctx.lineCap = 'square'
        // 每次将数组中最后一个值取出，作为起始点
        this.ctx.moveTo(this.ArrX[this.ArrX.length-1],this.ArrY[this.ArrY.length-1])
        this.ctx.lineTo(e.touches[0].localX,e.touches[0].localY)
        this.ctx.stroke()
        this.ArrX.push(e.touches[0].localX)
        this.ArrY.push(e.touches[0].localY)

2.线条粗细

想要通过速度来计算线条粗细，那么可以是需要获取两点之间的时间，通过时间和距离得到速度

当触发touchmove事件，将当前时间戳存储起来，通过上一次触发事件获得的时间-当前触发事件获得的时间，就可以得到两次触发事件的事件间隔，此时我们就获得了两点之间的时间

再计算两点之间的距离（平方和再开根号），通过 路程/时间 = 速度计算出两点之间的速度，从而可以动态生成线条粗细

        // 计算线条粗细
        const currTime = Date.now()
        if(this.startTime !== 0){
            const duration = currTime - this.startTime
            // 传入倒数第二个点和最后一个点，和持续时间，会返回加速度
            const v = this.speed(this.ArrX[this.ArrX.length-2],this.ArrY[this.ArrY.length-2],this.ArrX[this.ArrX.length-1],this.ArrY[this.ArrY.length-1],duration)
            this.lineWidth =   this.lineWidth/v
            if(this.lineWidth>25){
                this.lineWidth = 25
            }
            if(this.lineWidth<1){
                this.lineWidth = 1
            }
        }
        this.startTime = currTime

完整代码

index.js

// @ts-nocheck
export default {
    data: {
        ctx:'',
        ArrX:[],
        ArrY:[],
        //        开始时间
        startTime:0,
        lineWidth:14
    },
    // 偏移很多
    touchstart(e){
        //        开始时间清空
        this.startTime = 0
        this.ArrX.push(e.touches[0].localX)
        this.ArrY.push(e.touches[0].localY)
    },
    //    计算最后两点的速度
    speed(x1,y1,x2,y2,s){
        const x = Math.abs(x1-x2)*Math.abs(x1-x2)
        const y = Math.abs(y1-y2)*Math.abs(y1-y2)
        return Math.sqrt(x+y)/s
    },
    touchmove(e){
        // 计算线条粗细
        const currTime = Date.now()
        if(this.startTime !== 0){
            const duration = currTime - this.startTime
            // 传入倒数第二个点和最后一个点，和持续时间，会返回加速度
            const v = this.speed(this.ArrX[this.ArrX.length-2],this.ArrY[this.ArrY.length-2],this.ArrX[this.ArrX.length-1],this.ArrY[this.ArrY.length-1],duration)
            this.lineWidth =   this.lineWidth/v
            if(this.lineWidth>25){
                this.lineWidth = 25
            }
            if(this.lineWidth<1){
                this.lineWidth = 1
            }
        }
        this.startTime = currTime

        const el = this.$refs.canvas;
        this.ctx = el.getContext('2d')
        this.ctx.lineWidth =this.lineWidth/2
        this.ctx.beginPath()
        // 向线条的每个末端添加圆形线帽。
        this.ctx.lineCap = 'square'
        // 每次将数组中最后一个值取出，作为起始点
        this.ctx.moveTo(this.ArrX[this.ArrX.length-1],this.ArrY[this.ArrY.length-1])
        this.ctx.lineTo(e.touches[0].localX,e.touches[0].localY)
        this.ctx.stroke()
        this.ArrX.push(e.touches[0].localX)
        this.ArrY.push(e.touches[0].localY)
    },
    touchend(e){
        this.startTime = 0
    }
}

index.hml

<div class="container">
    <canvas ref="canvas" class="canvas" @touchstart="touchstart"
            @touchmove="touchmove" @touchend="touchend"/>
</div>

index.css

.container{
    margin: 50px;
}
.canvas{
    height: 100%;
    width: 100%;
    background-color: #eee;
    border: 1px solid #ffc300;
}

总结

不足点：使用体验不是很好，后续还需要优化

最后，通过自定义组件，加深对HarmonyOS的开发，共建鸿蒙生态

到此这篇关于 JavaScript+HarmonyOS 实现一个手绘板的文章就介绍到这了,更多相关 JavaScript 手绘板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

echarts同一页面中四个图表切换的js数据交互方法示例
这篇文章主要给大家介绍了关于echarts同一页面中四个图表切换的js数据交互的相关资料，文中给出了完整的示例代码供大家参考学习，对大家的学习或者工作具有一定的帮助，需要的朋友们下面随着小编来一起学习学习吧
2018-07-07
基于HTML+CSS+JS实现纸牌记忆游戏
这篇文章主要介绍了如何利用HTML、CSS 和 JavaScript 制作纸牌记忆游戏，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起动手尝试一下
2022-04-04
uni-app弹出层uni-popup使用及修改默认样式的方法实例
我们在使用uniapp开发的时候,有时可以使用uniapp自有的样式模板,这样可以提高开发效率,下面这篇文章主要给大家介绍了关于uni-app弹出层uni-popup使用及修改默认样式的相关资料,需要的朋友可以参考下
2022-11-11
js算法中的排序、数组去重详细概述
在js中实现数组排序，采用数组中sort方法实现还是比较简单的，下面有个不错的示例大家可以参考下
2013-10-10
await/async无法捕获与处理错误信息的解决方案分享
async await 中添加错误处理个人认为是有必要的,下面这篇文章主要给大家介绍了关于await/async无法捕获与处理错误信息的解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
微信小程序实现文章关注功能详细流程
在社交小程序里有个常见的场景是关注功能，我们本篇以关注已经发布的文章为例，讲解一下关注功能如何实现
2022-08-08
javascript入门教程基础篇
这篇文章主要介绍了javascript入门教程，全部内容都是javascript的基础知识，内容很全面，特别适合刚刚学习javascript的朋友学习，希望大家仔细阅读javascript教程。
2015-11-11
js实现超简单的展开、折叠目录代码
这篇文章主要介绍了js实现超简单的展开、折叠目录代码,通过javascript操作鼠标点击事件控制页面元素样式的动态改变实现该功能,非常简单实用,需要的朋友可以参考下
2015-08-08
js换图片效果可进行定时操作
换图片效果想必大家都有见到过吧，但是定时换图片，貌似就很少见了，下面本文通过一个示例为大家详细介绍下
2014-06-06
JS设置cookie、读取cookie、删除cookie
Js操作Cookie总结（设置，读取，删除），工作中经常会用到的哦！下面是详细代码，如有错误，请留言指正！
2015-04-04