tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-21
628
2.8m

x-skia-u Skia画布 ​

实时 Canvas 2D 组件，以及离线单图 Recipe。两端共用同一套 Skia 内核。

迁官方 canvas、合批、手势、鸿蒙/iOS 上屏等见 常见问题.md。

离线 Recipe 与实时画布都从本插件导入：

ts
import { XSkiaRecipe, getDominantColors, getRuntimeInfo } from "@/uni_modules/x-skia-u"
import { XSkiaCanvas, XSkiaPath2D } from "@/uni_modules/x-skia-u"

兼容性 ​

HarmonyIOSAndroidWEB小程序
支持支持支持支持支持

实时画布 ​

vue
<x-skia-u ref="canvasRef" :width="360" :height="360" background="#FFFFFF" @ready="drawFullScene"></x-skia-u>
ts
function drawFullScene() : void {
  const canvas = canvasRef.value!.getContext("2d")
  canvas!.fillStyle = "#2563eb"
  canvas!.fillRect(20, 20, 80, 80)
}

canvasRef.value!.getContext("2d")!.toTempFilePath({
  success: (res) => {
    console.log(res.tempFilePath)
  }
})

离线 Recipe ​

ts
const recipe = new XSkiaRecipe({ imagePath: srcPath })
recipe.resize(720)
recipe.filter("blur", { radius: 4 })
recipe.export({
  target: "file",
  dst: outPath,
  success: (res) => {
    console.log(res.dst, recipe.offsetWidth, recipe.offsetHeight)
  }
})

const colors = getDominantColors(srcPath, 5)

iOS 请用 new XSkiaRecipe(...)，不要用工厂函数返回的实例。

参数 ​

字段说明默认
width宽度320
height高度240
background背景色，空为透明""
pixelRatio≤0 跟随屏幕 DPR0

事件 ​

名称参数说明
ready无画布已可呈现。之后缓冲因尺寸重建被清空时会再发，应在回调里全量重绘

实时画布方法 ​

组件 ref：

名称需要说明
getContext"2d"返回 XSkiaCanvas
createPath2D无创建独立路径，跨端只传 nativeHandle
destroy无销毁画布

getContext("2d") 上的绘制方法与原先一致：fillRect / stroke / drawImage / toTempFilePath 等。

离线 Recipe 方法 ​

创建：

名称需要说明
new XSkiaRecipe{ imagePath } 或 { width, height, background? }创建链式构造器。iOS 必须用 new
xImageimagePath从图片创建。iOS 请改用 new XSkiaRecipe
xCanvaswidth、height，可选 background空白画布

链式方法（均返回 this，最后 export）：resize / flip / rotate / rotate90 / rotate180 / rotate270 / crop / roundClip / fillRect / strokeRect / line / circle / drawText / drawImage / filter / vignette / noise / gradient / export。

属性：offsetWidth / offsetHeight（创建后可用，export 成功后按实际输出刷新）。

同步分析：getImageInfo / getAverageColor / getDominantColors(path, count=5) / getPixelColor / getRuntimeInfo / getState。

Recipe 的整图叠加渐变类型是 XSkiaOverlayGradient（from / to / colors）。Canvas 2D 的 XSkiaGradient 是另一套（x0 / y0 / stops），不要混用。

滤镜：blur / brightness / contrast / grayscale / invert / opacity / saturate / sepia / hue-rotate / drop-shadow / sharpen / temperature / tint / blackpoint。

平台差异 ​

  1. Path2D 跨边界只能传 nativeHandle。
  2. toTempFilePath、registerFont、画布渐变走 getContext("2d")。
  3. App 的 Recipe dst 为文件路径；Web 多为 dataURL；小程序为临时路径。后两者不要加 query。
  4. Recipe target="view" 会失败，请用实时画布。

版本 ​

版权归https://xui.tmui.design你不得修改及二次开发，仅供TMUI4会员商用使用。不得转给非VIP会员使用，一经查实数倍赔偿，并追究法律责任。

最近更新