skia-canvas 和 echarts

ahdg6 · 2023 年8 月 5 日 15:06

严格来说两个都是服务，都是给开发者用的，一个提供 skia-canvas，一个用 canvas 画表（非常简单的包装来保证开发者能直接画图而不用处理交互，理论上你自己装 echarts 也行，不过我们帮你预载好了字体）<- 其实就是为了尽快水过 10 个插件

peerDependencies 只需要填 koishi-plugin-echarts 就行，然后 ctx.echarts.createChart(width，height，echarts options)

itzdrli · 2023 年8 月 5 日 20:07

支持!
同时也来看看基于此skia-canvas的入群验证码插件：
VeriCode - 入群人机验证插件

ahdg6 · 2023 年9 月 2 日 13:32

Echarts 图片加载可以用了！

ltxhhz · 2023 年9 月 7 日 03:59

你好大佬，想请教几个问题

为什么你是fork了一份 @napi-rs/canvas 而没直接用他们发布的库，是需要修改啥嘛
这个库还是预发布版本，为什么不用像 skia-canvas 这种，而且少了类似 textWrap 的功能
我之前插件引用 skia-canvas 报不安全了，我能不能像你这样封装让其不会报不安全

ahdg6 · 2023 年9 月 7 日 04:31

我需要修改二进制加载的方法，本来打算用yarn patch但 koishi 还是会标不安全，第二个问题是因为 @napi-rs 没有完全实现所有 skia-canvas 的功能，我选那个预发布的单纯是因为好改，第三个问题是我的 r6s 就用的这个 canvas，没有被标不安全，你可以看看

github.com

Kokoro-js/koishi-plugin-r6s/blob/master/src/util.ts

import type { Canvas } from "koishi-plugin-skia-canvas";
import path from "path";
import { User, Ranked, Profile } from "./types";

export async function rankPicture(
  canvasSerivce: Canvas,
  target: User,
  profile: Profile,
  rankInfo: Ranked,
  status: "online" | "away" | "dnd" | "offline",
) {
  const canvas = canvasSerivce.createCanvas(350, 500);
  const context = canvas.getContext("2d");

  // Gradient background
  const bgGradient = context.createLinearGradient(0, 0, 350, 0);
  bgGradient.addColorStop(0, "#FFAFBD"); // Changed to a lighter color gradient
  bgGradient.addColorStop(1, "#ffc3a0");
  context.fillStyle = bgGradient;
  context.fillRect(0, 0, 350, 450); // Fill the complete canvas

This file has been truncated. show original

ltxhhz · 2023 年9 月 7 日 04:43

好的谢谢

ltxhhz · 2023 年9 月 7 日 04:47

不好意思，你可能误解了，我第三个问题的 skia-canvas 指的还是第二个问题中的那个

ltxhhz · 2023 年9 月 7 日 08:32

搞明白了

ahdg6 · 2023 年9 月 11 日 13:48

我用 cheery-box 缝了一个文本排版功能，GitHub - CheryX/cherry-box: A node-canvas package filled with utilities, manage text boxes easily and more
放到服务里了，如果你需要可以看看