diff --git a/ArkUI/entry/src/main/ets/Images/startIcon.png b/ArkUI/entry/src/main/ets/Images/startIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..205ad8b5a8a42e8762fbe4899b8e5e31ce822b8b Binary files /dev/null and b/ArkUI/entry/src/main/ets/Images/startIcon.png differ diff --git a/ArkUI/entry/src/main/ets/pages/MosaicEffect.ets b/ArkUI/entry/src/main/ets/pages/MosaicEffect.ets new file mode 100644 index 0000000000000000000000000000000000000000..26c98153fde0fc6e3efc733cf4ebc0d3bab1d30e --- /dev/null +++ b/ArkUI/entry/src/main/ets/pages/MosaicEffect.ets @@ -0,0 +1,88 @@ +/* +* Copyright (c) 2024 Huawei Device Co., Ltd. +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* +* FAQ: 如何实现马赛克效果 +*/ + +import { DrawPathType, DrawViewModel } from '../viewmodel/DrawViewModel'; + +@Component +export struct DrawView { + @ObjectLink viewModel: DrawViewModel; + + build() { + Column({ space: 8 }) { + Text('请选择画笔类型') + .fontColor(Color.Red) + .textAlign(TextAlign.Center) + .fontSize(30) + .width('80%') + .margin('10%') + + Canvas(this.viewModel.context) + .width('100%') + .height('75%') + .onAreaChange((oldValue: Area, newValue: Area) => { + this.viewModel.canvasAreaChange(newValue); + }) + .gesture( + GestureGroup(GestureMode.Exclusive, + PanGesture() + .onActionStart((event: GestureEvent) => { + let finger: FingerInfo = event.fingerList[0]; + if (finger == undefined) { + return; + } + let x = finger.localX; + let y = finger.localY; + this.viewModel.moveStart(x, y); + }) + .onActionUpdate((event: GestureEvent) => { + let finger: FingerInfo = event.fingerList[0]; + if (finger == undefined) { + return; + } + let x = finger.localX; + let y = finger.localY; + this.viewModel.moveUpdate(x, y); + }) + .onActionEnd((event: GestureEvent) => { + let finger: FingerInfo = event.fingerList[0]; + if (finger == undefined) { + return; + } + this.viewModel.moveEnd(); + }) + ) + ) + + Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) { + Button('普通画笔') + .onClick(() => { + this.viewModel.drawModel.pathType = DrawPathType.pen; + }) + Button('马赛克画笔') + .onClick(() => { + this.viewModel.drawModel.pathType = DrawPathType.pattern; + }) + Button('清除内容') + .onClick(() => { + this.viewModel.clearPath(); + }) + } + } + } +} \ No newline at end of file diff --git a/ArkUI/entry/src/main/ets/pages/MosaicEffectIndex.ets b/ArkUI/entry/src/main/ets/pages/MosaicEffectIndex.ets new file mode 100644 index 0000000000000000000000000000000000000000..0002647b392ee37c6aeeb8b63a7d832ce3138384 --- /dev/null +++ b/ArkUI/entry/src/main/ets/pages/MosaicEffectIndex.ets @@ -0,0 +1,40 @@ +/* +* Copyright (c) 2024 Huawei Device Co., Ltd. +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* +* FAQ: 如何实现马赛克效果 +*/ + +import { DrawView } from './MosaicEffect'; +import { DrawViewModel } from '../viewmodel/DrawViewModel'; + +@Entry +@Component +struct Index { + @State viewModel: DrawViewModel = new DrawViewModel(); + + build() { + Stack() { + Image($rawfile('test.jpg')) + .objectFit(ImageFit.Fill) + .width('100%') + .height('100%') + + DrawView({ viewModel: this.viewModel }) + .width('100%') + .height('100%') + } + } +} \ No newline at end of file diff --git a/ArkUI/entry/src/main/ets/viewmodel/DrawViewModel.ets b/ArkUI/entry/src/main/ets/viewmodel/DrawViewModel.ets new file mode 100644 index 0000000000000000000000000000000000000000..dc37cd80d219662586163b033737b950d551e70a --- /dev/null +++ b/ArkUI/entry/src/main/ets/viewmodel/DrawViewModel.ets @@ -0,0 +1,96 @@ +/* +* Copyright (c) 2024 Huawei Device Co., Ltd. +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* +* FAQ:如何实现马赛克效果 +*/ + +export class DrawPathPointModel { + x: number = 0; + y: number = 0; +} + +export enum DrawPathType { + pen = 0, // 画笔 + pattern // 马赛克 +} + +// 配置画笔 +export class DrawPathModel { + public pathType: DrawPathType = DrawPathType.pen; + public color: string = '#ED1B1B'; + public lineWidth: number = 8; + public img: ImageBitmap = new ImageBitmap('Images/startIcon.png'); +} + +@Observed +export class DrawViewModel { + public settings: RenderingContextSettings = new RenderingContextSettings(true); + public context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + public drawModel: DrawPathModel = new DrawPathModel(); + public canvasHeight: number = 0; + public canvasWidth: number = 0; + private pattern: CanvasPattern | null = null; + private points: DrawPathPointModel[] = []; + // 绘制路径 + private drawPath = new Path2D(); + + constructor() { + this.pattern = this.context.createPattern(this.drawModel.img, 'repeat'); + } + + moveStart(x: number, y: number) { + this.points.push({ x: x, y: y }); + this.drawPath.moveTo(x, y); + this.drawCurrentPathModel(); + } + + moveUpdate(x: number, y: number) { + let lastPoint = this.points[this.points.length - 1]; + this.points.push({ x: x, y: y }); + this.drawPath.quadraticCurveTo((x + lastPoint.x) / 2, (y + lastPoint.y) / 2, x, y); + this.drawCurrentPathModel(); + } + + moveEnd() { + this.points = []; + this.drawPath = new Path2D(); + } + + clearPath() { + this.points = []; + this.drawPath = new Path2D(); + this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight); + } + + canvasAreaChange(area: Area) { + this.canvasHeight = area.height as number; + this.canvasWidth = area.width as number; + } + + private drawCurrentPathModel() { + this.context.globalCompositeOperation = 'source-over'; + this.context.lineWidth = this.drawModel.lineWidth; + if (this.drawModel.pathType == DrawPathType.pen) { + this.context.strokeStyle = this.drawModel.color; + } else { + if (this.pattern) { + this.context.strokeStyle = this.pattern; + } + } + this.context.lineJoin = 'round'; + this.context.stroke(this.drawPath); + } +} \ No newline at end of file diff --git a/NetworkKit/entry/src/main/ets/pages/SetLongConnect.ets b/NetworkKit/entry/src/main/ets/pages/SetLongConnect.ets index 24b7c2d66584a2a27f8a06c883928c085aeea606..e8efff865825314667a726f642273c10231af979 100644 --- a/NetworkKit/entry/src/main/ets/pages/SetLongConnect.ets +++ b/NetworkKit/entry/src/main/ets/pages/SetLongConnect.ets @@ -19,15 +19,21 @@ // [Start SetLongConnect] import { http } from '@kit.NetworkKit'; -import { BusinessError } from '@kit.BasicServicesKit'; let httpRequest = http.createHttp(); -httpRequest.requestInStream("EXAMPLE_URL", (err: BusinessError, data: number) => { - if (!err) { - console.info("requestInStream OK! ResponseCode is " + JSON.stringify(data)); - } else { - console.error("requestInStream ERROR : err = " + JSON.stringify(err)); - } -}) +// 设置5秒轮询一次 +setTimeout(() => { + httpRequest.request("EXAMPLE_URL", { + method: http.RequestMethod.GET, + connectTimeout: 60000, + readTimeout: 60000 + }, (err, data) => { + if (!err) { + console.info('Received data:', JSON.stringify(data.result)); + } else { + console.info('Polling error:', JSON.stringify(err)); + } + }) +}, 5000) // [End SetLongConnect]