@codehz/draw-call 0.5.2 → 0.6.0

package/examples/customdraw.ts

@@ -3,7 +3,7 @@
  * 展示直接调用 Canvas API、Transform 管理和子元素渲染功能
  * 运行: bun examples/customdraw.ts
  */
-import { Box, createCanvas, CustomDraw, printLayout, Text } from "@codehz/draw-call";
+import { Box, createCanvas, CustomDraw, printLayout, Text } from "@/index";
 import { GlobalFonts } from "@napi-rs/canvas";
 import { fileURLToPath } from "bun";
 
@@ -23,6 +23,7 @@ function PieChart(data: Array<{ label: string; value: number; color: string }>)
     width: 200,
     height: 200,
     draw(ctx, { width, height }) {
+      const canvas = ctx.canvas;
       const centerX = width / 2;
       const centerY = height / 2;
       const radius = Math.min(width, height) / 2 - 5;
@@ -33,17 +34,17 @@ function PieChart(data: Array<{ label: string; value: number; color: string }>)
         const sliceAngle = (item.value / total) * Math.PI * 2;
 
         // 绘制扇形
-        ctx.beginPath();
-        ctx.moveTo(centerX, centerY);
-        ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + sliceAngle);
-        ctx.closePath();
-        ctx.fillStyle = item.color;
-        ctx.fill();
+        canvas.beginPath();
+        canvas.moveTo(centerX, centerY);
+        canvas.arc(centerX, centerY, radius, currentAngle, currentAngle + sliceAngle);
+        canvas.closePath();
+        canvas.fillStyle = item.color;
+        canvas.fill();
 
         // 绘制边框
-        ctx.strokeStyle = "#ffffff";
-        ctx.lineWidth = 2;
-        ctx.stroke();
+        canvas.strokeStyle = "#ffffff";
+        canvas.lineWidth = 2;
+        canvas.stroke();
 
         currentAngle += sliceAngle;
       }
@@ -57,25 +58,26 @@ function GridBackground() {
     width: 100,
     height: 100,
     draw(ctx, { width, height }) {
+      const canvas = ctx.canvas;
       const gridSize = 20;
 
-      ctx.strokeStyle = "rgba(200, 200, 200, 0.3)";
-      ctx.lineWidth = 1;
+      canvas.strokeStyle = "rgba(200, 200, 200, 0.3)";
+      canvas.lineWidth = 1;
 
       // 绘制垂直线
       for (let x = 0; x <= width; x += gridSize) {
-        ctx.beginPath();
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, height);
-        ctx.stroke();
+        canvas.beginPath();
+        canvas.moveTo(x, 0);
+        canvas.lineTo(x, height);
+        canvas.stroke();
       }
 
       // 绘制水平线
       for (let y = 0; y <= height; y += gridSize) {
-        ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(width, y);
-        ctx.stroke();
+        canvas.beginPath();
+        canvas.moveTo(0, y);
+        canvas.lineTo(width, y);
+        canvas.stroke();
       }
     },
   });
@@ -87,30 +89,31 @@ function ProgressRing(percentage: number, color: string) {
     width: 120,
     height: 120,
     draw(ctx, { inner, width, height }) {
+      const canvas = ctx.canvas;
       const centerX = width / 2;
       const centerY = height / 2;
       const radius = Math.min(width, height) / 2 - 8;
 
       // 绘制背景圆
-      ctx.strokeStyle = "rgba(0, 0, 0, 0.1)";
-      ctx.lineWidth = 8;
-      ctx.beginPath();
-      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
-      ctx.stroke();
+      canvas.strokeStyle = "rgba(0, 0, 0, 0.1)";
+      canvas.lineWidth = 8;
+      canvas.beginPath();
+      canvas.arc(centerX, centerY, radius, 0, Math.PI * 2);
+      canvas.stroke();
 
       // 绘制进度圆
       const endAngle = (percentage / 100) * Math.PI * 2 - Math.PI / 2;
-      ctx.strokeStyle = color;
-      ctx.lineCap = "round";
-      ctx.beginPath();
-      ctx.arc(centerX, centerY, radius, -Math.PI / 2, endAngle);
-      ctx.stroke();
+      canvas.strokeStyle = color;
+      canvas.lineCap = "round";
+      canvas.beginPath();
+      canvas.arc(centerX, centerY, radius, -Math.PI / 2, endAngle);
+      canvas.stroke();
 
       // 绘制百分比文本的背景
       ctx.save();
-      ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
-      ctx.globalAlpha = 0.1;
-      ctx.fillRect(centerX - 30, centerY - 20, 60, 40);
+      canvas.fillStyle = "rgba(0, 0, 0, 0.5)";
+      canvas.globalAlpha = 0.1;
+      canvas.fillRect(centerX - 30, centerY - 20, 60, 40);
       ctx.restore();
 
       inner?.();
@@ -139,6 +142,7 @@ function LineChart() {
     width: 300,
     height: 150,
     draw(ctx, { width, height }) {
+      const canvas = ctx.canvas;
       const padding = 10;
       const graphWidth = width - padding * 2;
       const graphHeight = height - padding * 2;
@@ -147,61 +151,61 @@ function LineChart() {
       const pointSpacing = graphWidth / (data.length - 1);
 
       // 绘制网格线
-      ctx.strokeStyle = "rgba(200, 200, 200, 0.2)";
-      ctx.lineWidth = 1;
+      canvas.strokeStyle = "rgba(200, 200, 200, 0.2)";
+      canvas.lineWidth = 1;
       for (let i = 0; i <= 4; i++) {
         const y = padding + (graphHeight / 4) * i;
-        ctx.beginPath();
-        ctx.moveTo(padding, y);
-        ctx.lineTo(width - padding, y);
-        ctx.stroke();
+        canvas.beginPath();
+        canvas.moveTo(padding, y);
+        canvas.lineTo(width - padding, y);
+        canvas.stroke();
       }
 
       // 绘制折线
-      ctx.strokeStyle = "#667eea";
-      ctx.lineWidth = 2;
-      ctx.beginPath();
+      canvas.strokeStyle = "#667eea";
+      canvas.lineWidth = 2;
+      canvas.beginPath();
 
       for (let i = 0; i < data.length; i++) {
         const x = padding + i * pointSpacing;
         const y = height - padding - (data[i] / maxValue) * graphHeight;
 
         if (i === 0) {
-          ctx.moveTo(x, y);
+          canvas.moveTo(x, y);
         } else {
-          ctx.lineTo(x, y);
+          canvas.lineTo(x, y);
         }
       }
 
-      ctx.stroke();
+      canvas.stroke();
 
       // 绘制数据点
-      ctx.fillStyle = "#667eea";
+      canvas.fillStyle = "#667eea";
       for (let i = 0; i < data.length; i++) {
         const x = padding + i * pointSpacing;
         const y = height - padding - (data[i] / maxValue) * graphHeight;
 
-        ctx.beginPath();
-        ctx.arc(x, y, 3, 0, Math.PI * 2);
-        ctx.fill();
+        canvas.beginPath();
+        canvas.arc(x, y, 3, 0, Math.PI * 2);
+        canvas.fill();
       }
 
       // 绘制阴影
       ctx.save();
-      ctx.globalAlpha = 0.2;
-      ctx.fillStyle = "#667eea";
-      ctx.beginPath();
-      ctx.moveTo(padding, height - padding);
+      canvas.globalAlpha = 0.2;
+      canvas.fillStyle = "#667eea";
+      canvas.beginPath();
+      canvas.moveTo(padding, height - padding);
 
       for (let i = 0; i < data.length; i++) {
         const x = padding + i * pointSpacing;
         const y = height - padding - (data[i] / maxValue) * graphHeight;
-        ctx.lineTo(x, y);
+        canvas.lineTo(x, y);
       }
 
-      ctx.lineTo(width - padding, height - padding);
-      ctx.closePath();
-      ctx.fill();
+      canvas.lineTo(width - padding, height - padding);
+      canvas.closePath();
+      canvas.fill();
       ctx.restore();
     },
   });
@@ -224,7 +228,7 @@ const layout = canvas.render(
       }),
 
       Text({
-        content: "直接调用 Canvas API 进行自定义绘制，同时支持可选的子元素",
+        content: "通过 ctx.canvas 调用原生 Canvas API，同时支持受控 transform 和可选子元素",
         font: { size: 14, family: "unifont" },
         color: "#666666",
       }),
@@ -235,7 +239,7 @@ const layout = canvas.render(
         gap: 10,
         children: [
           Text({
-            content: "1. 网格背景 + 直接 Canvas 绘制",
+            content: "1. 网格背景 + ctx.canvas 绘制",
             font: { size: 16, weight: "bold", family: "unifont" },
             color: "#666666",
           }),

package/examples/demo.html

@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>draw-call 演示</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+          "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+      }
+
+      .container {
+        background: white;
+        border-radius: 16px;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+        padding: 40px;
+        max-width: 860px;
+        width: 100%;
+      }
+
+      h1 {
+        margin-bottom: 10px;
+        color: #333;
+        font-size: 28px;
+      }
+
+      .subtitle {
+        color: #666;
+        margin-bottom: 30px;
+        font-size: 14px;
+      }
+
+      .canvas-wrapper {
+        background: #f9f9f9;
+        border-radius: 12px;
+        padding: 20px;
+        border: 1px solid #e0e0e0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 30px;
+        min-height: 420px;
+      }
+
+      canvas {
+        max-width: 100%;
+        height: auto;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+
+      .features {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 15px;
+        margin-top: 30px;
+      }
+
+      .feature-item {
+        background: #f5f5f5;
+        padding: 12px;
+        border-radius: 8px;
+        font-size: 12px;
+        color: #666;
+        border-left: 3px solid #667eea;
+      }
+
+      .feature-item strong {
+        color: #333;
+      }
+
+      .loading {
+        text-align: center;
+        color: #999;
+        font-size: 14px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>🎨 draw-call 演示</h1>
+      <p class="subtitle">使用声明式 Canvas 绘图库展示现代 UI 绘制能力</p>
+
+      <div class="canvas-wrapper">
+        <canvas id="canvas"></canvas>
+      </div>
+
+      <div class="features">
+        <div class="feature-item"><strong>📐 Flexbox 布局</strong><br />支持现代化布局引擎</div>
+        <div class="feature-item"><strong>🎨 丰富样式</strong><br />背景、边框、阴影、渐变等</div>
+        <div class="feature-item"><strong>📝 文本排版</strong><br />支持换行、对齐、字体自定义</div>
+        <div class="feature-item"><strong>🎯 声明式 API</strong><br />类似 React 的组件化方式</div>
+        <div class="feature-item"><strong>✨ 高清显示</strong><br />支持高 DPI 设备自适应</div>
+        <div class="feature-item"><strong>🚀 TypeScript</strong><br />完整的类型支持和开发体验</div>
+      </div>
+    </div>
+
+    <script src="demo.ts"></script>
+  </body>
+</html>

package/examples/demo.ts

@@ -2,7 +2,7 @@
  * draw-call 网页演示
  * 展示库的各项功能：逐句布局、样式、文本排版、图片渲染等
  */
-import { Box, createCanvas, Image, linearGradient, Svg, svg, Text } from "@codehz/draw-call";
+import { Box, createCanvas, Image, linearGradient, Svg, svg, Text } from "@/index";
 
 // 创建一个 canvas 并绘制图片内容，返回用于 Image 组件的 canvas
 function createDemoImage(): HTMLCanvasElement {

package/examples/image-smoothing.ts

@@ -1,4 +1,4 @@
-import { Box, createCanvas } from "@codehz/draw-call";
+import { Box, createCanvas } from "@/index";
 
 // 创建 Canvas，禁用图像平滑
 const canvas1 = createCanvas({

package/examples/richtext.ts

@@ -2,7 +2,7 @@
  * 示例：使用 draw-call 的 RichText 组件
  * 运行: bun examples/richtext.ts
  */
-import { Box, createCanvas, RichText, Text } from "@codehz/draw-call";
+import { Box, createCanvas, RichText, Text } from "@/index";
 import { GlobalFonts } from "@napi-rs/canvas";
 import { fileURLToPath } from "bun";
 

package/examples/transform.ts

@@ -3,7 +3,7 @@
  * 展示移动（translate）、旋转（rotate）、放大（scale）等变换效果
  * 运行: bun examples/transform.ts
  */
-import { Box, createCanvas, printLayout, Text, Transform } from "@codehz/draw-call";
+import { Box, createCanvas, printLayout, Text, Transform } from "@/index";
 import { GlobalFonts } from "@napi-rs/canvas";
 import { fileURLToPath } from "bun";
 

package/package.json

@@ -1,47 +1,70 @@
 {
   "name": "@codehz/draw-call",
-  "module": "./node/index.mjs",
+  "version": "0.6.0",
   "type": "module",
+  "main": "./dist/node/index.cjs",
+  "module": "./dist/node/index.mjs",
+  "types": "./dist/node/index.d.mts",
+  "exports": {
+    ".": {
+      "browser": {
+        "types": "./dist/browser/index.d.ts",
+        "import": "./dist/browser/index.js",
+        "require": "./dist/browser/index.cjs"
+      },
+      "bun": {
+        "types": "./dist/node/index.d.mts",
+        "import": "./dist/node/index.mjs"
+      },
+      "types": "./dist/node/index.d.mts",
+      "import": "./dist/node/index.mjs",
+      "require": "./dist/node/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "examples",
+    "README.md",
+    "LICENSE"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/codehz/draw-call.git"
   },
+  "scripts": {
+    "lint": "eslint --ext .ts,.tsx,.js --quiet",
+    "lint:fix": "eslint --ext .ts,.tsx,.js --fix",
+    "format": "prettier --write .",
+    "test": "bun test",
+    "release": "bun scripts/release.ts",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "*.{json,md}": [
+      "prettier --write"
+    ]
+  },
   "devDependencies": {
     "@fontpkg/unifont": "^15.0.1",
-    "@types/bun": "latest",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
-    "eslint": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "husky": "^9.0.0",
-    "lint-staged": "^15.0.0",
-    "prettier": "^3.0.0",
-    "prettier-plugin-organize-imports": "^4.0.0",
-    "tsdown": "^0.21.0-beta.2"
+    "@types/bun": "^1.3.13",
+    "@typescript-eslint/eslint-plugin": "^8.59.2",
+    "@typescript-eslint/parser": "^8.59.2",
+    "eslint": "^10.3.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "husky": "^9.1.7",
+    "lint-staged": "^17.0.2",
+    "prettier": "^3.8.3",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "tsdown": "^0.22.0"
   },
   "peerDependencies": {
-    "typescript": "^5"
+    "typescript": "^6.0.3"
   },
   "optionalDependencies": {
-    "@napi-rs/canvas": "^0.1.88"
-  },
-  "version": "0.5.2",
-  "main": "./node/index.cjs",
-  "types": "./node/index.d.cts",
-  "exports": {
-    ".": {
-      "browser": {
-        "types": "./browser/index.d.ts",
-        "import": "./browser/index.js",
-        "require": "./browser/index.cjs"
-      },
-      "bun": {
-        "types": "./node/index.d.mts",
-        "import": "./node/index.mjs"
-      },
-      "types": "./node/index.d.mts",
-      "import": "./node/index.mjs",
-      "require": "./node/index.cjs"
-    }
+    "@napi-rs/canvas": "^1.0.0"
   }
 }