Introduction
ArkUI is a UI development framework that provides the capabilities developers need for application UI development. With the continuous update and iteration of OpenAtom OpenHarmony (hereinafter referred to as "OpenHarmony"), ArkUI also provides many new components, such as Canvas, OffscreenCanvas, XComponent components, etc. Added features help developers create smoother, more beautiful apps. This article will share with you how to implement the graffiti function through the Canvas component. Users can choose a blank canvas or a stick figure to draw freely.
Show results
The following is the renderings:
The home page shows the picture of the graffiti and the last blank picture. After clicking the picture to enter the graffiti page, you can set the color and thickness of the brush. If there is an error in the graffiti process, you can use the eraser to erase the screen, or click the clear button to clear the graffiti content and re-do the graffiti operation. The relevant code has been uploaded to the SIG repository, and the link is as follows: https://gitee.com/openharmony-sig/knowledge_demo_entainment/tree/master/FA/FreeDraw
Directory Structure
Source code analysis
1. Introduction to Canvas Component <br>This example mainly uses the Canvas component of ArkUI to implement the function of graffiti. First, let's introduce the Canvas component. The Canvas component mainly includes Canvas and CanvasRenderingContext2D. Canvas provides canvas functions, and CanvasRenderingContext2D provides properties and methods for painting. Through CanvasRenderingContext2D, you can modify the color, thickness and other properties of the brush, so as to draw a variety of graphics. The following is the relevant interface information used by Canvas and CanvasRenderingContext2D in the sample development.
CanvasRenderingContext2D
Second, analyze the layout of the source code page <br>The first module is the home page layout, the home page displays all the pictures contained in the graffiti, click the picture to enter the page; the second module is the graffiti module, which can set the color of the brush, the width of the edge, etc.
- Homepage layout
Column() {
Text('选择涂鸦的图片：').margin('10vp').fontSize('30fp').fontColor(Color.Blue).height('5%')
Grid() {
ForEach(this.images, (item, index) => {
GridItem() {
Image(this.images[index])
.onClick((event) => {
router.push(
{
url: "pages/detailPage",
params: {
imgSrc: this.images[index],
},
}
)
})
.width('100%')
.height('100%')
.objectFit(ImageFit.Contain)
}
})
}
.padding({left: this.columnSpace, right: this.columnSpace})
.columnsTemplate("1fr 1fr 1fr") // Grid宽度均分成3份
.rowsTemplate("1fr 1fr") // Grid高度均分成2份
.rowsGap(this.rowSpace) // 设置行间距
.columnsGap(this.columnSpace) // 设置列间距
.width('100%')
.height('95%')
}
.backgroundColor(Color.Pink)- Graffiti Page - The layout of the canvas Canvas is wrapped by the Stack component, and the Canvas canvas is overlaid on the selected background images, which are mainly fruit stick figures.
Stack() {
Image(this.imgSrc).width('100%').height('100%').objectFit(ImageFit.Contain)
Canvas(this.context)
.width('100%')
.height('100%')
// .backgroundColor('#00ffff00')
.onReady(() => {
})
.onTouch((event) => {
if (event.type === TouchType.Down) {
this.eventType = 'Down';
this.drawing = true;
[this.x, this.y] = [event.touches[0].x, event.touches[0].y];
this.context.beginPath();
this.context.lineCap = 'round';
if (this.isEraserMode) {
//橡皮擦模式
this.context.clearRect(this.x, this.y, 20, 20);
}
console.log('gyf Down');
}
if (event.type === TouchType.Up) {
this.eventType = 'Up';
this.drawing = false;
console.log('gyf Up!');
this.context.closePath();
}
if (event.type === TouchType.Move) {
if (!this.drawing) return;
this.eventType = 'Move';
console.log('gyf Move');
if (this.isEraserMode) {
//橡皮擦模式
this.context.clearRect(event.touches[0].x, event.touches[0].y, 20, 20);
} else {
this.context.lineWidth = this.lineWidth;
this.context.strokeStyle = this.color;
this.context.moveTo(this.x, this.y);
this.x = event.touches[0].x;
this.y = event.touches[0].y;
this.context.lineTo(this.x, this.y);
this.context.stroke();
}
}
})
}.width('100%').height('75%')3. Doodle Page - Layout of the brush settings area
Column() {
Row() {
Text('粗细：')
Button('小').onClick(() => {
//设置画笔的宽度
this.lineWidth = 5;
this.context.lineWidth = this.lineWidth;
this.isEraserMode = false;
console.log('gyf small button');
}).margin($r('app.float.wh_value_10'))
Button('中').onClick(() => {
//设置画笔的宽度
this.lineWidth = 15;
this.context.lineWidth = this.lineWidth;
this.isEraserMode = false;
console.log('gyf middle button');
}).margin($r('app.float.wh_value_10'))
Button('大').onClick(() => {
//设置画笔的宽度
this.lineWidth = 25;
this.context.lineWidth = this.lineWidth;
this.isEraserMode = false;
console.log('gyf big button');
}).margin($r('app.float.wh_value_10'))
Button('超大').onClick(() => {
//设置画笔的宽度
this.lineWidth = 40;
this.context.lineWidth = this.lineWidth;
this.isEraserMode = false;
console.log('gyf super big button');
})
}.padding($r('app.float.wh_value_10')).margin($r('app.float.wh_value_5'))
//画笔颜色
Scroll() {
Row() {
Text('颜色：')
Button(' ', { type: ButtonType.Circle })
.onClick(() => {
//黑色
this.color = '#000000';
this.context.strokeStyle = this.color;
this.isEraserMode = false;
console.log('gyf black button');
})
.backgroundColor('#000000')
.width('40vp')
.width('40vp')
.margin($r('app.float.wh_value_10'))
Button(' ', { type: ButtonType.Circle })
.onClick(() => {
//红色
this.color = '#FF0000';
this.context.strokeStyle = this.color;
this.isEraserMode = false;
console.log('gyf red button');
})
.backgroundColor('#FF0000')
.width('40vp')
.width('40vp')
.margin($r('app.float.wh_value_10'))
Button(' ', { type: ButtonType.Circle })
.onClick(() => {
//绿色
this.color = '#00FF00';
this.context.strokeStyle = this.color;
this.isEraserMode = false;
console.log('gyf green button');
})
.backgroundColor('#00FF00')
.width('40vp')
.width('40vp')
.margin($r('app.float.wh_value_10'))
Button(' ', { type: ButtonType.Circle })
.onClick(() => {
//蓝色
this.color = '#0000FF';
this.context.strokeStyle = this.color;
this.isEraserMode = false;
})
.backgroundColor('#0000FF')
.width('40vp')
.width('40vp')
.margin($r('app.float.wh_value_10'))
Button(' ', { type: ButtonType.Circle })
.onClick(() => {
//棕色
this.color = '#A52A2A';
this.context.strokeStyle = this.color;
this.isEraserMode = false;
})
.backgroundColor('#A52A2A')
.width('40vp')
.width('40vp')
.margin($r('app.float.wh_value_10'))
Button(' ', { type: ButtonType.Circle })
.onClick(() => {
//紫色
this.color = '#800080';
this.context.strokeStyle = this.color;
this.isEraserMode = false;
})
.backgroundColor('#800080')
.width('40vp')
.width('40vp')
.margin($r('app.float.wh_value_10'))
Button(' ', { type: ButtonType.Circle })
.onClick(() => {
//紫红色
this.color = '#FF00FF';
this.context.strokeStyle = this.color;
this.isEraserMode = false;
})
.backgroundColor('#FF00FF')
.width('40vp')
.width('40vp')
.margin($r('app.float.wh_value_10'))
Button(' ', { type: ButtonType.Circle })
.onClick(() => {
//深蓝色
this.color = '#00008B';
this.context.strokeStyle = this.color;
this.isEraserMode = false;
})
.backgroundColor('#00008B')
.width('40vp')
.width('40vp')
.margin($r('app.float.wh_value_10'))
Button(' ', { type: ButtonType.Circle })
.onClick(() => {
//深天蓝
this.color = '#00BFFF';
this.context.strokeStyle = this.color;
this.isEraserMode = false;
})
.backgroundColor('#00BFFF')
.width('40vp')
.width('40vp')
.margin($r('app.float.wh_value_10'))
Button(' ', { type: ButtonType.Circle })
.onClick(() => {
//绿色
this.color = '#008000';
this.context.strokeStyle = this.color;
this.isEraserMode = false;
})
.backgroundColor('#008000')
.width('40vp')
.width('40vp')
.margin($r('app.float.wh_value_10'))
Button(' ', { type: ButtonType.Circle })
.onClick(() => {
//青绿色
this.color = '#32CD32';
this.context.strokeStyle = this.color;
this.isEraserMode = false;
})
.backgroundColor('#32CD32')
.width('40vp')
.width('40vp')
.margin($r('app.float.wh_value_10'))
Button(' ', { type: ButtonType.Circle })
.onClick(() => {
//橙色
this.color = '#FFA500';
this.context.strokeStyle = this.color;
this.isEraserMode = false;
})
.backgroundColor('#FFA500')
.width('40vp')
.width('40vp')
.margin($r('app.float.wh_value_10'))
Button(' ', { type: ButtonType.Circle })
.onClick(() => {
//黄色
this.color = '#FFFF00';
this.context.strokeStyle = this.color;
this.isEraserMode = false;
})
.backgroundColor('#FFFF00')
.width('40vp')
.width('40vp')
.margin($r('app.float.wh_value_10'))
}.padding('10vp')
}
.scrollable(ScrollDirection.Horizontal) // 设置滚动条水平方向滚动
.margin($r('app.float.wh_value_5'))
Row() {
Image('/common/images/eraser.png')
.onClick(() => {
//橡皮擦模式
this.isEraserMode = true;
console.log('gyf eraser button');
})
.width('50vp')
.height('50vp')
.margin('10vp')
Button('清理画板').onClick(() => {
this.context.clearRect(0, 0, 1000, 1000);
})
}
.margin($r('app.float.wh_value_5'))
}
.width('100%')
.height('25%')
.alignItems(HorizontalAlign.Start)3. Logic code
The logic code exists in the onTouch event of Canvas, and the actions of starting, moving and ending are judged by Down, Up, and Move of TouchType. A complete drawing includes one Down and Up, including several Moves. The eraser mode implements the erasing function through the clearRect interface.
.onTouch((event) => {
if (event.type === TouchType.Down) {
this.eventType = 'Down';
this.drawing = true;
[this.x, this.y] = [event.touches[0].x, event.touches[0].y];
this.context.beginPath();
this.context.lineCap = 'round';
if (this.isEraserMode) {
//橡皮擦模式
this.context.clearRect(this.x, this.y, 20, 20);
}
console.log('gyf Down');
}
if (event.type === TouchType.Up) {
this.eventType = 'Up';
this.drawing = false;
console.log('gyf Up!');
this.context.closePath();
}
if (event.type === TouchType.Move) {
if (!this.drawing) return;
this.eventType = 'Move';
console.log('gyf Move');
if (this.isEraserMode) {
//橡皮擦模式
this.context.clearRect(event.touches[0].x, event.touches[0].y, 20, 20);
} else {
this.context.lineWidth = this.lineWidth;
this.context.strokeStyle = this.color;
this.context.moveTo(this.x, this.y);
this.x = event.touches[0].x;
this.y = event.touches[0].y;
this.context.lineTo(this.x, this.y);
this.context.stroke();
}
}
})Summarize
This article introduces how to use the Canvas component provided by the ArkUI framework to implement the graffiti function. First, track Down, Move and Up events through the onTouch event of Canvas, then set the relevant properties of CanvasRenderingContext2D and call the relevant methods, and finally realize the function of graffiti. In addition to the graffiti samples shared in this article, developers can also implement more interesting and high-performance samples by extending other related properties and methods.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。