Harmonyos Next Practical: بزرگنمایی و کاهش تصویر

هدف: از دو انگشت برای خرج کردن و بزرگنمایی در داخل و خارج از تصویر استفاده کنید

نکات دانش:
Pinchgesture برای ایجاد یک ژست خرج ، با حداقل 2 انگشت و حداکثر 5 انگشت و حداقل فاصله تشخیص 5 ولت استفاده می شود.
رابط

PinchGesture(value?:{fingers?:number, distance?:number})

ژست Pinch برای تحریک رویداد حرکات pinch استفاده می شود و دارای دو پارامتر اختیاری است:

1. انگشتان دست: برای اعلام حداقل تعداد انگشتان مورد نیاز برای ایجاد یک حرکات پین ، با حداقل مقدار 2 ، حداکثر مقدار 5 و مقدار پیش فرض 2 استفاده می شود. حرکات ماشه می تواند انگشتان بیشتری نسبت به تعداد انگشتان داشته باشد ، اما فقط انگشتان که در ابتدا قرار می گیرند و دارای تعداد مشابهی هستند که انگشتان در محاسبه حرکات شرکت می کنند.
2. فاصله: برای اعلام حداقل فاصله ای که باعث حرکات پینچ می شود ، در VP ، با مقدار پیش فرض 5. توضیح: دامنه مقدار:[0،+∞)هنگامیکهمقدارفاصلهتشخیصکمتریابرابربا0باشد،بهمقدارپیشفرضتبدیلمیشود[0+∞)Whentherecognitiondistancevalueislessthanorequalto0itwillbeconvertedtothedefaultvalue

API15 اضافه می کند:
isfingercountlimited
تعداد انگشتان دست را لمس کنید. اگر تعداد انگشتان دست به صفحه نمایش برابر با حداقل تعداد انگشتان تنظیم شده برای تحریک پینچ نباشد (یعنی پارامتر انگشتان ذکر شده در بالا) ، ژست تشخیص داده نمی شود. این ژست فقط با موفقیت قابل تشخیص است وقتی که شاخص دست لمس کردن صفحه برابر با حداقل تعداد انگشتان تنظیم شده برای تحریک ژست پین باشد ، و فاصله کشویی نیاز آستانه را برآورده می کند (فقط دو انگشت که ابتدا در محاسبه حرکات شرکت می کنند ، اگر یکی از آنها برداشته شود ، تشخیص حرکات شکست می خورد). برای حرکاتی که با موفقیت به رسمیت شناخته شده است ، تغییر تعداد انگشتان دست در صفحه در آینده باعث ایجاد رویداد Onactionupdate نمی شود ، اما می تواند باعث ایجاد رویداد Onactionend شود. مقدار پیش فرض: FALSE

واقعه

onActionStart(event:(event: GestureEvent) => void)  //Pinch gesture recognition successfully callback.
onActionUpdate(event:(event: GestureEvent) => void) //Pinch gesture callback during movement.
onActionEnd(event:(event: GestureEvent) => void)    //Pinch gesture recognition successful, triggering a callback when the finger is raised.
onActionCancel(event: () => void)   //Pinch gesture recognition successful, triggered callback upon receiving touch cancellation event.

ویژگی
برچسب ： پرچم ژست Pinch را تنظیم کنید تا حرکات محدود هنگام تنظیم قضاوت حرکات را متمایز کنید.
مجازات های مجاز ： منبع ورودی رویداد را که توسط ژست pinch پشتیبانی می شود ، تنظیم کنید.

مبارزه واقعی: ImageEnlargementRuctionDemopage

@Entry
@Component
struct ImageEnlargementReductionDemoPage {
  @State scaleValue: number = 1;
  @State pinchValue: number = 1;
  @State pinchX: number = 0;
  @State pinchY: number = 0;

  build() {
    Stack({ alignContent: Alignment.Top }) {
      Image('https://pica.zhimg.com/v2-764199c9470ff436082f35610f1f81f4_1440w.jpg')
        .width('100%')
          // 在组件上绑定缩放比例，可以通过修改缩放比例来实现组件的缩小或者放大
        .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
        .gesture(
          // 在组件上绑定2指触发的捏合手势
          PinchGesture({ fingers: 2 })
            .onActionStart((event: GestureEvent | undefined) => {
              console.info('Pinch start');
            })
              // 当捏合手势触发时，可以通过回调函数获取缩放比例，从而修改组件的缩放比例
            .onActionUpdate((event: GestureEvent | undefined) => {
              if (event) {
                this.scaleValue = this.pinchValue * event.scale;
                this.pinchX = event.pinchCenterX;
                this.pinchY = event.pinchCenterY;
              }
            })
            .onActionEnd(() => {
              this.pinchValue = this.scaleValue;
              console.info('Pinch end');
            })
        )

      Text('图片放大缩小Demo')
        .fontColor(Color.Orange)
        .fontSize(24)
    }
    .width('100%')
    .height('100%')
  }
}