diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/BlurStyle.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/BlurStyle.ets index a5ffed021de114836df61cddb6abc10436e4e259..87a8341300377a4c4b42c136bdf7675130d17cfc 100644 --- a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/BlurStyle.ets +++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/BlurStyle.ets @@ -27,6 +27,14 @@ struct BlurStyle1 { .backgroundBlurStyle(BlurStyle.BACKGROUND_THICK) Text("BlurStyle.BACKGROUND_ULTRA_THICK").margin(5).id("BACKGROUND_ULTRA_THICK") .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK) + Column({ space: 100 }) { + // 绘制一个直径为150的圆,默认填充色为黑色 + Circle({ width: 150, height: 200 }) + // 绘制一个直径为150的圆， + Circle({ width: 150, height: 200 }) + .backgroundColor(Color.White) + .foregroundColor(ColoringStrategy.INVERT) + }.width('100%').backgroundColor(Color.Blue) }.width('90%').height("90%") } } \ No newline at end of file diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/CanvasRenderer.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/CanvasRenderer.ets index d58373a2e31915139557944c282af9b6e8c5da3e..d9840aa95bd1fbac4ce19c013f86d7e5814a2878 100644 --- a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/CanvasRenderer.ets +++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/CanvasRenderer.ets @@ -16,22 +16,54 @@ @Entry @Component struct CanvasRenderer1 { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) + private img:ImageBitmap = new ImageBitmap("resource/media/icon.png"); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) -// .imageSmooththingQuality(ImageSmooththingQuality.high) .width('100%') .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - this.offCanvas var offContext = this.offCanvas.getContext("2d", this.settings) - offContext.fillStyle = 0x0000FF - offContext.fillRect(20, 20, 150, 100) + let offctx = offContext + offctx.imageSmoothingEnabled = true + offctx.imageSmoothingQuality = 'high' + offctx.drawImage(this.img, 0, 0, 400, 200) + + var image = this.offCanvas.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var offContext = this.offCanvas.getContext("2d", this.settings) + let offctx = offContext + offctx.imageSmoothingEnabled = true + offctx.imageSmoothingQuality = 'medium' + offctx.drawImage(this.img, 0, 300, 400, 500) + + var image = this.offCanvas.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var offContext = this.offCanvas.getContext("2d", this.settings) + let offctx = offContext + offctx.imageSmoothingEnabled = true + offctx.imageSmoothingQuality = 'low' + offctx.drawImage(this.img, 0, 600, 400, 800) + var image = this.offCanvas.transferToImageBitmap() this.context.transferFromImageBitmap(image) }) diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ClickMouseTouchEvent.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ClickMouseTouchEvent.ets index 4d9dab8d70be245cf098a51bb24a16c0543f479e..cd9d61b864f0c0e14ade2c578192b871a58fd39a 100644 --- a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ClickMouseTouchEvent.ets +++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ClickMouseTouchEvent.ets @@ -12,6 +12,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +function Rect1(x, y, z){ + return {width: x, height: y, radios: z} +} @Entry @Component @@ -24,12 +27,14 @@ struct ClickExample { build() { Column() { + Rect(Rect1(200, 80, 1)).margin(10) + Text(this.displayX).id("displayX") Text(this.displayY).id("displayY") Text(this.windowX).id("windowX") Text(this.windowY).id("windowY") - Text(this.intentionCode).id("intentionCode") + Row({ space: 20 }) { Button('Click').width(100).height(40).id("Button_click") .onClick((event: ClickEvent) => { diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/DragEvent.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/DragEvent.ets index 998a0d9efacf0daae37929708ee1fc623b6b6991..4c610d7c1dc786106bc4b3f5c9a206501da78038 100644 --- a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/DragEvent.ets +++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/DragEvent.ets @@ -12,9 +12,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import dragController from "@ohos.arkui.dragController" +import UDMF from '@ohos.data.UDMF' +import promptAction from '@ohos.promptAction'; -import promptAction from '@ohos.promptAction'; @Entry @Component struct DragEvent { @@ -31,6 +33,14 @@ struct DragEvent { @State useCustomDropAnimation1: string = "useCustomDropAnimation"; @State imgState: Visibility = Visibility.Visible; + @Builder DraggingBuilder() { + Column() { + Text("DraggingBuilder") + } + .width(100) + .height(100) + .backgroundColor(Color.Blue) + } build() { Row() { @@ -38,6 +48,7 @@ struct DragEvent { Text(this.dragBehavior).id("dragBehavior").margin(5) Text(this.dragRet).id("dragRet").margin(5) Text(this.useCustomDropAnimation1).id("useCustomDropAnimation").margin(5) + Image($r('app.media.icon')).margin(5) .width(100) .height(100) @@ -45,7 +56,9 @@ struct DragEvent { .margin({left: 15}) .visibility(this.imgState) .onDragStart((event)=>{ + event.dragBehavior = DragBehavior.COPY event.setResult(DragRet.DRAG_SUCCESS); + }) .onDragEnd((event)=>{ event.dragBehavior = DragBehavior.MOVE @@ -63,9 +76,31 @@ struct DragEvent { promptAction.showToast({duration: 100, message: 'Drag Canceled'}); } else if (event.getResult() === DragRet.DROP_DISABLED) { promptAction.showToast({duration: 100, message: 'Drop Disabled'}); + }else if (event.getResult() === DragRet.DROP_ENABLED) { + promptAction.showToast({duration: 100, message: 'Drop Enabled'}); } this.dragRet = event.getResult().toString() }) + + Button('touch to execute drag') + .onTouch((event) => { + if (event.type == TouchType.Down) { + let text = new UDMF.Text() + let unifiedData = new UDMF.UnifiedData(text) + let dragInfo: dragController.DragInfo = { + pointerId: 0, + data: unifiedData, + extraParams: '' + } + dragController.executeDrag(this.DraggingBuilder.bind(this), dragInfo, (err, {event, extraParams}) => { + if (event.getResult() == DragRet.DRAG_SUCCESS) { + // ... + } else if (event.getResult() == DragRet.DRAG_FAILED) { + // ... + } + }) + } + }) }.width('90%') .height('100%') .margin({left: '5%'}) diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/EntryOptions.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/EntryOptions.ets index 374eba75590bc42c1d1fe05763549a647430116b..da284576a84f2e4640b8dbe40234c5ee040c0f4e 100644 --- a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/EntryOptions.ets +++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/EntryOptions.ets @@ -14,8 +14,9 @@ */ +@Entry({ routeName : 'ApiRect' }) @Component -struct HelloComponent { +struct MyComponent { @State message: string = 'Hello, World!'; build() { @@ -28,18 +29,4 @@ struct HelloComponent { }) } } -} - - -@Entry -@Component -struct myPage { - build() { - Column() { - Text('ArkUI message') - HelloComponent({ message: 'Hello, World!' }); - Divider() - HelloComponent({ message: '你好!' }); - } - } } \ No newline at end of file diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ModalTransition.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ModalTransition.ets index 2c5c12b6c403b90a42d43780cf47ef5ea5516540..6f0169d567d8bbc1df7c61ee1128e9caac3d874c 100644 --- a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ModalTransition.ets +++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ModalTransition.ets @@ -15,7 +15,7 @@ @Entry @Component -struct ModalTransition1 { +struct ModalTransitionExample { @State isShow:boolean = false @State isShow2:boolean = false @@ -41,7 +41,7 @@ struct ModalTransition1 { .fontSize(20) .onClick(()=>{ this.isShow2 = true; - }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Gray, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}}) + }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Gray, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}}) Button("close modal 1") .margin(10) @@ -64,6 +64,14 @@ struct ModalTransition1 { .fontSize(20) .margin(10) .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}}) + + Button("transition modal 3") + .onClick(() => { + this.isShow = true + }) + .fontSize(20) + .margin(10) + .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.DEFAULT, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}}) } .justifyContent(FlexAlign.Center) .backgroundColor(Color.White) diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/TransitionEffect.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/TransitionEffect.ets index 3ab9306e1ac989cd2530137a63a7a775f82d12d5..31cfa771e18080381e397ae2f1a4417c5729909b 100644 --- a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/TransitionEffect.ets +++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/TransitionEffect.ets @@ -43,22 +43,19 @@ struct TransitionEffectExample1 { }else{ Image($r('app.media.icon')).width(200).height(200) .transition(TransitionEffect.IDENTITY - .animation({ duration: 2000, curve: Curve.Ease }).combine( TransitionEffect.rotate({ z: 1, centerZ: 1, angle: 180 }) )) } Image($r('app.media.icon')).width(200).height(200) .transition( - TransitionEffect.SLIDE - .animation({ duration: 2000, curve: Curve.Ease }) - .combine( - TransitionEffect.rotate({ z: 1, centerZ: 1, angle: 180 }) + TransitionEffect.asymmetric( + TransitionEffect.rotate({ z: 1, centerZ: 1, angle: 180 }), + TransitionEffect.rotate({ z: 1, centerZ: 1, angle: 90 }) ) -// .asymmetric({ -// appear: TransitionEffect, -// disappear: TransitionEffect }) ) + Image($r('app.media.icon')).width(200).height(200) + .transition(TransitionEffect.SLIDE_SWITCH) }.width('100%') } } \ No newline at end of file