Files

133 lines
3.9 KiB
Plaintext
Raw Permalink Normal View History

2025-11-13 10:36:23 +08:00
import PictureDrawable from "android.graphics.drawable.PictureDrawable";
import ImageView from "android.widget.ImageView";
import File from "java.io.File";
import FileInputStream from "java.io.FileInputStream";
import Color from "android.graphics.Color";
import RenderOptions from "com.caverock.androidsvg.RenderOptions";
import Base64 from "android.util.Base64";
import Charset from "java.nio.charset.Charset";
import StandardCharsets from "java.nio.charset.StandardCharsets";
/**
* CoolSvg Android 平台 SVG 渲染器
* 支持多种 SVG 数据格式:
* - base64 编码的数据 URL
* - URL 编码的数据 URL
* - 本地文件路径
* - Android 资源文件
*/
export class CoolSvg {
/** 原生视图元素 */
$element: UniNativeViewElement;
/** Android ImageView 实例 */
imageView: ImageView | null = null;
/**
* 构造函数
* @param element uni-app x 原生视图元素
*/
constructor(element: UniNativeViewElement) {
this.$element = element;
this.imageView = new ImageView(UTSAndroid.getAppContext()!);
this.$element.bindAndroidView(this.imageView!);
}
/**
* 加载并渲染 SVG
* @param src SVG 数据源,支持以下格式:
* - data:image/svg+xml;base64,<base64数据>
* - data:image/svg+xml,<URL编码的SVG>
* - 本地文件路径
* @param color 填充颜色,用于替换 SVG 中 path 元素的 fill 属性
*/
load(src: string, color: string) {
// 空字符串检查
if (src == "") {
return;
}
try {
if (src.startsWith("data:image/svg")) {
// 处理数据 URL 格式的 SVG
this.loadFromDataUrl(src, color);
} else {
// 处理本地文件或资源文件
this.loadFromFile(src, color);
}
} catch (e) {
// 打印异常信息用于调试
e.printStackTrace();
}
}
/**
* 从数据 URL 加载 SVG
* @param dataUrl 数据 URL 字符串
* @param color 填充颜色
*/
private loadFromDataUrl(dataUrl: string, color: string) {
let svgString: string;
if (dataUrl.startsWith("data:image/svg+xml;base64,")) {
// 处理 base64 编码的 SVG
const base64Prefix = "data:image/svg+xml;base64,";
const base64Data = dataUrl.substring(base64Prefix.length);
const decodedBytes = Base64.decode(base64Data, Base64.DEFAULT);
svgString = String(decodedBytes, StandardCharsets.UTF_8);
} else {
// 处理 URL 编码的 SVG
const urlPrefix = "data:image/svg+xml,";
const encodedSvg = dataUrl.substring(urlPrefix.length);
svgString = decodeURIComponent(encodedSvg) ?? '';
}
const svg = com.caverock.androidsvg.SVG.getFromString(svgString);
this.render(svg, color);
}
/**
* 从文件加载 SVG
* @param src 文件路径
* @param color 填充颜色
*/
private loadFromFile(src: string, color: string) {
// uni-app x 正式打包会将资源文件放在 Android asset 中
const path = UTSAndroid.getResourcePath(src);
if (path.startsWith("/android_asset")) {
// 从 Android 资源文件中加载
const assetPath = path.substring(15); // 移除 "/android_asset" 前缀
const svg = com.caverock.androidsvg.SVG.getFromAsset(
UTSAndroid.getAppContext()!.getAssets(),
assetPath
);
this.render(svg, color);
} else {
// 从本地文件系统加载
const file = new File(path);
if (file.exists()) {
const svg = com.caverock.androidsvg.SVG.getFromInputStream(
new FileInputStream(file)
);
this.render(svg, color);
}
}
}
/**
* 渲染 SVG 到 ImageView
* @param svg AndroidSVG 对象
* @param color 填充颜色,应用到所有 path 元素
*/
private render(svg: com.caverock.androidsvg.SVG, color: string) {
// 创建渲染选项,设置 CSS 样式来改变 SVG 的填充颜色
const options = RenderOptions.create().css(`path { fill: ${color}; }`);
// 将 SVG 渲染为 Picture然后转换为 Drawable
const drawable = new PictureDrawable(svg.renderToPicture(options));
// 设置到 ImageView 中显示
this.imageView?.setImageDrawable(drawable);
}
}