NativeScript SVG

此仓库是基于 TeamMaestro/nativescript-svg 分支，而 TeamMaestro/nativescript-svg 又是基于 peoplewareDo/nativescript-svg 分支。

安装

tns plugin add @exeleon/nativescript-svg

用法

您可以使用与使用图像源相同的方式使用它。

** 存在限制：** - saveToFile 不工作

快速入门

var ImageSourceSVGModule = require('nativescript-svg');
var svgFile = new ImageSourceSVGModule.ImageSourceSVG();

var loaded = svgFile.fromResource('foxie');

var path = '//somepath/file.svg';
loaded = svgFile.loadFromFile(path);

var url = 'http://somepath/file.svg';
svgFile
  .fromUrl(url)
  .then(loaded => {
    console.log('object loaded');
  })
  .catch(e => {
    console.log('error');
  });

API

ImageSourceSVGModule.fromResource(name: string): ImageSourceSVG

• 从指定的资源名称加载此实例。

ImageSourceSVGModule.fromFile(path: string): ImageSourceSVG

• 创建一个新的 ImageSourceSVG 实例，并从指定的文件加载。

ImageSourceSVGModule.fromData(data: any): ImageSourceSVG

• 创建一个新的 ImageSourceSVG 实例，并从指定的资源名称加载。

ImageSourceSVGModule.fromBase64(source: string): ImageSourceSVG

• 创建一个新的 ImageSourceSVG 实例，并从指定的资源名称加载。

ImageSourceSVGModule.fromBase64(source: string): ImageSourceSVG

• 创建一个新的 ImageSourceSVG 实例，并从指定的资源名称加载。

ImageSourceSVGModule.fromUrl(url: string): Promise:ImageSourceSVG

• 从提供的 URL 下载图像，并从中创建一个新的 ImageSourceSVG 实例。

您可以通过两种方式调用每个方法，例如

//from the svf file object
svgFile.loadFromResource(name: string): boolean  // synchronously
svgFile.fromResource(name: string): ImageSourceSVG //asynchronously

或

//from the svg module api
ImageSourceSVGModule.fromResource(name: string): ImageSourceSVG

从版本 1.1 开始，实现了一个类似图像标签的功能，例如

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:svg="nativescript-svg" loaded="pageLoaded">
  <StackLayout>
    <!--svg image tag-->
    <svg:SVGImage src="~/image/nativescript.svg" height="100" />
    <svg:SVGImage src="https://media4.giphy.com/media/3uyIgVxP1qAjS/200.svg" height="200" />

    <!--normal image tag-->
    <Image src="~/images/logo.svg" stretch ="none" />
  </StackLayout>
</Page>

路线图

版本 1.6 实现 SVGImage 标签以支持 svg 标签。

<!-- this is more complicated to implement, pending to be implemented -->
    <svg:SVGImage width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg:SVGImage>

版本 1.5 将 api 依赖从 pents90/svg-android 更改为 Pixplicity/sharp

发布说明

v1.3.4 -- 支持 Angular 4，请检查示例代码

v1.3.0 -- NS 3+ 实现，并在使用之前调用 registerElement，它将与 Angular 一起工作。感谢 @tbozhikov

v1.1.4 -- 修复 svg & demo

v1.1.3 -- 修复 SVGImage for iOS - SVGKFastImageView issue#3

v1.1.0 -- 实现了一个类似图像标签的功能以渲染 svg 图像。

v1.0.11 -- 对加载库问题进行了重大修复，并包括演示。

v1.0.9 -- 支持从 Android 和 IOS 加载 URL。

v1.0.7 -- 修复 svg.common 覆盖问题。

v1.0.5 -- 修复 npm 包 lib 不包括 .js 文件的问题。

v1.0.2 -- Android 包含 base64 编码 - IOS 待定。