wordpress网站基础知识,信息网络公司经营范围,首都博物馆 网站建设,舒城做网站一、前言
DevEco Studio版本#xff1a;4.0.0.600
前些天写了一篇 鸿蒙自定义控件实现罗盘数字时钟效果 的文章#xff0c;有同学私信说能不能介绍鸿蒙中的画布组件#xff0c;下面文章介绍下鸿蒙中的Canvas画布、CanvasRenderingContext2D绘制组件#xff0c;实现绘制文…一、前言
DevEco Studio版本4.0.0.600
前些天写了一篇 鸿蒙自定义控件实现罗盘数字时钟效果 的文章有同学私信说能不能介绍鸿蒙中的画布组件下面文章介绍下鸿蒙中的Canvas画布、CanvasRenderingContext2D绘制组件实现绘制文本、矩形、线条、圆形、椭圆、三角形、扇形、图片等。
Canvas提供画布组件用于自定义绘制图形。
CanvasRenderingContext2D使用RenderingContext在Canvas组件上进行绘制绘制对象可以是矩形、文本、图片等相当于画笔
RenderingContextSettings用来配置CanvasRenderingContext2D对象的参数包括是否开启抗锯齿
参考链接OpenHarmony CanvasRenderingContext2D 二、实现效果 三、具体实现逻辑
1、初始化
private settings: RenderingContextSettings new RenderingContextSettings(true)
private context: CanvasRenderingContext2D new CanvasRenderingContext2D(this.settings)
private img: ImageBitmap new ImageBitmap(images/startIcon.png)build() {Stack({ alignContent: Alignment.Center }) {Canvas(this.context).padding({ top: 76 }).width(100%).height(100%).onReady(() {this.drawCanvas()})}.width(100%).height(100%)
}//画布逻辑
private drawCanvas(): void {this.context.fillStyle #0080DC //画笔填充颜色this.context.strokeStyle #0080DC //画笔线条颜色this.context.font 22px //字体大小
}
2、画文字
//画文字
this.context.fillText(Hello World!, 10, 10)3、画矩形
//画矩形
this.context.strokeRect(10, 30, 100, 100) 4、画线条
//画线
this.context.beginPath()
this.context.moveTo(10, 150)
this.context.lineTo(180, 200)
this.context.stroke() 5、画圆形
//画圆形
this.context.beginPath()
this.context.arc(60, 250, 50, 0, 2 * Math.PI)
this.context.stroke() 6、画椭圆形
//画椭圆形
this.context.beginPath()
this.context.ellipse(100, 360, 50, 100, Math.PI * 0.5, 0, Math.PI * 2)
this.context.stroke() 7、画三角形
先画两条线然后通过closePath()方法实现闭环依次达到画三角形效果
//画三角形
this.context.beginPath()
this.context.moveTo(10, 500)
this.context.lineTo(60, 420)
this.context.lineTo(120, 500)
this.context.closePath()
this.context.stroke() 8、画扇形
先画弧线在画两条基于弧线起点和终点的线依次来达到画扇形的效果
//画扇形
this.context.beginPath()
this.context.arc(110, 620, 100, Math.PI, 1.75 * Math.PI)
this.context.moveTo(10, 620)
this.context.lineTo(110, 620)
this.context.lineTo(180.71, 549.29)
this.context.stroke()
9、画图片
//画图片
this.context.drawImage(this.img, 0, 0, 144, 144, 150, 0, 144, 144) 10、画二阶贝赛尔曲线的路径
原理演示动画 效果 代码实现
import display from ohos.displayEntry
Component
struct Index {private settings: RenderingContextSettings new RenderingContextSettings(true)private context: CanvasRenderingContext2D new CanvasRenderingContext2D(this.settings)private mDisplayWidth: numberprivate mDisplayHeight: numberaboutToAppear() {this.getSize()}// 获取设备宽高计算表盘大小async getSize() {let mDisplay await display.getDefaultDisplay()this.mDisplayWidth mDisplay.widththis.mDisplayHeight mDisplay.height}build() {Stack({ alignContent: Alignment.Center }) {Canvas(this.context).padding({ top: 76 }).width(100%).height(100%).onReady(() {this.drawCanvas()}).onTouch((event) this.touchEvent(event))}.width(100%).height(100%)}private drawCanvas(): void {this.context.clearRect(0, 0, this.mDisplayWidth, this.mDisplayHeight)this.context.strokeStyle #0080DC //画笔线条颜色this.context.lineWidth 3this.context.font 22px //字体大小//画第一个圆this.context.beginPath()this.context.arc(20, 200, 5, 0, 2 * Math.PI)this.context.stroke()//画第二个圆this.context.beginPath()this.context.arc(305, 200, 5, 0, 2 * Math.PI)this.context.stroke()//画贝塞尔曲线this.context.beginPath()this.context.moveTo(20, 195)this.context.quadraticCurveTo(this.eventX, this.eventY, 300, 200)this.context.stroke()}State eventX: number 0State eventY: number 500touchEvent(event: TouchEvent) {switch (event.type) {case TouchType.Down: // 手指按下case TouchType.Move: // 手指移动this.eventX event.touches[0].xthis.eventY event.touches[0].ythis.drawCanvas()break}}
}
11、画三阶贝赛尔曲线的路径
原理演示动画 效果 代码实现
import display from ohos.displayEntry
Component
struct Index {private settings: RenderingContextSettings new RenderingContextSettings(true)private context: CanvasRenderingContext2D new CanvasRenderingContext2D(this.settings)private mDisplayWidth: numberprivate mDisplayHeight: numberState isFirst: boolean trueaboutToAppear() {this.getSize()}// 获取设备宽高计算表盘大小async getSize() {let mDisplay await display.getDefaultDisplay()this.mDisplayWidth mDisplay.widththis.mDisplayHeight mDisplay.height}build() {Stack({ alignContent: Alignment.Center }) {Canvas(this.context).padding({ top: 76 }).width(100%).height(100%).onReady(() {this.drawCanvas()}).onTouch((event) this.touchEvent(event))Button(点击切换当前${this.isFirst ? 第一点 : 第二点}).onClick(() {this.isFirst !this.isFirst})}.alignContent(Alignment.TopStart).width(100%).height(100%)}private drawCanvas(): void {this.context.clearRect(0, 0, this.mDisplayWidth, this.mDisplayHeight)this.context.strokeStyle #0080DC //画笔线条颜色this.context.lineWidth 3this.context.font 22px //字体大小//画第一个圆this.context.beginPath()this.context.arc(20, 200, 5, 0, 2 * Math.PI)this.context.stroke()//画第二个圆this.context.beginPath()this.context.arc(405, 200, 5, 0, 2 * Math.PI)this.context.stroke()//画贝塞尔曲线this.context.beginPath()this.context.moveTo(20, 195)this.context.bezierCurveTo(this.eventFirstX, this.eventFirstX, this.eventSecondX, this.eventSecondY, 400, 200)this.context.stroke()this.context.stroke()}State eventFirstX: number 120State eventFirstY: number 50State eventSecondX: number 200State eventSecondY: number 500touchEvent(event: TouchEvent) {switch (event.type) {case TouchType.Down: // 手指按下case TouchType.Move: // 手指移动if (this.isFirst) {this.eventFirstX event.touches[0].xthis.eventFirstY event.touches[0].y} else {this.eventSecondX event.touches[0].xthis.eventSecondY event.touches[0].y}this.drawCanvas()break}}
}
