NativeScript 图片缩放

原生图片缩放组件

基于

ScrollView 和 SDWebImage （iOS）

PhotoDraweeView 和 Fresco（Android）

参考自 nativescript-fresco 和 nativescript-image-zoom

安装

运行 tns plugin add nativescript-photo-zoom

API

事件

• finalImageSet
  此事件在最终图像设置后触发。
• failure
  此事件在获取最终图像失败后触发。
• submit
  此事件在提交图像请求之前触发（仅限 Android）。
• scaleChanged
  此事件在图像缩放时触发。

实例属性

• src - String
  用于图像 URI 的字符串值。您可以使用此属性将图像设置为从远程位置（http、https）、从您的 {N} 应用程序的资源文件和本地文件加载。
• placeholder - String
  用于占位符图像 URI 的字符串值。您可以使用此属性设置从您的 {N} 应用程序的本地和资源文件加载的占位符图像。
• stretch - String
  描述图像如何调整大小以填充其分配的空间。此属性可以设置为： aspectFill、aspectFit、fill 或 none
• zoomScale - Number
  获取或设置照片缩放比例。

Angular 中使用

• 在 NgModule 中导入 NativeScriptUIPhotoZoomModule

import { NativeScriptUIPhotoZoomModule } from "nativescript-photo-zoom/angular";
//......
@NgModule({
	//......
	imports: [
        //......
		NativeScriptUIPhotoZoomModule,
        //......
	],
    //......
})

<!-- app.component.html -->
<GridLayout>
    <PhotoZoom [src]="photoUrl" placeholder="res://placeholder" (finalImageSet)="onFinalImageSet($event)" (failure)="onFailure($event)"  (scaleChanged)="onScaleChanged($event)"></PhotoZoom>
</GridLayout>

// app.componnet.ts
import { Component } from "@angular/core";

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})

export class AppComponent {

    public photoUrl = "https://vignette.wikia.nocookie.net/inuyasha/images/b/b5/Inuyasha.png";

    constructor() { }

    onFinalImageSet(event) {
        console.log("onFinalImageSet: ", event);
    }

    onFailure(event) {
        console.log("onFailure: ", event);
    }

    onScaleChanged(event) {
        console.log("onScaleChanged: ", event.object.zoomScale);
    }
}

示例

此仓库包含 Angular 和原生 NativeScript 示例。要运行这些示例，请在您的 shell 中执行以下操作

$ git clone https://github.com/HoangJK/nativescript-photo-zoom.git
$ cd nativescript-photo-zoom/src
$ npm install
$ npm run demo.ios

这将运行原生 NativeScript 示例项目在 iOS 上。如果您想运行 Android，只需使用 .android 而不是 .ios 后缀。

要运行 Angular 示例，请使用 demo.ios.ng 或 demo.android.ng。