148 lines
5.5 KiB
Plaintext
148 lines
5.5 KiB
Plaintext
<view class="container">
|
|
<!-- 标题 -->
|
|
<view class="header">
|
|
<text class="title">形状涂色练习生成器</text>
|
|
<text class="subtitle">为小朋友制作涂色练习页</text>
|
|
</view>
|
|
|
|
<!-- 形状选择区域 -->
|
|
<view class="section">
|
|
<view class="section-title">选择形状</view>
|
|
<view class="shape-selector">
|
|
<view
|
|
wx:for="{{availableShapes}}"
|
|
wx:key="id"
|
|
class="shape-option {{currentShapeType === item.id ? 'active' : ''}}"
|
|
data-shape-id="{{item.id}}"
|
|
bindtap="selectShape">
|
|
<!-- 使用简单的CSS形状预览 -->
|
|
<view class="shape-preview-box">
|
|
<view class="shape-icon shape-icon-{{item.id}}"></view>
|
|
</view>
|
|
<text class="shape-name">{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 颜色选择区域 -->
|
|
<view class="section">
|
|
<view class="section-title">选择颜色</view>
|
|
<view class="color-selector">
|
|
<view
|
|
wx:for="{{availableColors}}"
|
|
wx:key="value"
|
|
class="color-option {{currentColor === item.value ? 'active' : ''}}"
|
|
style="background-color: {{item.value}}"
|
|
data-color="{{item.value}}"
|
|
bindtap="selectColor">
|
|
<view class="color-name">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 添加按钮 -->
|
|
<view class="section">
|
|
<button class="add-btn" bindtap="addShape" type="primary">
|
|
<text class="add-icon">+</text>
|
|
添加 {{currentShapeType === 'circle' ? '圆形' : currentShapeType ===
|
|
'square' ? '正方形' : currentShapeType === 'rectangle' ? '长方形' :
|
|
currentShapeType === 'triangle' ? '三角形' : currentShapeType ===
|
|
'oval' ? '椭圆形' : currentShapeType === 'diamond' ? '菱形' :
|
|
currentShapeType === 'star' ? '星形' : currentShapeType === 'heart'
|
|
? '心形' : currentShapeType === 'hexagon' ? '六边形' :
|
|
currentShapeType === 'pentagon' ? '五边形' : currentShapeType ===
|
|
'semicircle' ? '半圆形' : currentShapeType === 'trapezoid' ? '梯形'
|
|
: '形状'}}
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 已选择的形状列表 -->
|
|
<view class="section" wx:if="{{selectedShapes.length > 0}}">
|
|
<view class="section-title">
|
|
已选择的形状 ({{selectedShapes.length}})
|
|
<button class="clear-btn" bindtap="clearShapes" size="mini">
|
|
清空
|
|
</button>
|
|
</view>
|
|
<view class="selected-shapes">
|
|
<view
|
|
wx:for="{{selectedShapes}}"
|
|
wx:key="id"
|
|
class="selected-shape"
|
|
data-index="{{index}}"
|
|
bindlongpress="removeShape">
|
|
<view
|
|
class="shape-preview"
|
|
style="background-color: {{item.color}}"></view>
|
|
<view class="shape-details">
|
|
<text class="shape-info">{{item.name}}</text>
|
|
<text class="color-info">{{item.color}}</text>
|
|
</view>
|
|
<text class="remove-hint">长按删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 设置区域 -->
|
|
<view class="section">
|
|
<view class="section-title">打印设置</view>
|
|
|
|
<view class="setting-item">
|
|
<text class="setting-label">背景颜色:</text>
|
|
<radio-group bindchange="setBackground" class="bg-radio-group">
|
|
<label
|
|
wx:for="{{backgrounds}}"
|
|
wx:key="value"
|
|
class="bg-option">
|
|
<radio
|
|
value="{{item.value}}"
|
|
checked="{{bgColor === item.value}}"
|
|
color="#1976d2" />
|
|
<text>{{item.name}}</text>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
|
|
<view class="feature-intro">
|
|
<text class="intro-title">功能说明:</text>
|
|
<text class="intro-text">• 上半部分：带颜色的形状示例</text>
|
|
<text class="intro-text">• 下半部分：无颜色的练习区域</text>
|
|
<text class="intro-text">• 图片大小：A4 纸张，适合打印</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="section">
|
|
<button
|
|
class="generate-btn"
|
|
bindtap="generateImage"
|
|
type="primary"
|
|
loading="{{isGenerating}}"
|
|
disabled="{{selectedShapes.length === 0}}">
|
|
{{isGenerating ? '生成中...' : '生成练习页'}}
|
|
</button>
|
|
|
|
<button
|
|
wx:if="{{generatedImage}}"
|
|
class="save-btn"
|
|
bindtap="saveToAlbum"
|
|
type="warn">
|
|
保存到相册
|
|
</button>
|
|
</view>
|
|
|
|
<!-- Canvas 画布 (隐藏) -->
|
|
<canvas type="2d" id="mainCanvas" class="hidden-canvas"> </canvas>
|
|
|
|
<!-- 预览生成的图片 -->
|
|
<view class="section" wx:if="{{generatedImage}}">
|
|
<view class="section-title">生成的练习页</view>
|
|
<image
|
|
src="{{generatedImage}}"
|
|
class="preview-image"
|
|
mode="aspectFit"
|
|
bindtap="previewImage" />
|
|
<text class="preview-hint">点击图片可放大预览 • A4尺寸 • 适合打印</text>
|
|
</view>
|
|
</view>
|