HarmonyOS开发：高级绘制技术与复杂图形

核心要点：掌握Canvas高级绘制API，实现贝塞尔曲线、渐变填充、路径组合、自定义形状等复杂图形绘制技术，提升应用视觉表现力。

一、背景与动机

在HarmonyOS应用开发中，Canvas作为核心绘图组件，提供了强大的2D图形绘制能力。然而，实际开发场景中，简单的矩形、圆形绘制已无法满足日益增长的视觉需求。用户期望看到更流畅的曲线、更丰富的渐变效果、更复杂的图形组合，这些都需要掌握Canvas的高级绘制技术。

为什么需要高级绘制技术？

1. 视觉体验升级：现代应用追求精致的UI效果，平滑的曲线、立体感的渐变成为标配
2. 数据可视化需求：图表、仪表盘等组件需要绘制复杂路径和自定义形状
3. 游戏开发基础：角色、场景、特效等游戏元素依赖高级绘制能力
4. 性能优化考量：合理使用高级API可以减少绘制调用次数，提升渲染效率

二、核心原理

2.1 Canvas绘制架构

graph TB
    A[Canvas组件] --> B[CanvasRenderingContext2D]
    B --> C[路径系统 Path]
    B --> D[样式系统 Style]
    B --> E[变换系统 Transform]
    
    C --> C1[moveTo/lineTo]
    C --> C2[arc/arcTo]
    C --> C3[bezierCurveTo]
    C --> C4[quadraticCurveTo]
    
    D --> D1[fillStyle]
    D --> D2[strokeStyle]
    D --> D3[渐变 Gradient]
    D --> D4[阴影 Shadow]
    
    E --> E1[translate]
    E --> E2[rotate]
    E --> E3[scale]
    E --> E4[transform]
    
    classDef primary fill:#4A90E2,stroke:#2E5C8A,stroke-width:2px,color:#fff
    classDef secondary fill:#7B68EE,stroke:#5B48CE,stroke-width:2px,color:#fff
    classDef tertiary fill:#50C878,stroke:#3DA85A,stroke-width:2px,color:#fff
    
    class A primary
    class B,C,D,E secondary
    class C1,C2,C3,C4,D1,D2,D3,D4,E1,E2,E3,E4 tertiary

2.2 贝塞尔曲线原理

贝塞尔曲线是计算机图形学中的基础曲线，通过控制点定义曲线形状：

• 二次贝塞尔曲线：1个起点 + 1个控制点 + 1个终点
• 三次贝塞尔曲线：1个起点 + 2个控制点 + 1个终点

曲线计算公式：

二次：B(t) = (1-t)²P₀ + 2(1-t)tP₁ + t²P₂, t∈[0,1]
三次：B(t) = (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃, t∈[0,1]

2.3 渐变填充机制

Canvas支持两种渐变类型：

2.4 路径组合规则

graph LR
    A[路径组合] --> B[非零环绕规则]
    A --> C[奇偶环绕规则]
    
    B --> B1[外环顺时针]
    B --> B2[内环逆时针]
    B --> B3[填充内外环之间]
    
    C --> C1[计算交叉次数]
    C --> C2[奇数填充]
    C --> C3[偶数透明]
    
    classDef main fill:#FF6B6B,stroke:#CC5555,stroke-width:2px,color:#fff
    classDef sub fill:#4ECDC4,stroke:#3BAFA8,stroke-width:2px,color:#fff
    
    class A main
    class B,C,B1,B2,B3,C1,C2,C3 sub

三、代码实战

3.1 绘制平滑曲线图表

使用贝塞尔曲线绘制平滑的数据曲线，相比折线图视觉效果更佳：

// SmoothCurveChart.ets
@Component
export struct SmoothCurveChart {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  
  // 模拟数据点
  private dataPoints: number[] = [30, 80, 45, 120, 90, 60, 110, 70, 95, 50]
  private canvasWidth: number = 350
  private canvasHeight: number = 200
  
  build() {
    Column() {
      Canvas(this.context)
        .width(this.canvasWidth)
        .height(this.canvasHeight)
        .onReady(() => {
          this.drawSmoothCurve()
        })
    }
    .padding(20)
  }
  
  // 绘制平滑曲线
  private drawSmoothCurve(): void {
    const ctx = this.context
    const padding = 40
    const chartWidth = this.canvasWidth - padding * 2
    const chartHeight = this.canvasHeight - padding * 2
    
    // 清空画布
    ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
    
    // 绘制背景网格
    this.drawGrid(ctx, padding, chartWidth, chartHeight)
    
    // 计算数据点坐标
    const points: Point[] = this.calculatePoints(padding, chartWidth, chartHeight)
    
    // 绘制曲线
    ctx.beginPath()
    ctx.strokeStyle = '#4A90E2'
    ctx.lineWidth = 3
    
    // 使用三次贝塞尔曲线连接点
    for (let i = 0; i < points.length - 1; i++) {
      const p0 = points[Math.max(0, i - 1)]
      const p1 = points[i]
      const p2 = points[i + 1]
      const p3 = points[Math.min(points.length - 1, i + 2)]
      
      if (i === 0) {
        ctx.moveTo(p1.x, p1.y)
      }
      
      // 计算控制点
      const cp1x = p1.x + (p2.x - p0.x) / 6
      const cp1y = p1.y + (p2.y - p0.y) / 6
      const cp2x = p2.x - (p3.x - p1.x) / 6
      const cp2y = p2.y - (p3.y - p1.y) / 6
      
      ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y)
    }
    
    ctx.stroke()
    
    // 绘制数据点
    this.drawDataPoints(ctx, points)
  }
  
  // 绘制网格
  private drawGrid(ctx: CanvasRenderingContext2D, padding: number, 
                   width: number, height: number): void {
    ctx.strokeStyle = '#E8E8E8'
    ctx.lineWidth = 1
    
    // 横线
    for (let i = 0; i <= 5; i++) {
      const y = padding + (height / 5) * i
      ctx.beginPath()
      ctx.moveTo(padding, y)
      ctx.lineTo(padding + width, y)
      ctx.stroke()
    }
    
    // 竖线
    for (let i = 0; i <= 10; i++) {
      const x = padding + (width / 10) * i
      ctx.beginPath()
      ctx.moveTo(x, padding)
      ctx.lineTo(x, padding + height)
      ctx.stroke()
    }
  }
  
  // 计算数据点坐标
  private calculatePoints(padding: number, width: number, height: number): Point[] {
    const points: Point[] = []
    const max = Math.max(...this.dataPoints)
    const min = Math.min(...this.dataPoints)
    const range = max - min
    
    this.dataPoints.forEach((value, index) => {
      const x = padding + (width / (this.dataPoints.length - 1)) * index
      const y = padding + height - ((value - min) / range) * height
      points.push({ x, y })
    })
    
    return points
  }
  
  // 绘制数据点
  private drawDataPoints(ctx: CanvasRenderingContext2D, points: Point[]): void {
    ctx.fillStyle = '#FFFFFF'
    ctx.strokeStyle = '#4A90E2'
    ctx.lineWidth = 2
    
    points.forEach(point => {
      ctx.beginPath()
      ctx.arc(point.x, point.y, 5, 0, Math.PI * 2)
      ctx.fill()
      ctx.stroke()
    })
  }
}

interface Point {
  x: number
  y: number
}

3.2 渐变填充与阴影效果

实现具有立体感的渐变按钮和阴影效果：

// GradientShadowDemo.ets
@Component
export struct GradientShadowDemo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  
  build() {
    Column({ space: 20 }) {
      Canvas(this.context)
        .width(350)
        .height(400)
        .onReady(() => {
          this.drawGradientButtons()
        })
    }
    .padding(20)
  }
  
  private drawGradientButtons(): void {
    const ctx = this.context
    ctx.clearRect(0, 0, 350, 400)
    
    // 绘制线性渐变按钮
    this.drawLinearGradientButton(ctx, 50, 50, 250, 60)
    
    // 绘制径向渐变球体
    this.drawRadialGradientSphere(ctx, 175, 200, 60)
    
    // 绘制带阴影的卡片
    this.drawShadowCard(ctx, 50, 280, 250, 100)
  }
  
  // 线性渐变按钮
  private drawLinearGradientButton(ctx: CanvasRenderingContext2D, 
                                    x: number, y: number, 
                                    width: number, height: number): void {
    // 创建线性渐变
    const gradient = ctx.createLinearGradient(x, y, x + width, y)
    gradient.addColorStop(0, '#667EEA')
    gradient.addColorStop(0.5, '#764BA2')
    gradient.addColorStop(1, '#F093FB')
    
    // 绘制圆角矩形
    ctx.beginPath()
    this.roundRect(ctx, x, y, width, height, 15)
    
    ctx.fillStyle = gradient
    ctx.fill()
    
    // 绘制文字
    ctx.fillStyle = '#FFFFFF'
    ctx.font = '20px sans-serif'
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.fillText('渐变按钮', x + width / 2, y + height / 2)
  }
  
  // 径向渐变球体
  private drawRadialGradientSphere(ctx: CanvasRenderingContext2D, 
                                    cx: number, cy: number, radius: number): void {
    // 创建径向渐变（模拟球体光照效果）
    const gradient = ctx.createRadialGradient(
      cx - radius * 0.3, cy - radius * 0.3, 0,  // 内圆（高光点）
      cx, cy, radius                            // 外圆
    )
    gradient.addColorStop(0, '#FFFFFF')      // 高光
    gradient.addColorStop(0.3, '#64B5F6')    // 亮部
    gradient.addColorStop(0.7, '#1976D2')    // 暗部
    gradient.addColorStop(1, '#0D47A1')      // 最暗
    
    ctx.beginPath()
    ctx.arc(cx, cy, radius, 0, Math.PI * 2)
    ctx.fillStyle = gradient
    ctx.fill()
    
    // 添加阴影
    ctx.beginPath()
    ctx.ellipse(cx, cy + radius + 20, radius * 0.8, 15, 0, 0, Math.PI * 2)
    const shadowGradient = ctx.createRadialGradient(cx, cy + radius + 20, 0, 
                                                     cx, cy + radius + 20, radius * 0.8)
    shadowGradient.addColorStop(0, 'rgba(0, 0, 0, 0.3)')
    shadowGradient.addColorStop(1, 'rgba(0, 0, 0, 0)')
    ctx.fillStyle = shadowGradient
    ctx.fill()
  }
  
  // 带阴影的卡片
  private drawShadowCard(ctx: CanvasRenderingContext2D, 
                         x: number, y: number, 
                         width: number, height: number): void {
    // 设置阴影
    ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
    ctx.shadowBlur = 20
    ctx.shadowOffsetX = 5
    ctx.shadowOffsetY = 10
    
    // 绘制卡片
    ctx.beginPath()
    this.roundRect(ctx, x, y, width, height, 12)
    
    // 卡片渐变背景
    const gradient = ctx.createLinearGradient(x, y, x, y + height)
    gradient.addColorStop(0, '#FFFFFF')
    gradient.addColorStop(1, '#F5F5F5')
    
    ctx.fillStyle = gradient
    ctx.fill()
    
    // 重置阴影
    ctx.shadowColor = 'transparent'
    ctx.shadowBlur = 0
    ctx.shadowOffsetX = 0
    ctx.shadowOffsetY = 0
    
    // 绘制卡片内容
    ctx.fillStyle = '#333333'
    ctx.font = 'bold 16px sans-serif'
    ctx.textAlign = 'left'
    ctx.fillText('Canvas高级绘制', x + 20, y + 35)
    
    ctx.fillStyle = '#666666'
    ctx.font = '14px sans-serif'
    ctx.fillText('渐变、阴影、路径组合', x + 20, y + 60)
  }
  
  // 绘制圆角矩形路径
  private roundRect(ctx: CanvasRenderingContext2D, 
                    x: number, y: number, 
                    width: number, height: number, radius: number): void {
    ctx.moveTo(x + radius, y)
    ctx.lineTo(x + width - radius, y)
    ctx.arcTo(x + width, y, x + width, y + radius, radius)
    ctx.lineTo(x + width, y + height - radius)
    ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius)
    ctx.lineTo(x + radius, y + height)
    ctx.arcTo(x, y + height, x, y + height - radius, radius)
    ctx.lineTo(x, y + radius)
    ctx.arcTo(x, y, x + radius, y, radius)
    ctx.closePath()
  }
}

3.3 路径组合与复杂图形

使用路径组合规则绘制复杂图形：

// ComplexShapeDemo.ets
@Component
export struct ComplexShapeDemo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  
  build() {
    Column({ space: 20 }) {
      Canvas(this.context)
        .width(350)
        .height(500)
        .onReady(() => {
          this.drawComplexShapes()
        })
    }
    .padding(20)
  }
  
  private drawComplexShapes(): void {
    const ctx = this.context
    ctx.clearRect(0, 0, 350, 500)
    
    // 绘制环形（镂空圆）
    this.drawRing(ctx, 90, 100, 60, 30)
    
    // 绘制星形
    this.drawStar(ctx, 260, 100, 50, 5)
    
    // 绘制齿轮
    this.drawGear(ctx, 90, 280, 50, 12)
    
    // 绘制波浪形
    this.drawWave(ctx, 260, 280, 60)
    
    // 绘制花瓣图案
    this.drawFlower(ctx, 175, 420, 40)
  }
  
  // 绘制环形（使用路径组合）
  private drawRing(ctx: CanvasRenderingContext2D, cx: number, cy: number, 
                   outerRadius: number, innerRadius: number): void {
    ctx.beginPath()
    
    // 外圆（顺时针）
    ctx.arc(cx, cy, outerRadius, 0, Math.PI * 2, false)
    
    // 内圆（逆时针，形成镂空）
    ctx.arc(cx, cy, innerRadius, 0, Math.PI * 2, true)
    
    ctx.closePath()
    
    // 渐变填充
    const gradient = ctx.createLinearGradient(cx - outerRadius, cy, 
                                               cx + outerRadius, cy)
    gradient.addColorStop(0, '#FF6B6B')
    gradient.addColorStop(1, '#4ECDC4')
    
    ctx.fillStyle = gradient
    ctx.fill()
    
    // 标签
    ctx.fillStyle = '#333333'
    ctx.font = '12px sans-serif'
    ctx.textAlign = 'center'
    ctx.fillText('环形', cx, cy + outerRadius + 20)
  }
  
  // 绘制星形
  private drawStar(ctx: CanvasRenderingContext2D, cx: number, cy: number, 
                   radius: number, points: number): void {
    ctx.beginPath()
    
    const innerRadius = radius * 0.4
    const angleStep = Math.PI / points
    
    for (let i = 0; i < points * 2; i++) {
      const r = i % 2 === 0 ? radius : innerRadius
      const angle = i * angleStep - Math.PI / 2
      const x = cx + r * Math.cos(angle)
      const y = cy + r * Math.sin(angle)
      
      if (i === 0) {
        ctx.moveTo(x, y)
      } else {
        ctx.lineTo(x, y)
      }
    }
    
    ctx.closePath()
    
    // 渐变填充
    const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius)
    gradient.addColorStop(0, '#FFD93D')
    gradient.addColorStop(1, '#FF6B6B')
    
    ctx.fillStyle = gradient
    ctx.fill()
    
    ctx.strokeStyle = '#E5533D'
    ctx.lineWidth = 2
    ctx.stroke()
    
    ctx.fillStyle = '#333333'
    ctx.font = '12px sans-serif'
    ctx.textAlign = 'center'
    ctx.fillText('星形', cx, cy + radius + 20)
  }
  
  // 绘制齿轮
  private drawGear(ctx: CanvasRenderingContext2D, cx: number, cy: number, 
                   radius: number, teeth: number): void {
    ctx.beginPath()
    
    const toothHeight = radius * 0.2
    const toothWidth = Math.PI / teeth / 2
    
    for (let i = 0; i < teeth; i++) {
      const angle = (i / teeth) * Math.PI * 2
      
      // 齿根
      const x1 = cx + radius * Math.cos(angle - toothWidth)
      const y1 = cy + radius * Math.sin(angle - toothWidth)
      
      // 齿顶
      const x2 = cx + (radius + toothHeight) * Math.cos(angle)
      const y2 = cy + (radius + toothHeight) * Math.sin(angle)
      
      // 齿根（另一侧）
      const x3 = cx + radius * Math.cos(angle + toothWidth)
      const y3 = cy + radius * Math.sin(angle + toothWidth)
      
      if (i === 0) {
        ctx.moveTo(x1, y1)
      } else {
        ctx.lineTo(x1, y1)
      }
      
      ctx.lineTo(x2, y2)
      ctx.lineTo(x3, y3)
    }
    
    ctx.closePath()
    
    // 中心镂空
    ctx.moveTo(cx + radius * 0.3, cy)
    ctx.arc(cx, cy, radius * 0.3, 0, Math.PI * 2, true)
    
    // 金属渐变
    const gradient = ctx.createLinearGradient(cx - radius, cy - radius, 
                                               cx + radius, cy + radius)
    gradient.addColorStop(0, '#B0BEC5')
    gradient.addColorStop(0.5, '#ECEFF1')
    gradient.addColorStop(1, '#78909C')
    
    ctx.fillStyle = gradient
    ctx.fill()
    
    ctx.strokeStyle = '#546E7A'
    ctx.lineWidth = 2
    ctx.stroke()
    
    ctx.fillStyle = '#333333'
    ctx.font = '12px sans-serif'
    ctx.textAlign = 'center'
    ctx.fillText('齿轮', cx, cy + radius + 40)
  }
  
  // 绘制波浪形
  private drawWave(ctx: CanvasRenderingContext2D, cx: number, cy: number, radius: number): void {
    ctx.beginPath()
    
    const waves = 5
    const points = 100
    
    for (let i = 0; i <= points; i++) {
      const angle = (i / points) * Math.PI * 2
      const waveOffset = Math.sin(angle * waves) * radius * 0.2
      const r = radius + waveOffset
      const x = cx + r * Math.cos(angle)
      const y = cy + r * Math.sin(angle)
      
      if (i === 0) {
        ctx.moveTo(x, y)
      } else {
        ctx.lineTo(x, y)
      }
    }
    
    ctx.closePath()
    
    // 波浪渐变
    const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius * 1.2)
    gradient.addColorStop(0, '#00BCD4')
    gradient.addColorStop(1, '#006064')
    
    ctx.fillStyle = gradient
    ctx.fill()
    
    ctx.strokeStyle = '#0097A7'
    ctx.lineWidth = 2
    ctx.stroke()
    
    ctx.fillStyle = '#333333'
    ctx.font = '12px sans-serif'
    ctx.textAlign = 'center'
    ctx.fillText('波浪', cx, cy + radius + 40)
  }
  
  // 绘制花瓣图案
  private drawFlower(ctx: CanvasRenderingContext2D, cx: number, cy: number, radius: number): void {
    const petals = 6
    
    for (let i = 0; i < petals; i++) {
      const angle = (i / petals) * Math.PI * 2
      
      ctx.beginPath()
      ctx.moveTo(cx, cy)
      
      // 使用贝塞尔曲线绘制花瓣
      const petalLength = radius
      const petalWidth = radius * 0.4
      
      const tipX = cx + petalLength * Math.cos(angle)
      const tipY = cy + petalLength * Math.sin(angle)
      
      const cp1X = cx + petalWidth * Math.cos(angle + Math.PI / 4)
      const cp1Y = cy + petalWidth * Math.sin(angle + Math.PI / 4)
      
      const cp2X = cx + petalWidth * Math.cos(angle - Math.PI / 4)
      const cp2Y = cy + petalWidth * Math.sin(angle - Math.PI / 4)
      
      ctx.quadraticCurveTo(cp1X, cp1Y, tipX, tipY)
      ctx.quadraticCurveTo(cp2X, cp2Y, cx, cy)
      
      ctx.closePath()
      
      // 每个花瓣不同颜色
      const hue = (i / petals) * 360
      ctx.fillStyle = `hsla(${hue}, 70%, 60%, 0.8)`
      ctx.fill()
      
      ctx.strokeStyle = `hsla(${hue}, 70%, 40%, 1)`
      ctx.lineWidth = 1
      ctx.stroke()
    }
    
    // 中心圆
    ctx.beginPath()
    ctx.arc(cx, cy, radius * 0.2, 0, Math.PI * 2)
    ctx.fillStyle = '#FFD93D'
    ctx.fill()
    
    ctx.fillStyle = '#333333'
    ctx.font = '12px sans-serif'
    ctx.textAlign = 'center'
    ctx.fillText('花瓣', cx, cy + radius + 20)
  }
}

四、踩坑与注意事项

4.1 贝塞尔曲线控制点计算

问题：直接连接数据点会导致曲线"过冲"，出现不自然的波动。

解决方案：使用Catmull-Rom样条插值计算控制点，确保曲线平滑通过所有数据点：

// 控制点计算公式
const tension = 0.5  // 张力系数，控制曲线弯曲程度
const cp1x = p1.x + (p2.x - p0.x) * tension / 3
const cp1y = p1.y + (p2.y - p0.y) * tension / 3
const cp2x = p2.x - (p3.x - p1.x) * tension / 3
const cp2y = p2.y - (p3.y - p1.y) * tension / 3

4.2 渐变颜色插值问题

问题：渐变颜色在中间区域可能出现"脏色"，特别是从红色到蓝色过渡时会出现紫色。

解决方案：

• 使用HSL颜色空间进行插值，避免RGB直接混合
• 在关键位置添加更多颜色停靠点，精确控制过渡

// 不推荐：RGB直接渐变
gradient.addColorStop(0, '#FF0000')
gradient.addColorStop(1, '#0000FF')  // 中间会出现紫色

// 推荐：添加中间色控制过渡
gradient.addColorStop(0, '#FF0000')
gradient.addColorStop(0.5, '#FFFF00')  // 黄色过渡
gradient.addColorStop(1, '#0000FF')

4.3 路径组合填充规则

问题：绘制环形时，内圆方向错误导致填充异常。

解决方案：理解非零环绕规则，外圆顺时针、内圆逆时针才能形成镂空效果：

// 正确的环形绘制
ctx.arc(cx, cy, outerRadius, 0, Math.PI * 2, false)  // 外圆顺时针
ctx.arc(cx, cy, innerRadius, 0, Math.PI * 2, true)   // 内圆逆时针

4.4 性能优化建议

1. 路径复用：相同形状使用Path2D对象缓存
2. 减少状态切换：批量设置样式，避免频繁切换fillStyle/strokeStyle
3. 离屏渲染：复杂静态图形预渲染到离屏Canvas
4. 避免过度绘制：合理使用clip裁剪绘制区域

// 性能对比：频繁切换 vs 批量绘制
// ❌ 低效方式
shapes.forEach(shape => {
  ctx.fillStyle = shape.color
  ctx.fill(shape.path)
})

// ✅ 高效方式：按颜色分组
const colorGroups = groupBy(shapes, 'color')
Object.entries(colorGroups).forEach(([color, items]) => {
  ctx.fillStyle = color
  items.forEach(item => ctx.fill(item.path))
})

五、总结

本文深入探讨了HarmonyOS Canvas的高级绘制技术，涵盖以下核心内容：

技术要点回顾

最佳实践建议

1. 理解数学原理：掌握贝塞尔曲线控制点计算，才能绘制出符合预期的曲线
2. 善用渐变：合理使用线性/径向渐变，可以大幅提升视觉效果
3. 路径组合技巧：通过控制路径方向实现镂空、叠加等复杂效果
4. 性能意识：高级绘制往往计算量较大，注意优化策略

进阶方向

• 自定义View组件：将绘制逻辑封装为可复用组件
• 动画集成：结合requestAnimationFrame实现动态绘制
• 交互增强：添加触摸事件，实现可交互的图形组件
• WebGL对比：了解Canvas 2D与WebGL的适用场景差异

掌握这些高级绘制技术，将为开发精致UI、数据可视化、游戏场景奠定坚实基础。在实际项目中，建议从简单图形开始，逐步尝试复杂组合，积累绘制经验。