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