第一章：你好，Konva (Hello Konva)第一章是所有 Konva 应用的起点。如果这一章没搞清楚，后面画出

第一章是所有 Konva 应用的起点。如果这一章没搞清楚，后面画出来的东西可能会看不见，或者位置乱跑。

这一章的主角是：舞台 (Stage) 、图层 (Layer) 和 基本形状 (Basic Shapes) 。

1. 核心概念与属性详解

你需要掌握以下 4 个最基础的概念/属性：

A. Stage (舞台)

含义：它是整个应用的根节点。
作用：它对应 HTML 页面里的一个 <div> 容器。
关键属性：

- width / height：必须设置。通常设为 window.innerWidth 来占满全屏。
- 注意：一个 React 组件里通常只有一个 Stage。

B. Layer (图层)

含义：它是放在舞台上的透明画纸。
作用：

- Konva 的渲染机制要求：所有的形状 (Rect, Circle, Line...) 必须放在 Layer 里面，不能直接放在 Stage 里。
- 它对应 HTML 里的 <canvas> 元素。
- 你可以有多个 Layer（比如一个背景层，一个动画层），这样重绘互不影响，性能更好。

C. Rect (矩形) 与 Circle (圆形)

含义：最基础的绘图单元。
Rect 属性：

- x, y：左上角的坐标。
- width, height：宽和高。

Circle 属性（新手最容易错）：

- x, y：圆心的坐标（注意：不是左上角，是中心点！）。
- radius：半径。圆没有 width 和 height 属性，全靠半径决定大小。

D. fill 与 stroke (样式)

fill：填充色（图形内部的颜色）。
stroke：描边色（边缘线条的颜色）。
strokeWidth：描边的粗细。

2. 视觉逻辑图 (Mental Model)

请记住 Konva 的“三明治结构”：

Stage (最底层) : 浏览器里的框。
Layer (中间层) : 实际画画的纸（Canvas）。
Shape (最上层) : 纸上的画。

3. 代码实战 (React 形式)

下面的代码展示了最标准的 Konva React 组件结构，以及矩形和圆形的区别。

安装依赖

如果你是在一个现有的 React 项目中，需要安装：

npm install konva react-konva

import React from 'react';
// 1. 引入所有需要的组件
import { Stage, Layer, Rect, Circle, Text } from 'react-konva';

const App = () => {
  return (
    // ==========================================
    // 概念 A: Stage (舞台) - 必须要有宽和高
    // ==========================================
    <Stage width={window.innerWidth} height={window.innerHeight}>
      
      {/* ======================================== */}
      {/* 概念 B: Layer (图层) - 形状必须包在这里面 */}
      {/* ======================================== */}
      <Layer>
        
        {/* 文字说明 */}
        <Text text="左边是矩形，右边是圆形" x={50} y={20} fontSize={15} />

        {/* ======================================== */}
        {/* 概念 C: Rect (矩形) */}
        {/* ======================================== */}
        <Rect
          x={50}          // 矩形左上角 x
          y={50}          // 矩形左上角 y
          width={100}     // 宽度
          height={100}    // 高度
          
          // 概念 D: 样式
          fill="blue"     // 内部填充蓝色
          stroke="black"  // 边框黑色
          strokeWidth={4} // 边框 4px 粗
          
          // 阴影效果 (额外赠送的属性)
          shadowBlur={10}
        />

        {/* ======================================== */}
        {/* 概念 C: Circle (圆形) */}
        {/* ======================================== */}
        <Circle
          x={250}         // 【重要】圆心的 x
          y={100}         // 【重要】圆心的 y
          
          radius={50}     // 【重要】半径！不要写 width/height
          
          fill="red"      // 红色填充
          stroke="black"
          strokeWidth={4}
        />
        
      </Layer>
    </Stage>
  );
};

export default App;

4. 深度代码解释

坐标系的差异：

- 看代码里的 Rect：x: 50, y: 50。由于它是从左上角开始画，所以它的中心点其实在 (100, 100)。
- 看代码里的 Circle：x: 250, y: 100。因为这是圆心坐标，所以这个圆是以 (250, 100) 为中心向四周扩散的。
- 理解这一点对后续做对齐排版非常重要。

为什么一定要写 <Layer> ？

- 如果你把 <Rect> 直接写在 <Stage> 下面：<Stage><Rect /></Stage>。
- 结果：控制台会报错，或者屏幕一片空白。
- 原因：Stage 是 HTML 容器，它不懂怎么画矩形，只有 Layer (Canvas) 懂。

颜色的写法：

- fill 和 stroke 支持所有 CSS 颜色格式。
- 比如："red", "#ff0000", "rgb(255, 0, 0)", 甚至 "transparent" (透明)。