nanosvg.newImage()

类型 函数
返回值 显示对象
修订 版本 2024.3703
关键词 SVG, nanosvg, newImage
另请参阅 nanosvg.newTexture()
nanosvg.*

概述

在屏幕上显示包含渲染后的 SVG 的图像。

语法

nanosvg.newImage( params )
参数 (必填)

. 包含新对象所需参数的表 — 详情请参阅下一节。

参数参考

重要

必须指定至少一个数据源 — filenamefilePathdata才能渲染 SVG。

filename (可选)

字符串. 指示要加载的 SVG 文件的名称,相对于 baseDir

baseDir (可选)

常量. 指定 filename 所在的基本目录。选项包括 system.ResourceDirectorysystem.DocumentsDirectorysystem.ApplicationSupportDirectorysystem.TemporaryDirectorysystem.CachesDirectory。默认为 system.ResourceDirectory

filePath (可选)

字符串. 指示要加载的 SVG 文件的完整文件路径。

data (可选)

字符串. 包含要栅格化的 SVG 的 XML 数据。

x (可选)

数字. 图像在屏幕上的 x 坐标。

y (可选)

数字. 图像在屏幕上的 y 坐标。

width (可选)

数字. 图像的内容宽度,即内容在参考屏幕内的宽度。

height (可选)

数字. 图像的内容高度,即内容在参考屏幕内的高度。

pixelWidth (可选)

数字. 指定渲染 SVG 的纹理的水平像素尺寸。如果省略此参数,则将根据 SVG 的宽高比推断纹理宽度。

pixelHeight (可选)

数字. 指定渲染 SVG 的纹理的垂直像素尺寸。如果省略此参数,则将根据 SVG 的宽高比推断纹理高度。

scale (可选)

字符串. 指定栅格化 SVG 应如何适应纹理。这仅适用于同时指定了 pixelWidthpixelHeight 的情况。选项包括

  • "letterbox" — 此选项(默认)将整个栅格化 SVG 拟合到纹理的宽度/高度内,使信箱区域保持透明。
  • "zoomEven" — 此选项使用栅格化 SVG 填充纹理的宽度/高度,使其较小的维度适合纹理。
scaleOffset (可选)

数字. 指定缩放后的栅格化 SVG 将如何放置在纹理宽度/高度内。值为 0.5 (默认值)会将其放置在纹理的中间;0 表示顶部或左侧;1 表示底部或右侧。

dpi (可选)

数字. 用于在不同 SVG 单位(像素、点、厘米、毫米等)之间进行转换的数字。默认值为 96

示例

从 SVG 文件创建图像
local nanosvg = require( "plugin.nanosvg" )

local testSvg = nanosvg.newImage(
{
    filename = "test.svg",
    x = display.contentCenterX,
    y = display.contentCenterY,
    width = 100,
    height = 100
})
从 SVG 数据创建图像
local nanosvg = require( "plugin.nanosvg" )

local circle = nanosvg.newImage(
{
    data = "<svg viewBox='0 0 200 200'><circle cx='100' cy='100' r='100'/></svg>",
    x = display.contentCenterX,
    y = display.contentCenterY,
    width = 100,
    height = 100
})