当前位置: 首页> 文旅> 旅游 > 鸿蒙canvans的使用-仿照QQ聊天气泡效果(未完)

鸿蒙canvans的使用-仿照QQ聊天气泡效果(未完)

时间:2025/7/10 16:50:37来源:https://blog.csdn.net/qczg_wxg/article/details/141757913 浏览次数:0次

开胃小菜

@Entry
@Component
struct Index {//2D渲染context: CanvasRenderingContext2D = new CanvasRenderingContext2D();build() {Row() {Column({ space: 20 }) {Canvas(this.context)//绘制东西需要上下文,类似画笔.width('100%')//宽度.aspectRatio(1.5)//宽高比.backgroundColor(Color.Gray)//背景色.onReady(() => { //canvas准备好了的时候回调,如果画布没出来,是不会回调该方法的。//静态的可以再这里绘制this.context.beginPath();this.context.strokeStyle ="#123"//颜色this.context.lineWidth = 4//线宽this.context.rect(1,2,3,4)//绘制矩形this.context.fill()//填充画笔this.context.stroke()//类似于Android的Invalidate()this.context.closePath();//绘制path路径this.context.beginPath();this.context.strokeStyle = '#0f0';this.context.moveTo(20,20);//起点移动this.context.lineTo(100,100);//与起点确定一条直线this.context.stroke();this.context.closePath();this.context.clearRect(0,0,360,240);//清空上面所绘制的内容}).onAreaChange((old: Area, newArea: Area) => {//大小位置变化的时候调用。//old 和 newArea两个参数只能是具体的vp值,而不是百分比,可以打印输出值,以方便看结果console.log("jett", "old:" + JSON.stringify(old));console.log("jett", "newArea:" + JSON.stringify(newArea));})Row({space:20}){Button("Canvas上给制").onClick(()=>{//可以在这里直接画  基本操作this.context.beginPath();this.context.strokeStyle = '#F00';this.context.lineWidth = 4;// this.context.rect(50, 50, 100, 100);this.context.arc(180, 120, 100, 60, 270, true);// this.context.fill();this.context.stroke(); //完成绘制的渲染this.context.closePath();//画path路径this.context.beginPath();this.context.strokeStyle = '#0F0';this.context.moveTo(20,20);this.context.lineTo(100,100);this.context.lineTo(150,200);this.context.stroke(); //完成绘制的渲染this.context.closePath();})Button("清除Canvas").onClick(()=>{this.context.clearRect(0,0,360,240); //数值前面打印了})}}.width('100%')}.height('100%')}
}

仿照QQ气泡的绘制

在这里插入图片描述

关键字:鸿蒙canvans的使用-仿照QQ聊天气泡效果(未完)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: