Native Shell
Native ShellA native UI framework for every platform
GPUI KitComponents and tools for GPUI desktop apps
v0.4.0
mainv0.4.0latestv0.3.0v0.2.0

Search documentation

繁體中文
English中文한국어日本語繁體中文हिन्दीРусскийالعربيةItalianoFrançais

本頁由機器翻譯，可能有錯誤。 閱讀英文原文

元素

Canvas

Canvas 是一種由你自行使用 2D 繪圖 API(即 HTML Canvas 2D API)繪製的 view:圖表、儀表、圓環、簽名、自訂形狀。繪圖程式碼只負責記錄操作,平台再以螢幕解析度原生重播這些操作(在 iOS 與 Mac Catalyst 上使用 Core Graphics,在 Android 上使用 android.graphics.Canvas)。Rust 以 canvas(painter)(一個記錄繪圖內容的 Painter)建立;TSX 則使用來自 nsh 的 <Canvas> 及其 draw 函式。

el-canvas.tsx
el-canvas.tsxLive
import { Canvas, mount, signal, Text, View } from "nsh";
import { createAnimatedValue, Easing } from "nsh";
import { platform, windowSize } from "nsh";
import { button, buttonText, tint, ui } from "./palette";

const TAU = Math.PI * 2;

// Twelve months of made-up values, 0–100.
const values = [32, 41, 38, 52, 47, 63, 58, 71, 66, 80, 74, 88];
const months = "JFMAMJJASOND";

function Button(props: { label: string; onPress: () => void }) {
  return (
    <View onPress={props.onPress} {...button()}>
      <Text style={buttonText()}>{props.label}</Text>
    </View>
  );
}

function App() {
  // The month under the finger or pointer: `draw` reads it, so moving redraws.
  const picked = signal(values.length - 1);
  const pick = (x: number, width: number) =>
    picked.set(Math.max(0, Math.min(values.length - 1, Math.round(((x - 20) / (width - 40)) * (values.length - 1)))));
  let chartWidth = 0;

  // The dial's angle is a native animated value: it turns without running `draw`.
  const angle = createAnimatedValue(0);
  const turns = signal(0);
  const spin = () => {
    turns.update((n) => n + 1);
    angle.timing(turns() * TAU, { duration: 900, easing: Easing.out(Easing.cubic) });
  };

  const wide = () => windowSize().width >= 700;

  return (
    <View style={{ flex: 1, backgroundColor: ui().page, padding: 20, paddingTop: 24, gap: 14 }}>
      <Text style={{ fontSize: 22, fontWeight: "700", color: ui().text }}>canvas</Text>
      <Text style={{ color: ui().muted }}>
        {platform.desktop ? "Drag across the chart with the mouse" : "Drag your finger across the chart"} · {months[picked()]}{" "}
        = {values[picked()]}
      </Text>

      <View style={{ flex: 1, flexDirection: wide() ? "row" : "column", gap: 14 }}>
        <Canvas
          style={{ ...ui().inset, flex: 1, minHeight: 200, borderRadius: 14 }}
          onLayout={({ bounds }) => (chartWidth = bounds.size.width)}
          onStartShouldSetResponder={() => true}
          onResponderGrant={(e) => {
            pick(e.locationX, chartWidth);
            return true;
          }}
          onResponderMove={(e) => pick(e.locationX, chartWidth)}
          draw={(cx, { width, height }) => {
            const pad = 20;
            const x = (i: number) => pad + (i / (values.length - 1)) * (width - 2 * pad);
            const y = (v: number) => height - pad - 16 - (v / 100) * (height - 2 * pad - 32);
            const line = () => {
              cx.beginPath();
              values.forEach((v, i) => (i === 0 ? cx.moveTo(x(i), y(v)) : cx.lineTo(x(i), y(v))));
            };

            // Grid lines, dashed.
            cx.strokeStyle = ui().border;
            cx.lineWidth = 1;
            cx.setLineDash([4, 4]);
            for (const v of [25, 50, 75]) {
              cx.beginPath();
              cx.moveTo(pad, y(v));
              cx.lineTo(width - pad, y(v));
              cx.stroke();
            }
            cx.setLineDash([]);

            // The area under the line: a path filled with a linear gradient.
            const area = cx.createLinearGradient(0, pad, 0, height - pad);
            area.addColorStop(0, tint(ui().accent, 0.32));
            area.addColorStop(1, tint(ui().accent, 0));
            line();
            cx.lineTo(x(values.length - 1), y(0));
            cx.lineTo(x(0), y(0));
            cx.closePath();
            cx.fillStyle = area;
            cx.fill();

            line();
            cx.strokeStyle = ui().accent;
            cx.lineWidth = 2.5;
            cx.lineJoin = "round";
            cx.stroke();

            // Month labels: text.
            cx.font = "11px system-ui";
            cx.textAlign = "center";
            cx.textBaseline = "alphabetic";
            values.forEach((_, i) => {
              cx.fillStyle = i === picked() ? ui().text : ui().faint;
              cx.fillText(months[i], x(i), height - 10);
            });

            // The picked point, its guide and a bubble with its value.
            const i = picked();
            const px = x(i);
            const py = y(values[i]);
            cx.strokeStyle = tint(ui().text, 0.25);
            cx.beginPath();
            cx.moveTo(px, pad);
            cx.lineTo(px, y(0));
            cx.stroke();
            cx.shadowColor = tint(ui().accent, 0.6);
            cx.shadowBlur = 10;
            cx.fillStyle = ui().accent;
            cx.beginPath();
            cx.arc(px, py, 6, 0, TAU);
            cx.fill();
            cx.shadowBlur = 0;
            const label = String(values[i]);
            cx.font = "600 13px system-ui";
            const w = cx.measureText(label).width + 16;
            const bx = Math.max(pad, Math.min(width - pad - w, px - w / 2));
            cx.fillStyle = ui().text;
            cx.beginPath();
            cx.roundRect(bx, py - 36, w, 22, 6);
            cx.fill();
            cx.fillStyle = ui().page;
            cx.textBaseline = "middle";
            cx.fillText(label, bx + w / 2, py - 25);
          }}
        />

        <View style={{ ...ui().card, borderRadius: 14, padding: 16, gap: 12, alignItems: "center", width: wide() ? 240 : undefined, alignSelf: wide() ? "flex-start" : undefined }}>
          <Canvas
            style={{ width: 120, height: 120 }}
            draw={(cx, { width, height }) => {
              const r = width / 2 - 6;
              const c = cx.createConicGradient(0, width / 2, height / 2);
              c.addColorStop(0, ui().info);
              c.addColorStop(0.5, ui().violet);
              c.addColorStop(1, ui().info);
              cx.fillStyle = c;
              cx.beginPath();
              cx.arc(width / 2, height / 2, r, 0, TAU);
              cx.fill();
              cx.translate(width / 2, height / 2);
              cx.rotate(angle); // animates natively
              cx.fillStyle = ui().page;
              cx.beginPath();
              cx.moveTo(0, -r + 10);
              cx.lineTo(8, 0);
              cx.lineTo(-8, 0);
              cx.closePath();
              cx.fill();
              cx.beginPath();
              cx.arc(0, 0, 10, 0, TAU);
              cx.fill();
            }}
          />
          <Text style={{ color: ui().muted, textAlign: "center" }}>Turns: {turns()} (a native animated value)</Text>
          <Button label="Spin" onPress={spin} />
        </View>
      </View>
    </View>
  );
}

mount(App);
use std::f32::consts::{FRAC_PI_2, TAU};

use nsh_core::{canvas::LineCap, prelude::*};

/// A progress ring, 120 points square.
fn ring(progress: f32) -> impl IntoElement {
    let (center, radius) = (60.0, 50.0);
    canvas(
        Painter::new()
            .line_width(12.0)
            .line_cap(LineCap::Round)
            .stroke_color(rgb(0xe5e7eb))
            .begin_path()
            .arc(center, center, radius, 0.0, TAU)
            .stroke()
            .stroke_color(rgb(0x6366f1))
            .begin_path()
            .arc(center, center, radius, -FRAC_PI_2, -FRAC_PI_2 + progress * TAU)
            .stroke(),
    )
    .size(px(120.0))
}

在 TSX 中,Canvas 會建立原生 canvas view、量測其大小,並以 context 與 canvas 的尺寸執行你的 draw 函式(請參閱 Canvas API)。在 Rust 中,canvas(..) 接受一個 Painter,或是回傳該物件的閉包:當閉包所讀取的內容改變時,它會重新繪製;若繪圖內容取決於尺寸,則尺寸來自 on_layout。

#Props

Canvas 接受 view 的 props(樣式、按壓與手勢 props、onLayout、無障礙、ref 等),另外還有:

PropRustTypeDescription
drawcanvas(painter)(cx: CanvasRenderingContext2D, size: { width: number; height: number }) => void繪製 canvas。在尺寸確定後執行,canvas 調整大小時再次執行,其所讀取的 signal 改變時也會再次執行。

請透過樣式(width / height、flex、長寬比)指定 canvas 的大小:其尺寸即為樣式所給定的尺寸。

#重新繪製的時機

繪圖過程的追蹤方式與 effect 相同:在其中讀取 signal,就會讓繪圖訂閱該 signal。

let values = signal(vec![12.0_f32, 40.0, 28.0, 64.0]);
let width = signal(0.0_f32);
let height = 160.0;

canvas(move || {
    let data = values.get(); // a change of values redraws
    let step = width.get() / data.len() as f32;
    data.iter().enumerate().fold(Painter::new().fill_color(rgb(0x0969da)), |p, (i, v)| {
        p.fill_rect(i as f32 * step + 4.0, height - v, step - 8.0, *v)
    })
})
.h(px(height))
.on_layout(move |frame: &Bounds<Points>| width.set(frame.size.width.0))

數字與顏色也可以是原生動畫值(CanvasNumber、CanvasPaint;在 Rust 中,凡是可放入數字之處都可使用 &AnimatedValue):此時平台會在這些值產生動畫的期間自行重新繪製,應用程式的程式碼不需要為每一幀做任何處理。

use std::f32::consts::TAU;

let angle = animated_value(0.0);
angle.timing(TAU, 1000.0, Easing::Linear);

canvas(
    Painter::new()
        .translate(40.0, 40.0)
        .rotate(&angle) // animates natively
        .fill_color(rgb(0xcf222e))
        .fill_rect(-20.0, -4.0, 40.0, 8.0),
)
.size(px(80.0))

#Context

CanvasRenderingContext2D 是瀏覽器版本的子集,而 Painter 以 snake case 的方法提供相同的操作(move_to、line_to、fill_rect、fill_text、stroke_color 等):狀態堆疊(save、restore)、變換、路徑(moveTo、lineTo、arc、arcTo、ellipse、rect、roundRect、Bézier 曲線)、fill / stroke / clip(也可用於 Path2D,它接受 SVG 路徑資料;在 Rust 中為 fill_svg / stroke_svg)、矩形、文字(fillText、strokeText、measureText)、線性 / 放射狀 / 圓錐漸層、虛線、陰影、globalAlpha、globalCompositeOperation 與 drawImage(以 URL 或資源載入圖片)。所有成員皆列於 Canvas API 參考文件;canvas 指南則會逐步說明如何繪製圖表與動畫圖形。

座標以 point 為單位,原點位於左上角。measureText 為同步執行,並回傳 width。Rust 的 Painter 也能回應命中測試(is_point_in_path、is_point_in_stroke)。

Context 繪製的是向量操作與圖片:像素存取(getImageData / putImageData)、filter 與 SVG 圖片不在其支援範圍內。

#事件

view 事件:onPress、onLayout、手勢與觸控。若要處理相對於繪圖區域的點按,請在 onTouchEnd 中讀取 locationX / locationY,或使用 onResponderMove 追蹤拖曳(Rust 中為 .on_responder_move(..),搭配 e.location)。

#Ref 方法

無自有的方法。

Edit this page on GitHubView as Markdown