frontend/examking-app/plugins/uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue

（开头部分） 7KB

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

<template>
	<view class="content">
		<view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }">
			<canvas
				class="cropper"
				:disable-scroll="true"
				@touchstart="touchStart"
				@touchmove="touchMove"
				@touchend="touchEnd"
				:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
				canvas-id="cropper"
				id="cropper"
			></canvas>
			<canvas
				class="cropper"
				:disable-scroll="true"
				:style="{
					position: 'fixed',
					top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`,
					left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`,
					width: `${cropperOpt.width * cropperOpt.pixelRatio}px`,
					height: `${cropperOpt.height * cropperOpt.pixelRatio}`
				}"
				canvas-id="targetId"
				id="targetId"
			></canvas>
		</view>
		<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
			<!-- #ifdef H5 -->
			<view class="upload" @tap="uploadTap">选择图片</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view class="upload" @tap="uploadTap">重新选择</view>
			<!-- #endif -->
			<view class="getCropperImage" @tap="getCropperImage(false)">确定</view>
		</view>
	</view>
</template>

<script>
import WeCropper from './weCropper.js';
export default {
	props: {
		// 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
		// mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"
		boundStyle: {
			type: Object,
			default() {
				return {
					lineWidth: 4,
					borderColor: 'rgb(245, 245, 245)',
					mask: 'rgba(0, 0, 0, 0.35)'
				};
			}
		}
		// // 裁剪框宽度，单位rpx
		// rectWidth: {
		// 	type: [String, Number],
		// 	default: 400
		// },
后面还有 230 行代码，解锁后查看完整代码

24 小时内免费解锁 3 个项目，之后 1 算力/个。 规则说明

AI 解读 AI

登录后可用，每次 10 算力，解读结果公开显示在下面。

还没有人解读过这个文件。