feat:形状打印页测试
This commit is contained in:
@@ -1,62 +1,147 @@
|
||||
<view class="container">
|
||||
<!-- 形状卡片预览区 -->
|
||||
<view class="card-container">
|
||||
<view wx:for="{{shapeCards}}" wx:key="index" class="shape-card">
|
||||
<image
|
||||
src="{{item.svgData}}"
|
||||
mode="aspectFit"
|
||||
class="shape-image" />
|
||||
<!-- 标题 -->
|
||||
<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
|
||||
class="color-box"
|
||||
style="background-color:{{item.fillColor}}"></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="control-panel">
|
||||
<slider
|
||||
min="1"
|
||||
max="5"
|
||||
value="{{columns}}"
|
||||
bindchange="setColumns"
|
||||
show-value />
|
||||
<text>布局列数: {{columns}}</text>
|
||||
<!-- 颜色选择区域 -->
|
||||
<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}}">
|
||||
生成图片
|
||||
loading="{{isGenerating}}"
|
||||
disabled="{{selectedShapes.length === 0}}">
|
||||
{{isGenerating ? '生成中...' : '生成练习页'}}
|
||||
</button>
|
||||
|
||||
<button
|
||||
bindtap="saveToAlbum"
|
||||
wx:if="{{generatedImage}}"
|
||||
type="warn"
|
||||
plain>
|
||||
class="save-btn"
|
||||
bindtap="saveToAlbum"
|
||||
type="warn">
|
||||
保存到相册
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 预览区域 -->
|
||||
<image
|
||||
wx:if="{{generatedImage}}"
|
||||
src="{{generatedImage}}"
|
||||
class="preview-image"
|
||||
bindtap="previewFullImage" />
|
||||
<!-- Canvas 画布 (隐藏) -->
|
||||
<canvas type="2d" id="mainCanvas" class="hidden-canvas"> </canvas>
|
||||
|
||||
<!-- 背景选择器 -->
|
||||
<view class="bg-picker">
|
||||
<text class="label">背景颜色:</text>
|
||||
<radio-group bindchange="setBackground">
|
||||
<radio
|
||||
wx:for="{{backgrounds}}"
|
||||
wx:key="value"
|
||||
value="{{item.value}}"
|
||||
color="{{item.color}}"
|
||||
checked="{{bgColor === item.value}}">
|
||||
{{item.name}}
|
||||
</radio>
|
||||
</radio-group>
|
||||
<!-- 预览生成的图片 -->
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user