首页 > 其他分享 >鸿蒙开发进阶(HarmonyOS )开发ArkTS卡片页面

鸿蒙开发进阶(HarmonyOS )开发ArkTS卡片页面

时间:2024-11-07 16:17:43浏览次数:4  
标签:ArkTS 进阶 卡片 HarmonyOS let context radius 绘制

 鸿蒙NEXT开发实战往期必看文章:

一分钟了解”纯血版!鸿蒙HarmonyOS Next应用开发!

“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线!(从零基础入门到精通)

HarmonyOS NEXT应用开发案例实践总结合(持续更新......)

HarmonyOS NEXT应用开发性能优化实践总结(持续更新......)


开发者可以使用声明式范式开发ArkTS卡片页面。如下卡片页面由DevEco Studio模板自动生成,开发者可以根据自身的业务场景进行调整。

ArkTS卡片具备JS卡片的全量能力,并且新增了动效能力和自定义绘制的能力,支持声明式范式声明式范式声明式范式的部分组件、事件、动效、数据管理、状态管理能力,详见“ArkTS卡片支持的页面能力”。

ArkTS卡片支持的页面能力

ArkTS卡片支持的页面能力详见学习ArkTS语言ArkTS声明式开发范式

只有标识“支持在ArkTS卡片中使用”的组件和接口可用于ArkTS卡片,同时请留意卡片场景下的能力差异说明。

例如:以下说明表示@Component装饰器可在ArkTS卡片中使用。

卡片使用动效能力

ArkTS卡片开放了使用动画效果的能力,支持显式动画、属性动画、组件内转场能力。需要注意的是,ArkTS卡片使用动画效果时具有以下限制:

表1 动效参数限制

名称参数说明限制描述
duration动画播放时长限制最长的动效播放时长为1秒,当设置大于1秒的时间时,动效时长仍为1秒。
tempo动画播放速度卡片中禁止设置此参数,使用默认值1。
delay动画延迟执行的时长卡片中禁止设置此参数,使用默认值0。
iterations动画播放次数卡片中禁止设置此参数,使用默认值1。

说明

静态卡片不支持使用动效能力。

以下示例代码实现了按钮旋转的动画效果:

@Entry
@Component
struct AnimationCard {
  @State rotateAngle: number = 0;

  build() {
    Row() {
      Button('change rotate angle')
        .height('20%')
        .width('90%')
        .margin('5%')
        .onClick(() => {
          this.rotateAngle = (this.rotateAngle === 0 ? 90 : 0);
        })
        .rotate({ angle: this.rotateAngle })
        .animation({
          curve: Curve.EaseOut,
          playMode: PlayMode.Normal,
        })
    }.height('100%').alignItems(VerticalAlign.Center)
  }
}

卡片使用自定义绘制能力

ArkTS卡片开放了自定义绘制的能力,在卡片上可以通过Canvas组件创建一块画布,然后通过CanvasRenderingContext2D对象在画布上进行自定义图形的绘制,如下示例代码实现了在画布的中心绘制了一个笑脸。

@Entry
@Component
struct CustomCanvasDrawingCard {
  private canvasWidth: number = 0;
  private canvasHeight: number = 0;
  // 初始化CanvasRenderingContext2D和RenderingContextSettings
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  build() {
    Column() {
      Row() {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .onReady(() => {
            // 在onReady回调中获取画布的实际宽和高
            this.canvasWidth = this.context.width;
            this.canvasHeight = this.context.height;
            // 绘制画布的背景
            this.context.fillStyle = '#EEF0FF';
            this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
            // 在画布的中心绘制一个圆
            this.context.beginPath();
            let radius = this.context.width / 3;
            let circleX = this.context.width / 2;
            let circleY = this.context.height / 2;
            this.context.moveTo(circleX - radius, circleY);
            this.context.arc(circleX, circleY, radius, 2 * Math.PI, 0, true);
            this.context.closePath();
            this.context.fillStyle = '#5A5FFF';
            this.context.fill();
            // 绘制笑脸的左眼
            let leftR = radius / 13;
            let leftX = circleX - (radius / 2.3);
            let leftY = circleY - (radius / 4.5);
            this.context.beginPath();
            this.context.arc(leftX, leftY, leftR, 0, 2 * Math.PI, true);
            this.context.closePath();
            this.context.strokeStyle = '#FFFFFF';
            this.context.lineWidth = 15;
            this.context.stroke();
            // 绘制笑脸的右眼
            let rightR = radius / 13;
            let rightX = circleX + (radius / 2.3);
            let rightY = circleY - (radius / 4.5);
            this.context.beginPath();
            this.context.arc(rightX, rightY, rightR, 0, 2 * Math.PI, true);
            this.context.closePath();
            this.context.strokeStyle = '#FFFFFF';
            this.context.lineWidth = 15;
            this.context.stroke();
            // 绘制笑脸的鼻子
            let startX = circleX;
            let startY = circleY - 20;
            this.context.beginPath();
            this.context.moveTo(startX, startY);
            this.context.lineTo(startX - 8, startY + 40);
            this.context.lineTo(startX + 8, startY + 40);
            this.context.strokeStyle = '#FFFFFF';
            this.context.lineWidth = 15;
            this.context.lineCap = 'round';
            this.context.lineJoin = 'round';
            this.context.stroke();
            // 绘制笑脸的嘴巴
            let mouthR = radius / 2;
            let mouthX = circleX;
            let mouthY = circleY + 10;
            this.context.beginPath();
            this.context.arc(mouthX, mouthY, mouthR, Math.PI / 1.4, Math.PI / 3.4, true);
            this.context.strokeStyle = '#FFFFFF';
            this.context.lineWidth = 15;
            this.context.stroke();
            this.context.closePath();
          })
      }
    }.height('100%').width('100%')
  }
}

运行效果如下图所示。

标签:ArkTS,进阶,卡片,HarmonyOS,let,context,radius,绘制
From: https://blog.csdn.net/m0_67143533/article/details/143597927

相关文章

  • 鸿蒙开发进阶(HarmonyOS)相机管理(ArkTS)
     鸿蒙NEXT开发实战往期必看文章:一分钟了解”纯血版!鸿蒙HarmonyOSNext应用开发!“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线!(从零基础入门到精通)HarmonyOSNEXT应用开发案例实践总结合(持续更新......)HarmonyOSNEXT应用开发性能优化实践总结(持续更新......)在开发......
  • 鸿蒙开发进阶(HarmonyOS)使用通话设备切换组件
     鸿蒙NEXT开发实战往期必看文章:一分钟了解”纯血版!鸿蒙HarmonyOSNext应用开发!“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线!(从零基础入门到精通)HarmonyOSNEXT应用开发案例实践总结合(持续更新......)HarmonyOSNEXT应用开发性能优化实践总结(持续更新......)基本概......
  • 鸿蒙开发进阶(HarmonyOS)相机应用录像(ArkTS)
     鸿蒙NEXT开发实战往期必看文章:一分钟了解”纯血版!鸿蒙HarmonyOSNext应用开发!“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线!(从零基础入门到精通)HarmonyOSNEXT应用开发案例实践总结合(持续更新......)HarmonyOSNEXT应用开发性能优化实践总结(持续更新......)录像(Ar......
  • 鸿蒙开发进阶(HarmonyOS)相机拍照功能(ArkTS)
     鸿蒙NEXT开发实战往期必看文章:一分钟了解”纯血版!鸿蒙HarmonyOSNext应用开发!“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线!(从零基础入门到精通)HarmonyOSNEXT应用开发案例实践总结合(持续更新......)HarmonyOSNEXT应用开发性能优化实践总结(持续更新......)拍照是......
  • Web组件和WebView 习题答案 <HarmonyOS第一课>
    一、判断题1. Web组件提供具有网页显示能力,@ohos.web.webview提供web控制能力。正确(True)错误(False)回答正确A2. 同一页面的多个Web组件,必须绑定不同的WebviewController。正确(True)错误(False)回答正确A二、单选题1. 下列关于Web组件的属性,描述错误的是?A.......
  • Android音频进阶之PCM设备创建(九十三)
    简介:CSDN博客专家、《Android系统多媒体进阶实战》一书作者新书发布:《Android系统多媒体进阶实战》......
  • Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
    测试ReactHooks在React开发中,Hooks是一个非常重要的功能模块,允许开发者在函数组件中使用状态和其他React特性。自定义Hooks作为一种公共逻辑的抽离,经常被多个组件复用,因此对其测试是非常必要的。然而,由于Hooks必须在组件内部使用,直接测试它们并不像普通函数那......
  • go语言进阶之同步原语
    同步原语资源竞争定义与实现在Go语言中,资源竞争指多个goroutine同时访问共享资源,导致程序的行为不可预测或者不一致。资源竞争通常发生在对同一变量进行读写操作时,如果没有正确的同步机制来控制访问可能会引发资源竞争packagemainimport("fmt""sync")......
  • Java面向对象进阶学习一
    this关键字使用this使用的变量时属性,没有使用的是形参this可以调用结构,成员变量,方法this的理解,当前对象(在方法中调用时),或当前正在创建的对象(在构造器中调用时)针对方法内的使用情况一般情况下,我们通过对想a调用方法,可以在方法内调用当前对象a的属性或其他的方法,此时,我们可......
  • ArkTS 基础语法全解析
    在移动应用开发的世界里,ArkTS作为华为为HarmonyOS应用开发推出的编程语言,正逐渐展现出其强大的实力和独特的魅力。本文将深入探讨ArkTS的基础语法,帮助开发者快速上手并掌握这门语言。一、引言随着智能设备的普及和技术的不断进步,移动应用开发的需求也日益增长。HarmonyO......