79 lines
2.2 KiB
Text
79 lines
2.2 KiB
Text
<view class="avatar-edit-container">
|
|
<!-- 图片编辑区域 -->
|
|
<view class="edit-area">
|
|
<view class="image-wrapper" style="transform: rotate({{rotateAngle}}deg);">
|
|
<image
|
|
class="edit-image"
|
|
src="{{currentImagePath}}"
|
|
mode="widthFix"
|
|
bindload="onImageLoad"
|
|
></image>
|
|
|
|
<!-- 裁剪框（圆形） -->
|
|
<view
|
|
wx:if="{{isCropping}}"
|
|
class="crop-box"
|
|
style="left: {{cropX}}px; top: {{cropY}}px; width: {{cropSize}}px; height: {{cropSize}}px;"
|
|
catchtouchstart="onCropMoveStart"
|
|
catchtouchmove="onCropMove"
|
|
catchtouchend="onCropMoveEnd"
|
|
>
|
|
<view class="crop-circle"></view>
|
|
<view class="crop-handle"></view>
|
|
</view>
|
|
|
|
<!-- 模糊Canvas -->
|
|
<canvas
|
|
wx:if="{{isBlurring}}"
|
|
id="blurCanvas"
|
|
type="2d"
|
|
class="blur-canvas"
|
|
bindtouchstart="onBlurTouch"
|
|
bindtouchmove="onBlurTouch"
|
|
></canvas>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 工具按钮栏 -->
|
|
<view class="toolbar">
|
|
<view class="tool-item {{isCropping ? 'active' : ''}}" bindtap="toggleCrop">
|
|
<text class="tool-icon">✂️</text>
|
|
<text class="tool-text">裁剪</text>
|
|
</view>
|
|
|
|
<view class="tool-item" bindtap="rotateImage">
|
|
<text class="tool-icon">🔄</text>
|
|
<text class="tool-text">旋转</text>
|
|
</view>
|
|
|
|
<view class="tool-item {{isBlurring ? 'active' : ''}}" bindtap="toggleBlur">
|
|
<text class="tool-icon">🌫️</text>
|
|
<text class="tool-text">模糊</text>
|
|
</view>
|
|
|
|
<view class="tool-item {{editHistory.length > 0 ? '' : 'disabled'}}" bindtap="undoEdit">
|
|
<text class="tool-icon">↩️</text>
|
|
<text class="tool-text">撤回</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部操作栏 -->
|
|
<view class="bottom-actions">
|
|
<button class="cancel-btn" bindtap="cancelEdit">取消</button>
|
|
<button class="confirm-btn" bindtap="confirmEdit">完成</button>
|
|
</view>
|
|
|
|
<!-- 隐藏的Canvas用于处理 -->
|
|
<canvas
|
|
id="cropCanvas"
|
|
type="2d"
|
|
style="position: fixed; left: -9999px; top: -9999px;"
|
|
></canvas>
|
|
|
|
<canvas
|
|
id="mergeCanvas"
|
|
type="2d"
|
|
style="position: fixed; left: -9999px; top: -9999px;"
|
|
></canvas>
|
|
</view>
|
|
|