diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/test/image_svg_animate/ImageModifier.test.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/test/image_svg_animate/ImageModifier.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..89bec367c70740e3837877206ba11bc15a88014a --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/test/image_svg_animate/ImageModifier.test.ets @@ -0,0 +1,265 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect, Level } from '@ohos/hypium' +import Settings from '../model/Settings' +import windowSnap from '../model/snapShot' +import Logger from '../model/Logger' +import Utils from '../model/Utils' +import { Driver, ON, Component } from '@kit.TestKit'; +import { BusinessError } from '@kit.BasicServicesKit' + +export default function ImageModifierTest () { + + describe('ImageModifierTest', () => { + afterEach(async (done: Function) => { + if (Settings.windowClass == undefined) { + return + } + + Settings.windowClass.destroyWindow((err:BusinessError) => { + if (err.code) { + Logger.error('TEST', `Failed to destroy the window. Cause : ${JSON.stringify(err)}`) + return; + } + Logger.info('TEST', `Succeeded in destroy the window.`); + }) + await Utils.sleep(1000); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0020 + * @tc.name : Image with modifier + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0020', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0020 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageModifier/imageModifier01") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0020 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0023 + * @tc.name : Image with modifier + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0023', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0023 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageModifier/imageModifier02") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0023 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0032 + * @tc.name : Image with modifier + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0032', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0032 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageModifier/imageModifier03") + let driver:Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id('imageModifier04'), 1000); + await button.click(); + await driver.waitForIdle(500,2000); + windowSnap.snapShot() + await Utils.sleep(1000) + await button.click(); + await driver.waitForIdle(500,2000); + windowSnap.snapShot() + await Utils.sleep(1000) + await button.click(); + await driver.waitForIdle(500,2000); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0032 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0033 + * @tc.name : Image with modifier + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0033', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0033 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageModifier/imageModifier04") + let driver:Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id('imageModifier04'), 1000); + await button.click(); + await driver.waitForIdle(500,2000); + windowSnap.snapShot() + await Utils.sleep(1000) + await button.click(); + await driver.waitForIdle(500,2000); + windowSnap.snapShot() + await Utils.sleep(1000) + await button.click(); + await driver.waitForIdle(500,2000); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0033 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0034 + * @tc.name : Image with modifier + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0034', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0034 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageModifier/imageModifier05") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0034 finish.`); + done() + }) + + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0035 + * @tc.name : Image with modifier + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0035', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0035 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageModifier/imageModifier06") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0035 finish.`); + done() + }) + + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0036 + * @tc.name : Image with modifier + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0036', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0036 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageModifier/imageModifier07") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0036 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0037 + * @tc.name : Image with modifier + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0037', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0037 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageModifier/imageModifier08") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0037 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0051 + * @tc.name : Image with modifier + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0051', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0051 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageModifier/imageModifier09") + let driver:Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id('imageModifier09'), 1000); + await button.click(); + await driver.waitForIdle(500,2000); + windowSnap.snapShot() + await Utils.sleep(1000) + await button.click(); + await driver.waitForIdle(500,2000); + windowSnap.snapShot() + await Utils.sleep(1000) + await button.click(); + await driver.waitForIdle(500,2000); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0051 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0054 + * @tc.name : Image with modifier + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0054', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0054 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageModifier/imageModifier10") + let driver:Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id('imageModifier10'), 1000); + await button.click(); + await driver.waitForIdle(500,2000); + windowSnap.snapShot() + await Utils.sleep(1000) + await button.click(); + await driver.waitForIdle(500,2000); + windowSnap.snapShot() + await Utils.sleep(1000) + await button.click(); + await driver.waitForIdle(500,2000); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_MODIFIER_0054 finish.`); + done() + }) + }) +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/test/image_svg_animate/ImageNetwork.test.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/test/image_svg_animate/ImageNetwork.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..94c7a03ac0275f9f8d2820593a4366edaf69780b --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/test/image_svg_animate/ImageNetwork.test.ets @@ -0,0 +1,79 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect, Level } from '@ohos/hypium' +import Settings from '../model/Settings' +import windowSnap from '../model/snapShot' +import Logger from '../model/Logger' +import Utils from '../model/Utils' +import { Driver, ON, Component } from '@kit.TestKit'; +import { BusinessError } from '@kit.BasicServicesKit' + +export default function ImageNetworkTest() { + + describe('ImageNetworkTest', () => { + afterEach(async (done: Function) => { + if (Settings.windowClass == undefined) { + return + } + + Settings.windowClass.destroyWindow((err:BusinessError) => { + if (err.code) { + Logger.error('TEST', `Failed to destroy the window. Cause : ${JSON.stringify(err)}`) + return; + } + Logger.info('TEST', `Succeeded in destroy the window.`); + }) + await Utils.sleep(1000); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_NETWORKPICTURES_0020 + * @tc.name : + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_NETWORKPICTURES_0020', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_NETWORKPICTURES_0020 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageNetwork/imageNetwork01") + let driver:Driver = Driver.create(); + await driver.waitForIdle(500,2000); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_NETWORKPICTURES_0020 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_NETWORKPICTURES_0040 + * @tc.name : + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_NETWORKPICTURES_0040', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_NETWORKPICTURES_0040 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageNetwork/imageNetwork02") + let driver:Driver = Driver.create(); + await driver.waitForIdle(500,2000); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_NETWORKPICTURES_0040 finish.`); + done() + }) + }) +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/test/image_svg_animate/ImageObjectFit.test.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/test/image_svg_animate/ImageObjectFit.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..841d6ddde659ac8a4f5fcac16f185ef3b4441965 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/test/image_svg_animate/ImageObjectFit.test.ets @@ -0,0 +1,203 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect, Level } from '@ohos/hypium' +import Settings from '../model/Settings' +import windowSnap from '../model/snapShot' +import Logger from '../model/Logger' +import Utils from '../model/Utils' +import { Driver, ON, Component } from '@kit.TestKit'; +import { BusinessError } from '@kit.BasicServicesKit' + +export default function ImageObjectFitTest () { + + describe('ImageObjectFitTest', () => { + afterEach(async (done: Function) => { + if (Settings.windowClass == undefined) { + return + } + + Settings.windowClass.destroyWindow((err:BusinessError) => { + if (err.code) { + Logger.error('TEST', `Failed to destroy the window. Cause : ${JSON.stringify(err)}`) + return; + } + Logger.info('TEST', `Succeeded in destroy the window.`); + }) + await Utils.sleep(1000); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0017 + * @tc.name : image test objectFit in PixelMap + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0017', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0017 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageObjectFit/imageObjectFit01") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0017_01') + await Utils.sleep(1000) + let button1: Component = await driver.waitForComponent(ON.id('imageObjectFit01_01'), 1000); + await button1.click(); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0017_02') + await Utils.sleep(1000) + + let button2: Component = await driver.waitForComponent(ON.id('imageObjectFit01_02'), 1000); + await button2.click(); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0017_03') + await Utils.sleep(1000) + + let button3: Component = await driver.waitForComponent(ON.id('imageObjectFit01_03'), 1000); + await button3.click(); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0017_04') + await Utils.sleep(1000) + + let button4: Component = await driver.waitForComponent(ON.id('imageObjectFit01_04'), 1000); + await button4.click(); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0017_05') + await Utils.sleep(1000) + + let button5: Component = await driver.waitForComponent(ON.id('imageObjectFit01_05'), 1000); + await button5.click(); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0017_06') + await Utils.sleep(1000) + + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0017 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0020 + * @tc.name : image test ImageFit.TOP_START + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0020', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0020 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageObjectFit/imageObjectFit02") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0020 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0015 + * @tc.name : image test default ImageFit + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0015', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0015 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageObjectFit/imageObjectFit03") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0015 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0016 + * @tc.name : image test objectFit in PixelMap + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0016', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0016 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageObjectFit/imageObjectFit04") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0016_01') + await Utils.sleep(1000) + let button1: Component = await driver.waitForComponent(ON.id('imageObjectFit04_01'), 1000); + await button1.click(); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0016_02') + await Utils.sleep(1000) + + let button2: Component = await driver.waitForComponent(ON.id('imageObjectFit04_02'), 1000); + await button2.click(); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0016_03') + await Utils.sleep(1000) + + let button3: Component = await driver.waitForComponent(ON.id('imageObjectFit04_03'), 1000); + await button3.click(); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0016_04') + await Utils.sleep(1000) + + let button4: Component = await driver.waitForComponent(ON.id('imageObjectFit04_04'), 1000); + await button4.click(); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0016_05') + await Utils.sleep(1000) + + let button5: Component = await driver.waitForComponent(ON.id('imageObjectFit04_05'), 1000); + await button5.click(); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0016_06') + await Utils.sleep(1000) + + let button6: Component = await driver.waitForComponent(ON.id('imageObjectFit04_06'), 1000); + await button6.click(); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0016_07') + await Utils.sleep(1000) + + let button7: Component = await driver.waitForComponent(ON.id('imageObjectFit04_07'), 1000); + await button7.click(); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0016_08') + await Utils.sleep(1000) + + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0016 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0018 + * @tc.name : image test objectFit with undefined and null + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0018', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0018 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageObjectFit/imageObjectFit05") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0018_01') + await Utils.sleep(1000) + let button1: Component = await driver.waitForComponent(ON.id('imageObjectFit05_01'), 1000); + await button1.click(); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0018_02') + await Utils.sleep(1000) + + let button2: Component = await driver.waitForComponent(ON.id('imageObjectFit05_02'), 1000); + await button2.click(); + windowSnap.snapShot('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0018_03') + await Utils.sleep(1000) + + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_OBJECTFIT_ALIGN_0018 finish.`); + done() + }) + }) +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/test/image_svg_animate/ImageOnComplete.test.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/test/image_svg_animate/ImageOnComplete.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..11a0dca37e653623a81202ea4e815a46b9bf9382 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/test/image_svg_animate/ImageOnComplete.test.ets @@ -0,0 +1,209 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect, Level } from '@ohos/hypium' +import Settings from '../model/Settings' +import windowSnap from '../model/snapShot' +import Logger from '../model/Logger' +import Utils from '../model/Utils' +import { Driver, ON, Component } from '@kit.TestKit'; +import { BusinessError } from '@kit.BasicServicesKit' + +export default function ImageOnCompleteTest () { + + describe('ImageOnCompleteTest', () => { + afterEach(async (done: Function) => { + if (Settings.windowClass == undefined) { + return + } + + Settings.windowClass.destroyWindow((err:BusinessError) => { + if (err.code) { + Logger.error('TEST', `Failed to destroy the window. Cause : ${JSON.stringify(err)}`) + return; + } + Logger.info('TEST', `Succeeded in destroy the window.`); + }) + await Utils.sleep(1000); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0015 + * @tc.name : Image with onComplete + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0015', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0015 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageOnComplete/imageOnComplete01") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + let button: Component = await driver.waitForComponent(ON.id('imageModifier01'), 1000); + await button.click(); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0015 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0018 + * @tc.name : Image with onComplete + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0018', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0018 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageOnComplete/imageOnComplete04") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + let button1: Component = await driver.waitForComponent(ON.id('imageOnComplete04_01'), 1000); + await button1.click(); + windowSnap.snapShot() + await Utils.sleep(1000) + let button2: Component = await driver.waitForComponent(ON.id('imageOnComplete04_02'), 1000); + await button2.click(); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0018 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0019 + * @tc.name : Image with onComplete + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0019', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0019 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageOnComplete/imageOnComplete05") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + windowSnap.snapShot() + await Utils.sleep(1000) + await Settings.changeWindowOrientation('landScape'); + windowSnap.snapShot() + await Utils.sleep(1000) + await Settings.changeWindowOrientation('end'); + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0019 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0020 + * @tc.name : Image with onComplete + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0020', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0020 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageOnComplete/imageOnComplete06") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + windowSnap.snapShot() + await Utils.sleep(1000) + await Settings.changeWindowOrientation('landScape'); + windowSnap.snapShot() + await Utils.sleep(1000) + await Settings.changeWindowOrientation('end'); + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0020 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0024 + * @tc.name : Image with onComplete + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0024', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0024 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageOnComplete/imageOnComplete07") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0024 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0016 + * @tc.name : Image with onComplete + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0016', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0016 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageOnComplete/imageOnComplete08") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0016 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0031 + * @tc.name : Image with onComplete + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0031', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0031 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageOnComplete/imageOnComplete09") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + let button1: Component = await driver.waitForComponent(ON.id('imageOnComplete09_01'), 1000); + await button1.click(); + windowSnap.snapShot() + await Utils.sleep(1000) + let button2: Component = await driver.waitForComponent(ON.id('imageOnComplete09_02'), 1000); + await button2.click(); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_ONCOMPLETE_0031 finish.`); + done() + }) + + /* + * @tc.number : SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_SIZE_0013 + * @tc.name : Image with auto size + * @tc.type : Function + * @tc.size : MediumTest + * @tc.level : 3 + */ + it('SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_SIZE_0013', Level.LEVEL3, async (done: Function) => { + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_SIZE_0013 start.`); + Settings.createWindow("testability/pages/image_svg_animate/imageOnComplete/imageOnComplete10") + let driver:Driver = Driver.create(); + await driver.waitForIdle(200,500); + windowSnap.snapShot() + await Utils.sleep(1000) + Logger.info('TEST', `SUB_ACE_UI_COMPONENT_MEDIA_IMAGE_SIZE_0013 finish.`); + done() + }) + }) +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier01.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier01.ets new file mode 100644 index 0000000000000000000000000000000000000000..d51bb75a116b37a503e98835ded599414a283564 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier01.ets @@ -0,0 +1,86 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { CommonModifier } from "@ohos.arkui.modifier"; + +class CustomModifier extends CommonModifier { + applyNormalAttribute(instance: CommonAttribute): void { + super.applyNormalAttribute?.(instance); + } +} + +@Entry +@Component +struct imageModifier01 { + @State info:string = 'loading~~'; + @State imageModifier: CommonModifier = new CustomModifier() + .height(144) + .width(144) + .linearGradient({ + angle: 90, + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]], + direction: GradientDirection.Left, + repeating: false + }) + .linearGradientBlur(60, { fractionStops: [[0, 0], [0, 0.66], [1, 0.66], [1, 1]], direction: GradientDirection.Bottom }) + .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) + + build() { + Column({ space: 5 }) { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + + // svg image + Text('image Modifier with http url') + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text(this.info) + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Image('https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png') + .key("imageModifier") + .attributeModifier(this.imageModifier as CommonModifier) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info = 'loading success' + } + }) + } + .margin({ top: 20 }) + } + .height('100%') + .width('90%') + } +} \ No newline at end of file diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier02.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier02.ets new file mode 100644 index 0000000000000000000000000000000000000000..3fc49838a23ec8e49166a5fd8aead937053b7c91 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier02.ets @@ -0,0 +1,87 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { CommonModifier } from "@ohos.arkui.modifier"; + +class CustomModifier extends CommonModifier { + applyNormalAttribute(instance: CommonAttribute): void { + super.applyNormalAttribute?.(instance); + } +} + +@Entry +@Component +struct imageModifier02 { + @State info:string = 'loading~~'; + @State imageModifier: CommonModifier = new CustomModifier() + .height(144) + .width(144) + .linearGradient({ + angle: 90, + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]], + direction: GradientDirection.Left, + repeating: false + }) + .linearGradientBlur(60, { fractionStops: [[0, 0], [0, 0.66], [1, 0.66], [1, 1]], direction: GradientDirection.Bottom }) + .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) + + build() { + Column({ space: 5 }) { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + + // svg image + Text('image Modifier with http url') + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text(this.info) + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Image('https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png') + .key("imageModifier") + .attributeModifier(this.imageModifier as CommonModifier) + .alt($r('app.media.icon')) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info = 'loading success' + } + }) + } + .margin({ top: 20 }) + } + .height('100%') + .width('90%') + } +} \ No newline at end of file diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier03.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier03.ets new file mode 100644 index 0000000000000000000000000000000000000000..48f271b2202ad79c61eaf0f279d180a91fcf5384 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier03.ets @@ -0,0 +1,112 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { CommonModifier } from "@ohos.arkui.modifier"; + +class CustomModifier extends CommonModifier { + applyNormalAttribute(instance: CommonAttribute): void { + super.applyNormalAttribute?.(instance); + } +} + +@Entry +@Component +struct imageModifier03 { + @State imageModifier: CommonModifier = new CustomModifier() + .height(450) + .width(300) + .linearGradient({ + angle: 90, + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]], + direction: GradientDirection.Left, + repeating: false + }) + .linearGradientBlur(60, { fractionStops: [[0, 0], [0, 0.66], [1, 0.66], [1, 1]], direction: GradientDirection.Bottom }) + .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) + @State info:string = 'loading~~'; + @State img:ResourceStr = 'https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png'; + imgUrl:ResourceStr[] = [ + 'https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png', + 'https://images.openharmony.cn/活动/技术大会20240923/补充头像/默认男头像.svg', + 'https://www.runoob.com/try/demo_source/smiley-2.gif', + 'http://images.openharmony.cn/活动/开发者大会20250428/大会顶端banner图.jpg' + ] + index:number = 0; + + build() { + Column({ space: 5 }) { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + + // svg image + Text('image Modifier with http url') + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + // info + Text(this.info) + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Button('change image url') + .id("imageModifier03") + .height(80) + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick( () => { + if(this.index === 3){ + this.index = -1; + } + this.index++; + this.img = this.imgUrl[this.index]; + }) + + Image(this.img) + .attributeModifier(this.imageModifier as CommonModifier) + .fitOriginalSize(true) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info = 'image load onComplete'; + } + }) + } + .margin({ top: 20 }) + } + .height('100%') + .width('90%') + } +} \ No newline at end of file diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier04.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier04.ets new file mode 100644 index 0000000000000000000000000000000000000000..625d4747dddbf2d9c768fa3f30092466f791557a --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier04.ets @@ -0,0 +1,112 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { CommonModifier } from "@ohos.arkui.modifier"; + +class CustomModifier extends CommonModifier { + applyNormalAttribute(instance: CommonAttribute): void { + super.applyNormalAttribute?.(instance); + } +} + +@Entry +@Component +struct imageModifier04 { + @State imageModifier: CommonModifier = new CustomModifier() + .height(450) + .width(300) + .linearGradient({ + angle: 90, + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]], + direction: GradientDirection.Left, + repeating: false + }) + .linearGradientBlur(60, { fractionStops: [[0, 0], [0, 0.66], [1, 0.66], [1, 1]], direction: GradientDirection.Bottom }) + .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) + @State info:string = 'loading~~'; + @State img:ResourceStr = 'https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png'; + imgUrl:ResourceStr[] = [ + 'https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png', + 'https://images.openharmony.cn/活动/技术大会20240923/补充头像/默认男头像.svg', + 'https://www.runoob.com/try/demo_source/smiley-2.gif', + 'http://images.openharmony.cn/活动/开发者大会20250428/大会顶端banner图.jpg' + ] + index:number = 0; + + build() { + Column({ space: 5 }) { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + + // svg image + Text('image Modifier with http url') + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + // info + Text(this.info) + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Button('change image url') + .id("imageModifier04") + .height(80) + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick( () => { + if(this.index === 3){ + this.index = -1; + } + this.index++; + this.img = this.imgUrl[this.index]; + }) + + Image(this.img) + .attributeModifier(this.imageModifier as CommonModifier) + .fitOriginalSize(false) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info = 'image load onComplete'; + } + }) + } + .margin({ top: 20 }) + } + .height('100%') + .width('90%') + } +} \ No newline at end of file diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier05.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier05.ets new file mode 100644 index 0000000000000000000000000000000000000000..6a5695f4d41772b0d62ab1cca9d2a9029bd16bda --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier05.ets @@ -0,0 +1,89 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { CommonModifier } from "@ohos.arkui.modifier"; + +class CustomModifier extends CommonModifier { + applyNormalAttribute(instance: CommonAttribute): void { + super.applyNormalAttribute?.(instance); + } +} + +@Entry +@Component +struct imageModifier05 { + @State imageModifier: CommonModifier = new CustomModifier() + .height(450) + .width(300) + .linearGradient({ + angle: 90, + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]], + direction: GradientDirection.Left, + repeating: false + }) + .linearGradientBlur(60, { fractionStops: [[0, 0], [0, 0.66], [1, 0.66], [1, 1]], direction: GradientDirection.Bottom }) + .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) + @State info:string = 'loading~~'; + @State img:ResourceStr = $r('app.media.imageLabel07'); + + build() { + Column({ space: 5 }) { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + + // svg image + Text('image Modifier with svg') + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + // info + Text(this.info) + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Image(this.img) + .attributeModifier(this.imageModifier as CommonModifier) + .fitOriginalSize(false) + .fillColor(Color.Pink) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info = 'image load onComplete'; + } + }) + } + .margin({ top: 20 }) + } + .height('100%') + .width('90%') + } +} \ No newline at end of file diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier06.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier06.ets new file mode 100644 index 0000000000000000000000000000000000000000..926e1a73e7d875f1fd32e764afdced10b504ab98 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier06.ets @@ -0,0 +1,89 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { CommonModifier } from "@ohos.arkui.modifier"; + +class CustomModifier extends CommonModifier { + applyNormalAttribute(instance: CommonAttribute): void { + super.applyNormalAttribute?.(instance); + } +} + +@Entry +@Component +struct imageModifier06 { + @State imageModifier: CommonModifier = new CustomModifier() + .height(450) + .width(300) + .linearGradient({ + angle: 90, + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]], + direction: GradientDirection.Left, + repeating: false + }) + .linearGradientBlur(60, { fractionStops: [[0, 0], [0, 0.66], [1, 0.66], [1, 1]], direction: GradientDirection.Bottom }) + .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) + @State info:string = 'loading~~'; + @State img:ResourceStr = $r('app.media.imageLabel07'); + + build() { + Column({ space: 5 }) { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + + // svg image + Text('image Modifier with svg') + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + // info + Text(this.info) + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Image(this.img) + .attributeModifier(this.imageModifier as CommonModifier) + .fitOriginalSize(false) + .fillColor('#rrggbb') + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info = 'image load onComplete'; + } + }) + } + .margin({ top: 20 }) + } + .height('100%') + .width('90%') + } +} \ No newline at end of file diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier07.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier07.ets new file mode 100644 index 0000000000000000000000000000000000000000..3299ebe0c92a1573ed89968a5a29222dafaf5480 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier07.ets @@ -0,0 +1,110 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { CommonModifier } from "@ohos.arkui.modifier"; + +class CustomModifier extends CommonModifier { + applyNormalAttribute(instance: CommonAttribute): void { + super.applyNormalAttribute?.(instance); + } +} + +@Entry +@Component +struct imageModifier07 { + @State imageModifier: CommonModifier = new CustomModifier() + .height(450) + .width(300) + .linearGradient({ + angle: 90, + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]], + direction: GradientDirection.Left, + repeating: false + }) + .linearGradientBlur(60, { fractionStops: [[0, 0], [0, 0.66], [1, 0.66], [1, 1]], direction: GradientDirection.Bottom }) + .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) + @State info1:string = 'rgb image loading~~'; + @State info2:string = 'rgba image loading~~'; + @State img:ResourceStr = $r('app.media.imageLabel07'); + + build() { + Column({ space: 5 }) { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + + // svg image + Text('image Modifier with svg') + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + // info + Text(this.info1) + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text(this.info2) + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + + Image(this.img) + .attributeModifier(this.imageModifier as CommonModifier) + .fitOriginalSize(false) + .fillColor('rgb(255, 255, 255)') + .onComplete(() => { + this.info1 = 'rgb image load onComplete'; + }) + + Image(this.img) + .attributeModifier(this.imageModifier as CommonModifier) + .fitOriginalSize(false) + .fillColor('rgba(255, 255, 255, 1.0)') + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info2 = 'rgba image load onComplete'; + } + }) + } + .margin({ top: 20 }) + } + .height('100%') + .width('90%') + } +} \ No newline at end of file diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier08.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier08.ets new file mode 100644 index 0000000000000000000000000000000000000000..aec253c7c625aeaa66eb34db7d7370869351c04e --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier08.ets @@ -0,0 +1,116 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { CommonModifier } from "@ohos.arkui.modifier"; + +class CustomModifier extends CommonModifier { + applyNormalAttribute(instance: CommonAttribute): void { + super.applyNormalAttribute?.(instance); + } +} + +@Entry +@Component +struct imageModifier08 { + @State imageModifier: CommonModifier = new CustomModifier() + .height(450) + .width(300) + .linearGradient({ + angle: 90, + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]], + direction: GradientDirection.Left, + repeating: false + }) + .linearGradientBlur(60, { fractionStops: [[0, 0], [0, 0.66], [1, 0.66], [1, 1]], direction: GradientDirection.Bottom }) + .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) + @State info1:string = 'yellowimage1 loading~~'; + @State info2:string = 'Pink image2 loading~~'; + @State img:ResourceStr = $r('app.media.imageLabel07'); + + build() { + Column({ space: 5 }) { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + + // svg image + Text('image Modifier with svg') + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + // info + Text(this.info1) + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text(this.info2) + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Image(this.img) + .attributeModifier(this.imageModifier as CommonModifier) + .fitOriginalSize(false) + .fillColor($r('app.color.yellow')) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info1 = 'yellow image1 load onComplete'; + } + }) + + Image(this.img) + .attributeModifier(this.imageModifier as CommonModifier) + .fitOriginalSize(false) + .fillColor($r('app.color.Pink')) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info2 = 'Pink image load onComplete'; + } + }) + } + .margin({ top: 20 }) + } + .height('100%') + .width('90%') + } +} \ No newline at end of file diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier09.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier09.ets new file mode 100644 index 0000000000000000000000000000000000000000..98b268a78868bb9fa92e91188ab7c4ecc3a8ea6b --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier09.ets @@ -0,0 +1,121 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { CommonModifier } from "@ohos.arkui.modifier"; + +class CustomModifier extends CommonModifier { + applyNormalAttribute(instance: CommonAttribute): void { + super.applyNormalAttribute?.(instance); + } +} + +@Entry +@Component +struct imageModifier09 { + + @Builder OverlayNode() { + Column() { + Image($r('app.media.icon')) + Text("This is overlayNode").fontSize(20).fontColor(Color.White) + }.width(180).height(180).alignItems(HorizontalAlign.Center) + } + + @State imageModifier: CommonModifier = new CustomModifier() + .height(450) + .width(300) + .linearGradient({ + angle: 90, + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]], + direction: GradientDirection.Left, + repeating: false + }) + .linearGradientBlur(60, { fractionStops: [[0, 0], [0, 0.66], [1, 0.66], [1, 1]], direction: GradientDirection.Bottom }) + .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) + @State info:string = 'loading~~'; + @State img:ResourceStr = 'https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png'; + imgUrl:ResourceStr[] = [ + 'https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png', + 'https://images.openharmony.cn/活动/技术大会20240923/补充头像/默认男头像.svg', + 'https://www.runoob.com/try/demo_source/smiley-2.gif', + 'http://images.openharmony.cn/活动/开发者大会20250428/大会顶端banner图.jpg' + ] + index:number = 0; + + build() { + Column({ space: 5 }) { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + + // svg image + Text('image Modifier with http url') + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + // info + Text(this.info) + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Button('change image url') + .id("imageModifier09") + .height(80) + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick( () => { + if(this.index === 3){ + this.index = -1; + } + this.index++; + this.img = this.imgUrl[this.index]; + }) + + Image(this.img) + .attributeModifier(this.imageModifier as CommonModifier) + .fitOriginalSize(true) + .overlay(this.OverlayNode(), { align: Alignment.Center }) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info = 'image load onComplete'; + } + }) + } + .margin({ top: 20 }) + } + .height('100%') + .width('90%') + } +} \ No newline at end of file diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier10.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier10.ets new file mode 100644 index 0000000000000000000000000000000000000000..951a829c3d6ca130ee061d73b394a0c68fe0e2f6 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageModifier/imageModifier10.ets @@ -0,0 +1,186 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { CommonModifier } from "@ohos.arkui.modifier"; + +class CustomModifier extends CommonModifier { + applyNormalAttribute(instance: CommonAttribute): void { + super.applyNormalAttribute?.(instance); + } +} + +@Entry +@Component +struct imageModifier10 { + + @Builder OverlayNode() { + Column() { + Image($r('app.media.icon')) + Text("This is overlayNode").fontSize(20).fontColor(Color.White) + }.width(180).height(180).alignItems(HorizontalAlign.Center) + } + + @State imageModifier: CommonModifier = new CustomModifier() + .height(450) + .width(300) + .linearGradient({ + angle: 90, + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]], + direction: GradientDirection.Left, + repeating: false + }) + .linearGradientBlur(60, { fractionStops: [[0, 0], [0, 0.66], [1, 0.66], [1, 1]], direction: GradientDirection.Bottom }) + .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) + @State info:string = 'loading~~'; + @State img:ResourceStr = 'https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png'; + @State loadingStatus:number = 1 + @State contentWidth:number = 1 + @State contentHeight:number = 1 + @State contentOffsetX:number = 1 + @State contentOffsetY:number = 1 + imgUrl:ResourceStr[] = [ + 'https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png', + 'https://images.openharmony.cn/活动/技术大会20240923/补充头像/默认男头像.svg', + 'https://www.runoob.com/try/demo_source/smiley-2.gif', + 'http://images.openharmony.cn/活动/开发者大会20250428/大会顶端banner图.jpg' + ] + index:number = 0; + + build() { + Column({ space: 5 }) { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + + // svg image + Text('image Modifier with http url') + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + // info + Text(this.info) + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Button('change image url') + .id("imageModifier10") + .height(40) + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick( () => { + if(this.index === 3){ + this.index = -1; + } + this.index++; + this.img = this.imgUrl[this.index]; + }) + + Text('loadingStatus :' + this.loadingStatus) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentWidth :' + this.contentWidth) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentHeight :' + this.contentHeight) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetX :' + this.contentOffsetX) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetY :' + this.contentOffsetY) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Image(this.img) + .attributeModifier(this.imageModifier as CommonModifier) + .fitOriginalSize(true) + .overlay(this.OverlayNode(), { align: Alignment.Center }) + .onComplete((event)=>{ + if(event) { + this.info = 'loading success' + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.loadingStatus = event.loadingStatus + this.contentWidth = event.contentWidth + this.contentHeight = event.contentHeight + this.contentOffsetX = event.contentOffsetX + this.contentOffsetY = event.contentOffsetY + } + }) + } + .margin({ top: 20 }) + } + .height('100%') + .width('90%') + } +} \ No newline at end of file diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageNetwork/imageNetwork01.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageNetwork/imageNetwork01.ets new file mode 100644 index 0000000000000000000000000000000000000000..f27540972330ad5efe87d7806967839ec373c694 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageNetwork/imageNetwork01.ets @@ -0,0 +1,65 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct imageNetwork01 { + @State info: string = 'loading~~'; + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + + Text('svg with Network') + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('60%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text(this.info) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(200) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Image('https://images.openharmony.cn/活动/技术大会20240923/补充头像/默认男头像.svg') + .width(110) + .height(110) + .margin(20) + .padding(5) + .fillColor(Color.Brown) + .backgroundColor(Color.White) + .onComplete((event) => { + if (event) { + this.info = 'loading success' + } + }) + + } + }.height(320) + .width('100%') + .padding({ right: 10, top: 10 }) + } +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageNetwork/imageNetwork02.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageNetwork/imageNetwork02.ets new file mode 100644 index 0000000000000000000000000000000000000000..2e9d31be740610e80ef1b93e684abab988c24992 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageNetwork/imageNetwork02.ets @@ -0,0 +1,68 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct imageNetwork02 { + @State info1: string = 'loading~~'; + @State info2: string = 'loading~~'; + @State info3: string = 'loading~~'; + @State info4: string = 'loading~~'; + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + + Text('svg with Network') + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('60%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text(this.info1) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(200) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Image('https://images.openharmony.cn/活动/技术大会20240923/补充头像/默认男头像.svg') + .width(110) + .height(110) + .margin(20) + .padding(5) + .fillColor(Color.Brown) + .backgroundColor(Color.White) + .onComplete((event) => { + if (event) { + this.info1 = 'loading success' + } + }) + + } + }.height(320) + .width('100%') + .padding({ right: 10, top: 10 }) + } +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageObjectFit/imageObjectFit01.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageObjectFit/imageObjectFit01.ets new file mode 100644 index 0000000000000000000000000000000000000000..a127ba435e9164eff79567b058e4bbe055a35f13 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageObjectFit/imageObjectFit01.ets @@ -0,0 +1,331 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { image } from '@kit.ImageKit'; + +@Entry +@Component +struct imageObjectFit01 { + @State info1: string = 'loading~~'; + @State info2: string = 'loading~~'; + @State info3: string = 'loading~~'; + @State info4: string = 'loading~~'; + @State info5: string = 'loading~~'; + @State isShow: boolean = true; + @State changeAppear: string = '点我卸载挂载组件'; + @State imageSrcList1: (ResourceStr | ImageContent)[] = [$r('app.media.icon'), ImageContent.EMPTY]; + @State imageSrcList2: (ResourceStr | ImageContent)[] = ['https://images.openharmony.cn/330-%E8%BF%90%E8%90%A5%E5%9B%BE/%E5%AD%A6%E9%99%A2/530/application_basic_l.jpg', ImageContent.EMPTY]; + @State imageSrcList3: (ResourceStr | ImageContent)[] = ['https://docimg9.docs.qq.com/image/AgAABd3lbMrG1njr_7dKwYs9RKdNxYEz.png?w=114&h=114', ImageContent.EMPTY]; + @State imageSrcList4: (ResourceStr | ImageContent)[] = ['https://images.pexels.com/photos/1485894/pexels-photo-1485894.jpeg', ImageContent.EMPTY]; + @State imageSrcList5: (ResourceStr | ImageContent)[] = ['https://www.runoob.com/try/demo_source/smiley-2.gif', ImageContent.EMPTY]; + @State imageSrcIndex1: number = 0; + @State imageSrcIndex2: number = 0; + @State imageSrcIndex3: number = 0; + @State imagePixelMap1: image.PixelMap | undefined = undefined; + @State imagePixelMap2: image.PixelMap | undefined = undefined; + @State imagePixelMap3: image.PixelMap | undefined = undefined; + @State objectFit:ImageFit = ImageFit.Contain + + private async getPixmapFromMedia(resource: Resource) { + let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({ + bundleName: resource.bundleName, + moduleName: resource.moduleName, + id: resource.id + }) + let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength)) + let createPixelMap: image.PixelMap = await imageSource.createPixelMap({ + desiredPixelFormat: image.PixelMapFormat.RGBA_8888 + }) + await imageSource.release() + return createPixelMap + } + + async aboutToAppear() { + this.imagePixelMap1 = await this.getPixmapFromMedia($r('app.media.icon')) + this.imagePixelMap2 = await this.getPixmapFromMedia($r('app.media.icon3')) + this.imagePixelMap3 = await this.getPixmapFromMedia($r('app.media.imageLabel01')) + } + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + + Text('image test objectFit in PixelMap') + .height(48) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('90%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(5) + + Button('ImageFit.Cover') + .id("imageObjectFit01_01") + .height('1%') + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + this.objectFit = ImageFit.Cover + }) + + Button('ImageFit.Auto') + .id("imageObjectFit01_02") + .height('1%') + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + this.objectFit = ImageFit.Auto + }) + + Button('ImageFit.Fill') + .id("imageObjectFit01_03") + .height('1%') + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + this.objectFit = ImageFit.Fill + }) + + Button('ImageFit.ScaleDown') + .id("imageObjectFit01_04") + .height('1%') + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + this.objectFit = ImageFit.ScaleDown + }) + + Button('ImageFit.None') + .id("imageObjectFit01_05") + .height('1%') + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + this.objectFit = ImageFit.None + }) + + Row(){ + Column(){ + Text('png') + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin({top:20,bottom:6}) + + Text(this.info1) + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + } + + Image(this.imagePixelMap1) + .width(80) + .height(130) + .margin(20) + .padding(5) + .objectFit(this.objectFit) + .backgroundColor(Color.White) + .orientation(ImageRotateOrientation.AUTO) + .borderRadius(20) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info1 = 'loading success' + } + }) + .onAttach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is shown', + duration: 2000, + bottom: 500 + }) + }) + .onDetach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is hidden', + duration: 2000, + bottom: 500 + }) + }) + + }.width('100%') + .height('25%') + + Row(){ + Column(){ + Text('gif') + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin({top:20,bottom:6}) + + Text(this.info2) + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + } + + Image(this.imagePixelMap2) + .width(80) + .height(130) + .margin(20) + .padding(5) + .objectFit(this.objectFit) + .backgroundColor(Color.White) + .orientation(ImageRotateOrientation.AUTO) + .borderRadius(20) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info1 = 'loading success' + } + }) + .onAttach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is shown', + duration: 2000, + bottom: 500 + }) + }) + .onDetach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is hidden', + duration: 2000, + bottom: 500 + }) + }) + + }.width('100%') + .height('25%') + + Row(){ + Column(){ + Text('svg') + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin({top:20,bottom:6}) + + Text(this.info3) + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + } + + Image(this.imagePixelMap3) + .width(80) + .height(130) + .margin(20) + .padding(5) + .objectFit(this.objectFit) + .backgroundColor(Color.White) + .orientation(ImageRotateOrientation.AUTO) + .borderRadius(20) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info3 = 'loading success' + } + }) + .onAttach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is shown', + duration: 2000, + bottom: 500 + }) + }) + .onDetach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is hidden', + duration: 2000, + bottom: 500 + }) + }) + + }.width('100%') + .height('25%') + } + }.height('100%') + .width('100%') + .padding({ right: 10, top: 10 }) + } +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageObjectFit/imageObjectFit02.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageObjectFit/imageObjectFit02.ets new file mode 100644 index 0000000000000000000000000000000000000000..91e6c230aeaf315fdc6b67555a0805bdb12bb3ec --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageObjectFit/imageObjectFit02.ets @@ -0,0 +1,69 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct imageObjectFit02 { + @State info: string = 'loading~~'; + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + Text('image test ImageFit.TOP_START') + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text(this.info) + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Image($r('app.media.ImageOrientation')) + .borderWidth(1) + .objectFit(ImageFit.Contain) + .margin(15) + .width(114) + .height(114) + .alt('https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png') + .borderRadius(15) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info = 'loading success' + } + }) + } + } + .height('100%') + .width('90%') + } +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageObjectFit/imageObjectFit03.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageObjectFit/imageObjectFit03.ets new file mode 100644 index 0000000000000000000000000000000000000000..6b62c7cd8139b80ef285c4133002171b3dba5b5d --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageObjectFit/imageObjectFit03.ets @@ -0,0 +1,68 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct imageObjectFit03 { + @State info: string = 'loading~~'; + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + Text('image test default object') + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text(this.info) + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Image($r('app.media.ImageOrientation')) + .borderWidth(1) + .margin(15) + .width(150) + .height(200) + .alt('https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png') + .borderRadius(15) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info = 'loading success' + } + }) + } + } + .height('100%') + .width('90%') + } +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageObjectFit/imageObjectFit04.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageObjectFit/imageObjectFit04.ets new file mode 100644 index 0000000000000000000000000000000000000000..4a306ac553d77ccf71db7642334fc26dc7e28ea1 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageObjectFit/imageObjectFit04.ets @@ -0,0 +1,370 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { image } from '@kit.ImageKit'; + +@Entry +@Component +struct imageObjectFit04 { + @State info1: string = 'loading~~'; + @State info2: string = 'loading~~'; + @State info3: string = 'loading~~'; + @State info4: string = 'loading~~'; + @State info5: string = 'loading~~'; + @State isShow: boolean = true; + @State changeAppear: string = '点我卸载挂载组件'; + @State imageSrcList1: (ResourceStr | ImageContent)[] = [$r('app.media.icon'), ImageContent.EMPTY]; + @State imageSrcList2: (ResourceStr | ImageContent)[] = ['https://images.openharmony.cn/330-%E8%BF%90%E8%90%A5%E5%9B%BE/%E5%AD%A6%E9%99%A2/530/application_basic_l.jpg', ImageContent.EMPTY]; + @State imageSrcList3: (ResourceStr | ImageContent)[] = ['https://docimg9.docs.qq.com/image/AgAABd3lbMrG1njr_7dKwYs9RKdNxYEz.png?w=114&h=114', ImageContent.EMPTY]; + @State imageSrcList4: (ResourceStr | ImageContent)[] = ['https://images.pexels.com/photos/1485894/pexels-photo-1485894.jpeg', ImageContent.EMPTY]; + @State imageSrcList5: (ResourceStr | ImageContent)[] = ['https://www.runoob.com/try/demo_source/smiley-2.gif', ImageContent.EMPTY]; + @State imageSrcIndex1: number = 0; + @State imageSrcIndex2: number = 0; + @State imageSrcIndex3: number = 0; + @State imagePixelMap1: image.PixelMap | undefined = undefined; + @State imagePixelMap2: image.PixelMap | undefined = undefined; + @State imagePixelMap3: image.PixelMap | undefined = undefined; + @State objectFit:ImageFit = ImageFit.TOP_START + + private async getPixmapFromMedia(resource: Resource) { + let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({ + bundleName: resource.bundleName, + moduleName: resource.moduleName, + id: resource.id + }) + let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength)) + let createPixelMap: image.PixelMap = await imageSource.createPixelMap({ + desiredPixelFormat: image.PixelMapFormat.RGBA_8888 + }) + await imageSource.release() + return createPixelMap + } + + async aboutToAppear() { + this.imagePixelMap1 = await this.getPixmapFromMedia($r('app.media.icon')) + this.imagePixelMap2 = await this.getPixmapFromMedia($r('app.media.icon3')) + this.imagePixelMap3 = await this.getPixmapFromMedia($r('app.media.imageLabel01')) + } + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + + Text('image test objectFit in PixelMap') + .height(48) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('90%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(5) + + Button('ImageFit.TOP') + .id("imageObjectFit04_01") + .height('1%') + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + this.objectFit = ImageFit.TOP + }) + + Button('ImageFit.TOP_END') + .id("imageObjectFit04_02") + .height('1%') + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + this.objectFit = ImageFit.TOP_END + }) + + Button('ImageFit.START') + .id("imageObjectFit04_03") + .height('1%') + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + this.objectFit = ImageFit.START + }) + + Button('ImageFit.CENTER') + .id("imageObjectFit04_04") + .height('1%') + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + this.objectFit = ImageFit.CENTER + }) + + Button('ImageFit.END') + .id("imageObjectFit04_05") + .height('1%') + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + this.objectFit = ImageFit.END + }) + + Button('ImageFit.BOTTOM_START') + .id("imageObjectFit04_06") + .height('1%') + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + this.objectFit = ImageFit.BOTTOM_START + }) + + Button('ImageFit.BOTTOM') + .id("imageObjectFit04_07") + .height('1%') + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + this.objectFit = ImageFit.BOTTOM + }) + + Button('ImageFit.BOTTOM_END') + .id("imageObjectFit04_08") + .height('1%') + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + this.objectFit = ImageFit.BOTTOM_END + }) + + Row(){ + Column(){ + Text('png') + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin({top:20,bottom:6}) + + Text(this.info1) + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + } + + Image(this.imagePixelMap1) + .width(80) + .height(130) + .margin(20) + .padding(5) + .objectFit(this.objectFit) + .backgroundColor(Color.White) + .orientation(ImageRotateOrientation.AUTO) + .borderRadius(20) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info1 = 'loading success' + } + }) + .onAttach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is shown', + duration: 2000, + bottom: 500 + }) + }) + .onDetach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is hidden', + duration: 2000, + bottom: 500 + }) + }) + + }.width('100%') + .height('25%') + + Row(){ + Column(){ + Text('gif') + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin({top:20,bottom:6}) + + Text(this.info2) + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + } + + Image(this.imagePixelMap2) + .width(80) + .height(130) + .margin(20) + .padding(5) + .objectFit(this.objectFit) + .backgroundColor(Color.White) + .orientation(ImageRotateOrientation.AUTO) + .borderRadius(20) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info1 = 'loading success' + } + }) + .onAttach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is shown', + duration: 2000, + bottom: 500 + }) + }) + .onDetach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is hidden', + duration: 2000, + bottom: 500 + }) + }) + + }.width('100%') + .height('25%') + + Row(){ + Column(){ + Text('svg') + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin({top:20,bottom:6}) + + Text(this.info3) + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + } + + Image(this.imagePixelMap3) + .width(80) + .height(130) + .margin(20) + .padding(5) + .objectFit(this.objectFit) + .backgroundColor(Color.White) + .orientation(ImageRotateOrientation.AUTO) + .borderRadius(20) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info3 = 'loading success' + } + }) + .onAttach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is shown', + duration: 2000, + bottom: 500 + }) + }) + .onDetach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is hidden', + duration: 2000, + bottom: 500 + }) + }) + + }.width('100%') + .height('25%') + } + }.height('100%') + .width('100%') + .padding({ right: 10, top: 10 }) + } +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageObjectFit/imageObjectFit05.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageObjectFit/imageObjectFit05.ets new file mode 100644 index 0000000000000000000000000000000000000000..2fabb4564f364a031e94764f9237d33bd83da048 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageObjectFit/imageObjectFit05.ets @@ -0,0 +1,292 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { image } from '@kit.ImageKit'; + +@Entry +@Component +struct imageObjectFit05 { + @State info1: string = 'loading~~'; + @State info2: string = 'loading~~'; + @State info3: string = 'loading~~'; + @State info4: string = 'loading~~'; + @State info5: string = 'loading~~'; + @State isShow: boolean = true; + @State changeAppear: string = '点我卸载挂载组件'; + @State imageSrcList1: (ResourceStr | ImageContent)[] = [$r('app.media.icon'), ImageContent.EMPTY]; + @State imageSrcList2: (ResourceStr | ImageContent)[] = ['https://images.openharmony.cn/330-%E8%BF%90%E8%90%A5%E5%9B%BE/%E5%AD%A6%E9%99%A2/530/application_basic_l.jpg', ImageContent.EMPTY]; + @State imageSrcList3: (ResourceStr | ImageContent)[] = ['https://docimg9.docs.qq.com/image/AgAABd3lbMrG1njr_7dKwYs9RKdNxYEz.png?w=114&h=114', ImageContent.EMPTY]; + @State imageSrcList4: (ResourceStr | ImageContent)[] = ['https://images.pexels.com/photos/1485894/pexels-photo-1485894.jpeg', ImageContent.EMPTY]; + @State imageSrcList5: (ResourceStr | ImageContent)[] = ['https://www.runoob.com/try/demo_source/smiley-2.gif', ImageContent.EMPTY]; + @State imageSrcIndex1: number = 0; + @State imageSrcIndex2: number = 0; + @State imageSrcIndex3: number = 0; + @State imagePixelMap1: image.PixelMap | undefined = undefined; + @State imagePixelMap2: image.PixelMap | undefined = undefined; + @State imagePixelMap3: image.PixelMap | undefined = undefined; + @State objectFit:ImageFit | undefined | null = ImageFit.Contain + + private async getPixmapFromMedia(resource: Resource) { + let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({ + bundleName: resource.bundleName, + moduleName: resource.moduleName, + id: resource.id + }) + let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength)) + let createPixelMap: image.PixelMap = await imageSource.createPixelMap({ + desiredPixelFormat: image.PixelMapFormat.RGBA_8888 + }) + await imageSource.release() + return createPixelMap + } + + async aboutToAppear() { + this.imagePixelMap1 = await this.getPixmapFromMedia($r('app.media.icon')) + this.imagePixelMap2 = await this.getPixmapFromMedia($r('app.media.icon3')) + this.imagePixelMap3 = await this.getPixmapFromMedia($r('app.media.imageLabel01')) + } + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + + Text('image test objectFit in PixelMap') + .height(48) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('90%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(5) + + Button('ImageFit.TOP') + .id("imageObjectFit05_01") + .height('1%') + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + this.objectFit = undefined + }) + + Button('ImageFit.TOP_END') + .id("imageObjectFit05_02") + .height('1%') + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + this.objectFit = null + }) + + Row(){ + Column(){ + Text('png') + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin({top:20,bottom:6}) + + Text(this.info1) + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + } + + Image(this.imagePixelMap1) + .width(80) + .height(130) + .margin(20) + .padding(5) + .objectFit(this.objectFit) + .backgroundColor(Color.White) + .orientation(ImageRotateOrientation.AUTO) + .borderRadius(20) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info1 = 'loading success' + } + }) + .onAttach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is shown', + duration: 2000, + bottom: 500 + }) + }) + .onDetach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is hidden', + duration: 2000, + bottom: 500 + }) + }) + + }.width('100%') + .height('25%') + + Row(){ + Column(){ + Text('gif') + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin({top:20,bottom:6}) + + Text(this.info2) + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + } + + Image(this.imagePixelMap2) + .width(80) + .height(130) + .margin(20) + .padding(5) + .objectFit(this.objectFit) + .backgroundColor(Color.White) + .orientation(ImageRotateOrientation.AUTO) + .borderRadius(20) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info1 = 'loading success' + } + }) + .onAttach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is shown', + duration: 2000, + bottom: 500 + }) + }) + .onDetach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is hidden', + duration: 2000, + bottom: 500 + }) + }) + + }.width('100%') + .height('25%') + + Row(){ + Column(){ + Text('svg') + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin({top:20,bottom:6}) + + Text(this.info3) + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width(170) + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + } + + Image(this.imagePixelMap3) + .width(80) + .height(130) + .margin(20) + .padding(5) + .objectFit(this.objectFit) + .backgroundColor(Color.White) + .orientation(ImageRotateOrientation.AUTO) + .borderRadius(20) + .onComplete((event) => { + if (event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.info3 = 'loading success' + } + }) + .onAttach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is shown', + duration: 2000, + bottom: 500 + }) + }) + .onDetach(() => { + this.getUIContext().getPromptAction().showToast({ + message: 'The text is hidden', + duration: 2000, + bottom: 500 + }) + }) + + }.width('100%') + .height('25%') + } + }.height('100%') + .width('100%') + .padding({ right: 10, top: 10 }) + } +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete01.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete01.ets new file mode 100644 index 0000000000000000000000000000000000000000..4170a6f0cf0a3c52e082a81b7a54ef7fc1dc8d4f --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete01.ets @@ -0,0 +1,133 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct imageOnComplete01 { + @State info:string = 'loading~~'; + @State img:ResourceStr = 'https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png'; + @State loadingStatus:number = 1 + @State contentWidth:number = 1 + @State contentHeight:number = 1 + @State contentOffsetX:number = 1 + @State contentOffsetY:number = 1 + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + Text('image Modifier with http url') + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Button('change image url') + .id("imageModifier01") + .height(80) + .fontSize(15) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick( () => { + this.img = 'https://images.openharmony.cn/活动/技术大会20240923/补充头像/默认男头像.svg'; + }) + + Text('loadingStatus :' + this.loadingStatus) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentWidth :' + this.contentWidth) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentHeight :' + this.contentHeight) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetX :' + this.contentOffsetX) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetY :' + this.contentOffsetY) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Image(this.img) + .borderRadius(20) + .margin(15) + .onComplete((event)=>{ + if(event) { + this.info = 'loading success' + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.loadingStatus = event.loadingStatus + this.contentWidth = event.contentWidth + this.contentHeight = event.contentHeight + this.contentOffsetX = event.contentOffsetX + this.contentOffsetY = event.contentOffsetY + } + }) + }.width('100%') + .height('100%') + } + .height('100%') + .width('90%') + } +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete02.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete02.ets new file mode 100644 index 0000000000000000000000000000000000000000..b9ab65431d376c798b81b2df04b9d92fc66f70fb --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete02.ets @@ -0,0 +1,120 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct imageOnComplete02 { + @State info:string = 'loading~~'; + @State img:ResourceStr = 'https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png'; + @State loadingStatus:number = 1 + @State contentWidth:number = 1 + @State contentHeight:number = 1 + @State contentOffsetX:number = 1 + @State contentOffsetY:number = 1 + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + Text('image test change url') + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text('loadingStatus :' + this.loadingStatus) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentWidth :' + this.contentWidth) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentHeight :' + this.contentHeight) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetX :' + this.contentOffsetX) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetY :' + this.contentOffsetY) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Image(this.img) + .borderRadius(20) + .margin(15) + .onComplete((event)=>{ + if(event) { + this.info = 'loading success' + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.loadingStatus = event.loadingStatus + this.contentWidth = event.contentWidth + this.contentHeight = event.contentHeight + this.contentOffsetX = event.contentOffsetX + this.contentOffsetY = event.contentOffsetY + } + }) + }.width('100%') + .height('100%') + } + .height('100%') + .width('90%') + } +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete04.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete04.ets new file mode 100644 index 0000000000000000000000000000000000000000..440150d81e2092b826e165a131229049d3543dc5 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete04.ets @@ -0,0 +1,167 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ +import { uiAppearance } from '@kit.ArkUI'; + +@Entry +@Component +struct imageOnComplete04 { + @State info:string = 'loading~~'; + @State img:ResourceStr = 'https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png'; + @State loadingStatus:number = 1 + @State contentWidth:number = 1 + @State contentHeight:number = 1 + @State contentOffsetX:number = 1 + @State contentOffsetY:number = 1 + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + Text('image test DarkMode') + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text('loadingStatus :' + this.loadingStatus) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentWidth :' + this.contentWidth) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentHeight :' + this.contentHeight) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetX :' + this.contentOffsetX) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetY :' + this.contentOffsetY) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Button('setDarkMode ALWAYS_DARK') + .id('imageOnComplete04_01') + .height(40) + .fontSize(14) + .fontColor(Color.Black) + .width('75%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + try { + uiAppearance.setDarkMode(uiAppearance.DarkMode.ALWAYS_DARK, (error) => { + if (error) { + console.error('Set dark-mode failed, ' + error.message); + } else { + console.info('Set dark-mode successfully.'); + } + }) + } catch (error) { + console.error('Set dark-mode failed, ' + error.message); + } + }) + + Button('setDarkMode ALWAYS_LIGHT') + .id('imageOnComplete04_02') + .height(40) + .fontSize(14) + .fontColor(Color.Black) + .width('75%') + .border({ width: 1 }) + .fontWeight(300) + .margin(10) + .onClick(() => { + try { + uiAppearance.setDarkMode(uiAppearance.DarkMode.ALWAYS_LIGHT, (error) => { + if (error) { + console.error('Set dark-mode failed, ' + error.message); + } else { + console.info('Set dark-mode successfully.'); + } + }) + } catch (error) { + console.error('Set dark-mode failed, ' + error.message); + } + }) + + Image(this.img) + .borderRadius(20) + .margin(15) + .onComplete((event)=>{ + if(event) { + this.info = 'loading success' + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.loadingStatus = event.loadingStatus + this.contentWidth = event.contentWidth + this.contentHeight = event.contentHeight + this.contentOffsetX = event.contentOffsetX + this.contentOffsetY = event.contentOffsetY + } + }) + }.width('100%') + .height('100%') + } + .height('100%') + .width('90%') + } +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete05.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete05.ets new file mode 100644 index 0000000000000000000000000000000000000000..f731238cde22b266166a19c41bb0dd969199ff17 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete05.ets @@ -0,0 +1,121 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ +import { uiAppearance } from '@kit.ArkUI'; + +@Entry +@Component +struct imageOnComplete05 { + @State info:string = 'loading~~'; + @State img:ResourceStr = 'https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png'; + @State loadingStatus:number = 1 + @State contentWidth:number = 1 + @State contentHeight:number = 1 + @State contentOffsetX:number = 1 + @State contentOffsetY:number = 1 + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + Text('image test changeWindowOrientation') + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text('loadingStatus :' + this.loadingStatus) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentWidth :' + this.contentWidth) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentHeight :' + this.contentHeight) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetX :' + this.contentOffsetX) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetY :' + this.contentOffsetY) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Image(this.img) + .borderRadius(20) + .margin(15) + .onComplete((event)=>{ + if(event) { + this.info = 'loading success' + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.loadingStatus = event.loadingStatus + this.contentWidth = event.contentWidth + this.contentHeight = event.contentHeight + this.contentOffsetX = event.contentOffsetX + this.contentOffsetY = event.contentOffsetY + } + }) + }.width('100%') + .height('100%') + } + .height('100%') + .width('90%') + } +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete06.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete06.ets new file mode 100644 index 0000000000000000000000000000000000000000..45ca95106d02fe8f70f27309f665c6a8c765deff --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete06.ets @@ -0,0 +1,121 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct imageOnComplete06 { + @State info:string = 'loading~~'; + @State img:ResourceStr = 'https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png'; + @State loadingStatus:number = 1 + @State contentWidth:number = 1 + @State contentHeight:number = 1 + @State contentOffsetX:number = 1 + @State contentOffsetY:number = 1 + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + Text('image test changeWindowOrientation') + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text('loadingStatus :' + this.loadingStatus) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentWidth :' + this.contentWidth) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentHeight :' + this.contentHeight) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetX :' + this.contentOffsetX) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetY :' + this.contentOffsetY) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Image(this.img) + .borderRadius(20) + .margin(15) + .onComplete((event)=>{ + if(event) { + this.info = 'loading success' + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.loadingStatus = event.loadingStatus + this.contentWidth = event.contentWidth + this.contentHeight = event.contentHeight + this.contentOffsetX = event.contentOffsetX + this.contentOffsetY = event.contentOffsetY + } + }) + } + .width('100%') + .height('100%') + } + .height('100%') + .width('90%') + } +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete07.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete07.ets new file mode 100644 index 0000000000000000000000000000000000000000..8a53ce1a943f78873b8dd6eea5b7677632d8636f --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete07.ets @@ -0,0 +1,168 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct imageOnComplete07 { + @State info:string = 'loading~~'; + @State img:ResourceStr = $r('app.media.icon'); + @State loadingStatus:number = 1; + @State contentWidth:number = 1; + @State contentHeight:number = 1; + @State contentOffsetX:number = 1; + @State contentOffsetY:number = 1; + @State imageFit:ImageFit = ImageFit.Contain; + @State onCompleteNum:number = 0; + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + Text('image test objectFit') + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text('objectFit ：' + this.imageFit + ' onComplete：' + this.onCompleteNum) + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text('loadingStatus :' + this.loadingStatus) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentWidth :' + this.contentWidth) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentHeight :' + this.contentHeight) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetX :' + this.contentOffsetX) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetY :' + this.contentOffsetY) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Row(){ + Button('ImageFit.Fill') + .id('imageOnComplete07_01') + .height(40) + .backgroundColor(Color.White) + .fontSize(14) + .fontColor(Color.Black) + .width('45%') + .border({ width: 1 }) + .fontWeight(400) + .margin(10) + .onClick(() => { + this.imageFit = ImageFit.Fill + }) + + Button('ImageFit.Contain') + .id('imageOnComplete07_02') + .height(40) + .backgroundColor(Color.White) + .fontSize(14) + .fontColor(Color.Black) + .width('45%') + .border({ width: 1 }) + .fontWeight(400) + .margin(10) + .onClick(() => { + this.imageFit = ImageFit.Contain + }) + }.width('100%') + + Image(this.img) + .width(200) + .height(200) + .borderRadius(20) + .margin(15) + .objectFit(this.imageFit) + .onComplete((event)=>{ + if(event) { + this.onCompleteNum++ + this.info = 'loading success' + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.loadingStatus = event.loadingStatus + this.contentWidth = event.contentWidth + this.contentHeight = event.contentHeight + this.contentOffsetX = event.contentOffsetX + this.contentOffsetY = event.contentOffsetY + } + }) + } + .width('100%') + .height('100%') + } + .height('100%') + .width('90%') + } +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete08.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete08.ets new file mode 100644 index 0000000000000000000000000000000000000000..99e2c9396702657b92a927a73e58e04c4cfecaad --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete08.ets @@ -0,0 +1,138 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct imageOnComplete08 { + @State info:string = 'loading~~'; + @State img:ResourceStr = $r('app.media.icon'); + @State loadingStatus:number = 1; + @State contentWidth:number = 1; + @State contentHeight:number = 1; + @State contentOffsetX:number = 1; + @State contentOffsetY:number = 1; + @State onCompleteNum:number = 0; + @State enhancedImageQuality:ResolutionQuality = 1 + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + Text('image test objectFit') + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text('enhancedImageQuality ：' + this.enhancedImageQuality + ' onComplete：' + this.onCompleteNum) + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text('loadingStatus :' + this.loadingStatus) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentWidth :' + this.contentWidth) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentHeight :' + this.contentHeight) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetX :' + this.contentOffsetX) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetY :' + this.contentOffsetY) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Image(this.img) + .width(200) + .height(200) + .borderRadius(20) + .margin(15) + .enhancedImageQuality(this.enhancedImageQuality) + .onComplete((event)=>{ + if(event) { + this.onCompleteNum++ + this.info = 'loading success' + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.loadingStatus = event.loadingStatus + this.contentWidth = event.contentWidth + this.contentHeight = event.contentHeight + this.contentOffsetX = event.contentOffsetX + this.contentOffsetY = event.contentOffsetY + } + }) + } + .width('100%') + .height('100%') + } + .height('100%') + .width('90%') + } +} diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete09.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete09.ets new file mode 100644 index 0000000000000000000000000000000000000000..0fcb4f5a92c702f411dc9029ffde7d1ecfef4dc6 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete09.ets @@ -0,0 +1,116 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { image } from '@kit.ImageKit' + +@Entry +@Component +struct imageOnComplete09 { + @State value: number = 0; + @State numberArr: number[] = [100, 200] + @State imagePixelMap: image.PixelMap | undefined = undefined + @State text:string = ''; + @State loadingStatus:number = 1; + @State contentWidth:number = 1; + @State contentHeight:number = 1; + @State contentOffsetX:number = 1; + @State contentOffsetY:number = 1; + + async aboutToAppear() { + this.imagePixelMap = await this.getPixmapFromMedia($r('app.media.icon')) + } + + build() { + Column() { + Text(this.text) + .height(40) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Image(this.imagePixelMap) + .width(this.numberArr[this.value]) + .height(this.numberArr[this.value]) + .margin({ bottom: 10 }) + .onComplete((event) => { + if(event) { + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.loadingStatus = event.loadingStatus + this.contentWidth = event.contentWidth + this.contentHeight = event.contentHeight + this.contentOffsetX = event.contentOffsetX + this.contentOffsetY = event.contentOffsetY + this.text = 'onComplete width:' + this.contentWidth + ' height:' + this.contentHeight + ' ' + this.value +' ' + this.loadingStatus + } + }) + + Button(`change宽高`) + .id('imageOnComplete09_01') + .onClick(() => { + this.value++; + if (this.value > this.numberArr.length - 1) { + this.value = 0 + } + }) + + Child({ children: $value }).margin(12) + }.margin(50) + } + + private async getPixmapFromMedia(resource: Resource) { + let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({ + bundleName: resource.bundleName, + moduleName: resource.moduleName, + id: resource.id + }) + let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength)) + let createPixelMap: image.PixelMap = await imageSource.createPixelMap({ + desiredPixelFormat: image.PixelMapFormat.RGBA_8888 + }) + await imageSource.release() + return createPixelMap + } +} + +@Component +struct Child { + @Link children: number; + + // @Event $value: (val: number) => void = (val: number) => {}; + + build() { + Column() { + Text(`${this.children}`) + Button(`change 宽高 `) + .id('imageOnComplete09_02') + .onClick(() => { + this.children++; + if (this.children > 1) { + this.children = 0 + } + // this.$value(this.value); + }) + }.border({ width: 5, color: Color.Pink }).margin({ top: 20 }) + } +} \ No newline at end of file diff --git a/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete10.ets b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete10.ets new file mode 100644 index 0000000000000000000000000000000000000000..1ad8f34e890d568ffaddcb5dfbb523869d69c3e0 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_01/entry/src/ohosTest/ets/testability/pages/image_svg_animate/imageOnComplete/imageOnComplete10.ets @@ -0,0 +1,122 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct imageOnComplete10 { + @State info:string = 'loading~~'; + @State img:ResourceStr = 'https://foruda.gitee.com/images/1753255402677959741/499f5538_10080759.png'; + @State loadingStatus:number = 1 + @State contentWidth:number = 1 + @State contentHeight:number = 1 + @State contentOffsetX:number = 1 + @State contentOffsetY:number = 1 + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + Text('image test auto size') + .height(80) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(10) + + Text('loadingStatus :' + this.loadingStatus) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentWidth :' + this.contentWidth) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentHeight :' + this.contentHeight) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetX :' + this.contentOffsetX) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Text('contentOffsetY :' + this.contentOffsetY) + .height(30) + .fontSize(15) + .textAlign(TextAlign.Center) + .fontColor(Color.Black) + .width('70%') + .border({ width: 1 }) + .lineHeight(20) + .fontWeight(300) + .margin(6) + + Image(this.img) + .width('auto') + .height('auto') + .borderRadius(20) + .margin(15) + .onComplete((event)=>{ + if(event) { + this.info = 'loading success' + console.log('onComplete:event.loadingStatus ' + event.loadingStatus) + console.log('onComplete:event.contentWidth ' + event.contentWidth) + console.log('onComplete:event.contentHeight ' + event.contentHeight) + console.log('onComplete:event.contentOffsetX ' + event.contentOffsetX) + console.log('onComplete:event.contentOffsetY ' + event.contentOffsetY) + this.loadingStatus = event.loadingStatus + this.contentWidth = event.contentWidth + this.contentHeight = event.contentHeight + this.contentOffsetX = event.contentOffsetX + this.contentOffsetY = event.contentOffsetY + } + }) + }.width('100%') + .height('100%') + } + .height('100%') + .width('90%') + } +}