Skip to content

Commit c206b15

Browse files
damengbuxingdamengbuxing
authored
feature(canvasdrawer) (ibestservices#46)
Co-authored-by: damengbuxing <>
1 parent 212ffaa commit c206b15

31 files changed

Lines changed: 1086 additions & 263 deletions

‎.github/workflows/static.yml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ name: Deploy static content to Pages
44
on:
55
# Runs on pushes targeting the default branch
66
push:
7-
branches: ["swipeCell"]
7+
branches: ["master"]
88

99
# Allows you to run this workflow manually from the Actions tab
1010
workflow_dispatch:
1111

1212
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
1313
permissions:
14-
contents: read
15-
pages: write
16-
id-token: write
14+
contents: "read"
15+
pages: "write"
16+
id-token: "write"
1717

1818
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
1919
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,11 @@ OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装 OpenHarmon
8282
| SideBar 侧边导航 | 垂直展示的导航栏，用于在不同的内容区域之间进行切换。 | <a href="https://ibestui.ibestservices.com/components/sideBar/" target="__blank">文档</a> |
8383
| Tab 标签页 | 选项卡组件，用于在不同的内容区域之间进行切换。 | <a href="https://ibestui.ibestservices.com/components/tab/" target="__blank">文档</a> |
8484

85+
### 业务组件
86+
| 组件 | 介绍 | |
87+
|:------------------|:----------------|:---------------------------------------------------------------------------------------------|
88+
| CanvasDrawer 画布绘制 | 用于绘制海报、图片加水印等场景 | <a href="https://ibestui.ibestservices.com/components/canvasDrawer/" target="__blank">文档</a> |
89+
8590
## 需要权限
8691
无
8792

@@ -92,7 +97,6 @@ https://ibestui.ibestservices.com/
9297

9398

9499
## 仓库地址
95-
https://gitee.com/ibestservices/ibest-ui
96100

97101
https://github.com/ibestservices/ibest-ui
98102

‎build-profile.json5‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
// "signAlg": "SHA256withECDSA",
1414
// "storeFile": "/Users/damengbuxing/Desktop/IBest-UI应用文件/ibest_ui_p12.p12"
1515
// }
16-
// }
16+
// },
1717
{
1818
"name": "default",
1919
"type": "HarmonyOS",

‎entry/src/main/ets/pages/Badge.ets‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ struct BadgePage {
7878
this.badgeContent()
7979
}
8080
}
81+
.width(CONTAINER_SIZE.FULL)
8182
.padding({ right: SPACE.SM, top: SPACE.SM, bottom: SPACE.SM })
8283
}
8384
}

‎entry/src/main/ets/pages/CanvasDrawer.ets‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
import router from '@ohos.router';
2+
import { IBestCanvasDrawer, IBestNavBar, IBestCanvasContent, IBestUploader,
3+
IBestUploaderFile,
4+
IBestButton} from '@ibestservices/ibest-ui';
5+
import { CONTAINER_SIZE, modeColor, SPACE } from '../assets/styles/BaseStyle';
6+
import ComponentShowContainer from '../components/ComponentShowContainer';
7+
import { ComponentRouterParams } from '../assets/global.type';
8+
9+
@Entry
10+
@Component
11+
struct CanvasDrawerPage {
12+
@State title: string = (router.getParams() as ComponentRouterParams).title || ''
13+
@State canvasWidth: number = 360
14+
@State canvasHeight: number = 200
15+
@State contentList: IBestCanvasContent[] = [
16+
{ type: "text", text: $r("app.string.app_name"), left: 20, top: 10 },
17+
{ type: "text", text: "今人不见古时月", left: 120, top: 10 },
18+
{ type: "image", url: "https://res1.vmallres.com/pimages/FssCdnProxy/vmall_product_uom/pmsSalesFile/800_800_6DEFA8E52CD749385860692A24DA15B9.png", width: 100, height: 100, left: 20, top: 50 },
19+
{ type: "image", url: $r("app.media.app_icon"), width: 50, height: 50, left: 170, top: 50 }
20+
]
21+
@State contentList1: IBestCanvasContent[] = [
22+
{ type: "image", url: "https://img1.baidu.com/it/u=3367326055,3107318562&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", width: 100, height: 100, left: 20, top: 20, borderRadius: 50 },
23+
{ type: "image", url: "https://img1.baidu.com/it/u=1371594408,1235079511&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=539", right: 50, top: 30, width: 112, height: 120, deg: 45, borderRadius: 20 }
24+
]
25+
@State contentList2: IBestCanvasContent[] = []
26+
@State contentList3: IBestCanvasContent[] = [
27+
{ type: "text", text: $r("app.string.app_name"), fontSize: 20, left: 20, top: 10 },
28+
{ type: "text", text: "IBest-UI", fontColor: "red", left: 120, top: 10 },
29+
{ type: "text", text: "今人不见古时月, 今月曾经照古人", textDecoration: "underline", width: 150, maxLineNumber: 2, left: 20, top:40 },
30+
{ type: "text", text: "今人不见古时月, 今月曾经照古人", textDecoration: "lineThrough", lineHeight: 24, width: 150, maxLineNumber: 2, textAlign: "center", left: 20, top: 90 },
31+
{ type: "text", text: "今人不见古时月, 今月曾经照古人", fontWeight: "bold", width: 150, maxLineNumber: 2, textAlign: "right", right: 20, top: 130 }
32+
]
33+
@State canvasShow: boolean = false
34+
@State pixelMap: PixelMap | null = null
35+
@State canvasShow1: boolean = false
36+
@State pixelMap1: PixelMap | null = null
37+
@State canvasShow2: boolean = false
38+
@State pixelMap2: PixelMap | null = null
39+
@State canvasShow3: boolean = false
40+
@State pixelMap3: PixelMap | null = null
41+
@State canvasShow4: boolean = false
42+
@State pixelMap4: PixelMap | null = null
43+
@State canvasShow5: boolean = false
44+
@State imgList: IBestUploaderFile[] = []
45+
@State pixelMap5: PixelMap | null = null
46+
@State canvasShow6: boolean = false
47+
@State pixelMap6: PixelMap | null = null
48+
49+
aboutToAppear() {
50+
this.canvasShow = true
51+
this.canvasShow1 = true
52+
this.canvasShow2 = true
53+
this.canvasShow3 = true
54+
this.canvasShow4 = true
55+
this.canvasShow6 = true
56+
}
57+
58+
build() {
59+
Column() {
60+
IBestNavBar({
61+
title: this.title,
62+
isShowStatusBar: true,
63+
onLeftClick: () => {
64+
router.back()
65+
}
66+
})
67+
List() {
68+
ListItem() {
69+
ComponentShowContainer({ title: '基础用法' }) {
70+
Image(this.pixelMap)
71+
.width(this.canvasWidth)
72+
.height(160)
73+
}
74+
}
75+
ListItem() {
76+
ComponentShowContainer({ title: '自定义背景' }) {
77+
Column({space: SPACE.XS}){
78+
Image(this.pixelMap1)
79+
.width(this.canvasWidth)
80+
.height(100)
81+
Image(this.pixelMap2)
82+
.width(this.canvasWidth)
83+
.height(100)
84+
Image(this.pixelMap3)
85+
.width(this.canvasWidth)
86+
.height(100)
87+
}
88+
}
89+
}
90+
ListItem() {
91+
ComponentShowContainer({ title: '图片样式' }) {
92+
Column({space: SPACE.XS}){
93+
Image(this.pixelMap4)
94+
.width(this.canvasWidth)
95+
.height(this.canvasHeight)
96+
if(this.pixelMap5){
97+
Image(this.pixelMap5)
98+
.width(this.canvasWidth)
99+
.height(this.canvasHeight)
100+
}
101+
if(!this.imgList.length){
102+
Row(){
103+
IBestUploader({
104+
fileList: $imgList,
105+
max: 1,
106+
onChange: (fileList: IBestUploaderFile[]) => {
107+
this.contentList2 = [
108+
{type: "image", url: fileList[0].previewUri, width: 100, height: 120, left: 20, top: 20},
109+
{type: "text", text: $r("app.string.app_name"), left: 70, top: 80, fontColor: "#ed4040"}
110+
]
111+
this.canvasShow5 = true
112+
}
113+
})
114+
}.padding(SPACE.XS).backgroundColor(modeColor.bg2)
115+
}else{
116+
IBestButton({
117+
text: "重选",
118+
type: "primary",
119+
onClickBtn: () => {
120+
this.imgList = []
121+
this.pixelMap5 = null
122+
}
123+
})
124+
}
125+
}
126+
}
127+
}
128+
ListItem() {
129+
ComponentShowContainer({ title: '文字样式' }) {
130+
Image(this.pixelMap6)
131+
.width(this.canvasWidth)
132+
.height(this.canvasHeight)
133+
}
134+
}
135+
}
136+
.layoutWeight(1)
137+
.padding({ left: SPACE.SM, right: SPACE.SM, bottom: SPACE.SM })
138+
if(this.canvasShow){
139+
IBestCanvasDrawer({
140+
canvasWidth: this.canvasWidth,
141+
canvasHeight: 160,
142+
contentList: this.contentList,
143+
onDrawFinish: pixelMap => {
144+
this.pixelMap = pixelMap
145+
this.canvasShow = false
146+
}
147+
})
148+
}
149+
if(this.canvasShow1){
150+
IBestCanvasDrawer({
151+
canvasWidth: this.canvasWidth,
152+
canvasHeight: 100,
153+
canvasBgColor: "#1989fa",
154+
onDrawFinish: pixelMap => {
155+
this.pixelMap1 = pixelMap
156+
this.canvasShow1 = false
157+
}
158+
})
159+
}
160+
if(this.canvasShow2){
161+
IBestCanvasDrawer({
162+
canvasWidth: this.canvasWidth,
163+
canvasHeight: 100,
164+
canvasBgImg: "https://img0.baidu.com/it/u=295003109,130135700&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
165+
onDrawFinish: pixelMap => {
166+
this.pixelMap2 = pixelMap
167+
this.canvasShow2 = false
168+
}
169+
})
170+
}
171+
if(this.canvasShow3){
172+
IBestCanvasDrawer({
173+
canvasWidth: this.canvasWidth,
174+
canvasHeight: 100,
175+
linerGradient: {
176+
angle: 128,
177+
colors: [["rgba(69,123,180,1)", 0], ["rgba(152,174,199,1)", 0.7]]
178+
},
179+
onDrawFinish: pixelMap => {
180+
this.pixelMap3 = pixelMap
181+
this.canvasShow3 = false
182+
}
183+
})
184+
}
185+
if(this.canvasShow4){
186+
IBestCanvasDrawer({
187+
canvasWidth: this.canvasWidth,
188+
canvasHeight: this.canvasHeight,
189+
contentList: this.contentList1,
190+
onDrawFinish: pixelMap => {
191+
this.pixelMap4 = pixelMap
192+
this.canvasShow4 = false
193+
}
194+
})
195+
}
196+
if(this.canvasShow5){
197+
IBestCanvasDrawer({
198+
canvasWidth: this.canvasWidth,
199+
canvasHeight: this.canvasHeight,
200+
contentList: this.contentList2,
201+
onDrawFinish: pixelMap => {
202+
this.pixelMap5 = pixelMap
203+
this.canvasShow5 = false
204+
}
205+
})
206+
}
207+
if(this.canvasShow6){
208+
IBestCanvasDrawer({
209+
canvasWidth: this.canvasWidth,
210+
canvasHeight: this.canvasHeight,
211+
contentList: this.contentList3,
212+
onDrawFinish: pixelMap => {
213+
this.pixelMap6 = pixelMap
214+
this.canvasShow6 = false
215+
}
216+
})
217+
}
218+
}
219+
.width(CONTAINER_SIZE.FULL)
220+
.height(CONTAINER_SIZE.FULL)
221+
.backgroundColor(modeColor.bg)
222+
}
223+
}

‎entry/src/main/ets/pages/CircleProgress.ets‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { LengthMetrics } from '@kit.ArkUI';
99
@Component
1010
struct CircleProgressPage {
1111
@State title: string = (router.getParams() as ComponentRouterParams).title || ''
12-
@State value: number = 20
12+
@State value: number = 10
1313

1414
build() {
1515
Column() {
@@ -24,7 +24,7 @@ struct CircleProgressPage {
2424
ListItem() {
2525
ComponentShowContainer({ title: '基础用法' }) {
2626
IBestCircleProgress({
27-
value: this.value,
27+
value: $value,
2828
text: `${this.value}%`
2929
})
3030
}
@@ -34,24 +34,24 @@ struct CircleProgressPage {
3434
Column(){
3535
Flex({wrap: FlexWrap.Wrap, space: { main: LengthMetrics.vp(20), cross: LengthMetrics.vp(20) }}){
3636
IBestCircleProgress({
37-
value: this.value,
37+
value: $value,
3838
strokeWidth: 6,
3939
text: "宽度定制"
4040
})
4141
IBestCircleProgress({
42-
value: this.value,
42+
value: $value,
4343
color: "#ee0a24",
4444
bgColor: "#ebedf0",
4545
text: "颜色定制"
4646
})
4747
IBestCircleProgress({
48-
value: this.value,
48+
value: $value,
4949
clockwise: false,
5050
text: "逆时针",
5151
color: "#07c160"
5252
})
5353
IBestCircleProgress({
54-
value: this.value,
54+
value: $value,
5555
diameter: 120,
5656
clockwise: false,
5757
text: "大小定制",
@@ -64,15 +64,15 @@ struct CircleProgressPage {
6464
type: "primary",
6565
buttonSize: "small",
6666
onClickBtn: () => {
67-
this.value = this.value < 100 ? this.value + 10 : 100
67+
this.value += 10
6868
}
6969
})
7070
IBestButton({
7171
text: "减少",
7272
type: "danger",
7373
buttonSize: "small",
7474
onClickBtn: () => {
75-
this.value = this.value > 0 ? this.value - 10 : 0
75+
this.value -= 10
7676
}
7777
})
7878
}
@@ -83,34 +83,34 @@ struct CircleProgressPage {
8383
ComponentShowContainer({ title: '起始位置' }) {
8484
Flex({wrap: FlexWrap.Wrap, space: { main: LengthMetrics.vp(20), cross: LengthMetrics.vp(20) }}){
8585
IBestCircleProgress({
86-
value: this.value,
86+
value: $value,
8787
startPosition: "left",
8888
text: "左侧"
8989
})
9090
IBestCircleProgress({
91-
value: this.value,
91+
value: $value,
9292
startPosition: "right",
9393
text: "右侧"
9494
})
9595
IBestCircleProgress({
96-
value: this.value,
96+
value: $value,
9797
startPosition: "bottom",
9898
text: "底部"
9999
})
100100
IBestCircleProgress({
101-
value: this.value,
101+
value: $value,
102102
startPosition: "left",
103103
clockwise: false,
104104
text: "左侧逆时针"
105105
})
106106
IBestCircleProgress({
107-
value: this.value,
107+
value: $value,
108108
startPosition: "right",
109109
clockwise: false,
110110
text: "右侧逆时针"
111111
})
112112
IBestCircleProgress({
113-
value: this.value,
113+
value: $value,
114114
startPosition: "bottom",
115115
clockwise: false,
116116
text: "底部逆时针"

0 commit comments

Comments
 (0)