优化一系列

This commit is contained in:
王创世 2025-06-17 16:51:43 +08:00
parent d3089285fb
commit d7fdf23901
20 changed files with 1733 additions and 1512 deletions

View File

@ -22,7 +22,7 @@
<span class="first-name white-space">{{detail.title}}</span>
<view class="rbot flex align-items">
<image src="/static/center/address.png" mode="" style="width: 32rpx;height: 32rpx;margin-right: 20rpx;"></image>
<span class="white-space">{{detail.address_detail}}</span>
<span class="white-space">{{detail.address}}{{detail.address_detail}}</span>
</view>
</view>
</view>
@ -507,7 +507,7 @@
width: 430rpx;
// height: 77rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-weight: 600;
font-size: 28rpx;
color: #323232;
// margin-left: 16rpx;
@ -695,12 +695,12 @@
// height: 1100rpx;
.popup_tk{
font-size: 42rpx;font-weight: 800;margin: 12rpx 0 24rpx 0;height: 120rpx;
font-size: 42rpx;font-weight: 800;margin: 12rpx 0 24rpx 0;
text-align: center;
}
.popup-content{
height: 700rpx;
margin-bottom: 140rpx;
margin-bottom: 75rpx;
// overflow-y: auto;
}
.popup-content-item{

View File

@ -5,7 +5,7 @@
<view class="con-center w-100 flex justify-center flex-column align-items flex-start">
<view class="first-box flex flex-start flex-column justify-start">
<view class="flex align-items justify-center">
<view class="flex align-items justify-center" @click="toDetail">
<image class="head_img" :src="info.detail.images[0]" mode=""></image>
<view style="margin-left: 20rpx;">
<view class="flex align-items">
@ -187,7 +187,7 @@
<view class="first-image flex align-items space-between" style="width: 100%;margin-top: 30rpx;">
<view class="flex" style="align-items: center;">
<image src="/static/center/address.png" mode="" class="icon-size"></image>
<text>{{ info.detail.address_detail }}</text>
<text>{{ info.detail.address }}{{ info.detail.address_detail }}</text>
</view>
</view>
</view>
@ -231,7 +231,7 @@
<view class="first-image flex align-items space-between" style="width: 100%;margin-top: 30rpx;">
<view class="flex" style="align-items: center;">
<image src="/static/center/address.png" mode="" class="icon-size"></image>
<text>{{ info.detail.address_detail }}</text>
<text>{{ info.detail.address }}{{ info.detail.address_detail }}</text>
</view>
</view>
</view>
@ -299,6 +299,11 @@ export default {
}
},
methods: {
toDetail() {
uni.navigateTo({
url: '/packageA/center/detail?id=' + this.info.activity_id
});
},
SuccessDo(type) {
uni.$u.http.post('/api/school.newworker.activity.order/shop_confirmation', {
order_no: this.id,
@ -483,7 +488,7 @@ export default {
width: 440rpx;
height: 39rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-weight: 600;
font-size: 28rpx;
color: #323232;
// margin-left: 16rpx;

View File

@ -305,8 +305,8 @@
<u-popup @touchmove.native.stop.prevent :closeOnClickOverlay="false" :closeable="false" :show="show" :round="10" mode="center"
@close="close" @open="open" :custom-style="popupStylezf">
<span style="font-size: 40rpx;font-weight: 800;height: 120rpx;">用户参与须知</span>
<scroll-view ref="scrollView" :scroll-top="scrollTop" :show-scrollbar='true'
@scrolltolower="handleScroll" scroll-y="true" style="height: 800rpx;margin-bottom: 24rpx;">
<scroll-view ref="scrollView" :scroll-top="scrollTop"
@scrolltolower="handleScroll" :scroll-y="true" style="height: 800rpx;margin-bottom: 24rpx;">
<view class="popup flex align-items flex-column">
<rich-text style="text-align: justify;" :nodes="Negotiate"></rich-text>
</view>
@ -408,8 +408,8 @@ export default {
qrUrl: '',
is_collect: 0,
popupStylezf: {
width: '642rpx',
padding: '24rpx 24rpx 42rpx 24rpx',
width: '620rpx',
padding: '50rpx 40rpx 40rpx 40rpx',
height: '984rpx',
margin: '0 auto', //
display: 'flex',
@ -1135,7 +1135,7 @@ export default {
width: 430rpx;
// height: 77rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-weight: 600;
font-size: 28rpx;
color: #323232;
// margin-left: 16rpx;

View File

@ -2,7 +2,7 @@
<view class="detail_all">
<view class="nav">
<u-navbar :is-back="true" leftIconColor="#000000" :autoBack="true" :bgColor="background"
title="详情" :titleStyle="{color:'#000000',fontSize:'32rpx'}"></u-navbar>
title="详情" :titleStyle="{color:'#000000',fontSize:'34rpx',fontWeight:'bold'}"></u-navbar>
</view>
<view class="box flex justify-start flex-column align-items" :class="overlay ? 'no-scroll' : ''">
<view class="swiper">
@ -110,7 +110,7 @@
</view>
<view class="third-center">
<view class="v_html">
<rich-text :nodes="detail.content"></rich-text>
<rich-text style="white-space: pre-line;" :nodes="detail.content"></rich-text>
</view>
<image mode="widthFix" class="imgs" v-for="(item, index) in detail.images" :key="index" :src="item">
</image>
@ -1236,10 +1236,8 @@
height: 100%;
.v_html {
word-wrap: break-word;
word-break: break-all;
font-size: 26rpx;
line-height: 42rpx;
font-size: 28rpx;
line-height: 44rpx;
}
.imgs {

View File

@ -2,7 +2,7 @@
<view class="detail_all">
<view class="nav">
<u-navbar :is-back="true" leftIconColor="#000000" :autoBack="true" :bgColor="background" title="详情"
:titleStyle="{color:'#000000',fontSize:'32rpx'}"></u-navbar>
:titleStyle="{color:'#000000',fontSize:'34rpx',fontWeight:'bold'}"></u-navbar>
</view>
<view class="box flex justify-start flex-column align-items" :class="overlay ? 'no-scroll' : ''">
<view class="swiper">
@ -162,7 +162,7 @@
</view>
<view class="third-center">
<view class="v_html">
<rich-text class="rich_class" :nodes="detail.content"></rich-text>
<rich-text style="white-space: pre-line;" :nodes="detail.content"></rich-text>
</view>
<image mode="widthFix" class="imgs" v-for="(item, index) in detail.images" :key="index" :src="item">
</image>
@ -1176,8 +1176,8 @@
margin: 0 auto;
.v_html {
word-wrap: break-word;
word-break: break-all;
font-size: 28rpx;
line-height: 44rpx;
}
.imgs {

View File

@ -81,6 +81,7 @@
uni.$u.http.get('/api/school.newworker.activity.order/order_list', {
params: {
activity_id: that.id,
status:'2,3,9',
page: 1,
limit: 1000,
},

View File

@ -7,10 +7,17 @@
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
:style="{ width: cropperOpt.width, height: cropperOpt.height }"
canvas-id="cropper"
id="cropper"
></canvas>
<view class="cropper-circle-mask" v-show="circularCrop" :style="{
left: `${cropperOpt.cut.x}px`,
top: `${cropperOpt.cut.y}px`,
width: `${cropperOpt.cut.width}px`,
height: `${cropperOpt.cut.height}px`,
zIndex: 100
}"></view>
<canvas
class="cropper"
:disable-scroll="true"
@ -19,7 +26,8 @@
top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`,
left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`,
width: `${cropperOpt.width * cropperOpt.pixelRatio}px`,
height: `${cropperOpt.height * cropperOpt.pixelRatio}`
height: `${cropperOpt.height * cropperOpt.pixelRatio}`,
}"
canvas-id="targetId"
id="targetId"
@ -48,42 +56,15 @@ export default {
default() {
return {
lineWidth: 4,
borderColor: 'rgb(245, 245, 245)',
mask: 'rgba(0, 0, 0, 0.35)'
borderColor: 'rgb(245, 245, 245)'
};
}
},
// 使
circularCrop: {
type: Boolean,
default: true
}
// // rpx
// rectWidth: {
// type: [String, Number],
// default: 400
// },
// // rpx
// rectHeight: {
// type: [String, Number],
// default: 400
// },
// // rpx
// destWidth: {
// type: [String, Number],
// default: 400
// },
// // rpx
// destHeight: {
// type: [String, Number],
// default: 400
// },
// // "png""jpg"
// fileType: {
// type: String,
// default: 'jpg',
// },
// //
// // H5使
// quality: {
// type: [Number, String],
// default: 1
// }
},
data() {
return {
@ -95,7 +76,7 @@ export default {
cropper: '',
cropperOpt: {
id: 'cropper',
targetId: 'targetCropper',
targetId: 'targetId',
pixelRatio: 1,
width: 0,
height: 0,
@ -108,9 +89,7 @@ export default {
height: this.originWidth
},
boundStyle: {
lineWidth: uni.upx2px(this.boundStyle.lineWidth),
mask: this.boundStyle.mask,
color: this.boundStyle.borderColor
lineWidth: uni.upx2px(this.boundStyle.lineWidth)
}
},
//
@ -119,7 +98,7 @@ export default {
// px
rectWidth: 200,
// 'png'"jpg"
fileType: 'jpg',
fileType: 'png', // png
src: '' //
};
},
@ -143,6 +122,17 @@ export default {
}
this.rectWidth = Number(option.rectWidth);
if (option.fileType) this.fileType = option.fileType;
// PNG
if (this.circularCrop && this.fileType === 'jpg') {
this.fileType = 'png';
}
//
if (this.circularCrop) {
this.cropperOpt.boundStyle.isCircle = true;
}
//
this.cropper = new WeCropper(this.cropperOpt)
.on('ready', ctx => {
@ -186,29 +176,138 @@ export default {
getCropperImage(isPre = false) {
if (!this.src) return this.$toast('请先选择图片再裁剪');
// 使 directCircleCrop
if (this.circularCrop) {
// 使
const size = 300;
// 1. 使weCropper
const options = {
destWidth: size,
destHeight: size,
fileType: 'png'
};
this.cropper.getCropperImage(options, (rectPath, err) => {
if (err) {
console.error('矩形裁剪失败:', err);
return;
}
console.log('矩形裁剪成功,路径:', rectPath);
// 2.
const ctx = uni.createCanvasContext('targetId');
//
ctx.clearRect(0, 0, size, size);
//
ctx.setFillStyle('rgba(0,0,0,0)');
ctx.fillRect(0, 0, size, size);
//
ctx.save();
ctx.beginPath();
ctx.arc(size/2, size/2, size/2, 0, 2 * Math.PI);
ctx.clip();
//
ctx.drawImage(rectPath, 0, 0, size, size);
ctx.restore();
//
ctx.draw(false, () => {
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'targetId',
x: 0,
y: 0,
width: size,
height: size,
destWidth: size,
destHeight: size,
fileType: 'png',
backgroundColor: 'transparent',
success: (res) => {
console.log('圆形裁剪成功:', res.tempFilePath);
if (isPre) {
uni.previewImage({
urls: [res.tempFilePath]
});
} else {
uni.$emit('uAvatarCropper', res.tempFilePath);
uni.navigateBack();
}
},
fail: (err) => {
console.error('圆形裁剪失败:', err);
// 使
if (isPre) {
uni.previewImage({
urls: [rectPath]
});
} else {
uni.$emit('uAvatarCropper', rectPath);
uni.navigateBack();
}
}
});
}, 300);
});
});
return;
}
//
this.useOriginalCrop(isPre);
},
// 使
useOriginalCrop(isPre = false) {
// 使
const size = 300; //
let cropper_opt = {
destHeight: Number(this.destWidth), // uni.canvasToTempFilePath
destWidth: Number(this.destWidth),
destHeight: size,
destWidth: size,
fileType: this.fileType
};
this.cropper.getCropperImage(cropper_opt, (path, err) => {
if (err) {
uni.showModal({
title: '温馨提示',
content: err.message
});
} else {
if (isPre) {
uni.previewImage({
current: '', // http
urls: [path] // http
console.log('使用原始裁剪方法,参数:', cropper_opt);
try {
this.cropper.getCropperImage(cropper_opt, (path, err) => {
console.log('裁剪回调被调用', path, err);
if (err) {
console.error('裁剪出错:', err);
uni.showModal({
title: '温馨提示',
content: err.message
});
} else {
uni.$emit('uAvatarCropper', path);
uni.navigateBack();
console.log('裁剪成功,路径:', path);
if (isPre) {
console.log('预览图片');
uni.previewImage({
current: '', // http
urls: [path] // http
});
} else {
console.log('返回上一页');
uni.$emit('uAvatarCropper', path);
uni.navigateBack();
}
}
}
});
});
} catch (error) {
console.error('调用 getCropperImage 出错:', error);
uni.showModal({
title: '裁剪出错',
content: error.message || '未知错误'
});
}
},
uploadTap() {
const self = this;
@ -223,7 +322,7 @@ export default {
self.cropper.pushOrign(this.src);
}
});
}
},
}
};
</script>
@ -242,6 +341,15 @@ export default {
z-index: 11;
}
.cropper-circle-mask {
position: absolute;
border-radius: 50%;
box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
z-index: 12;
pointer-events: none; /* Allow touches to pass through to the canvas underneath */
box-sizing: border-box;
}
.cropper-buttons {
background-color: #000000;
color: #eee;
@ -270,8 +378,12 @@ export default {
}
.cropper-buttons .upload,
.cropper-buttons .getCropperImage {
width: 50%;
.cropper-buttons .getCropperImage,
.cropper-buttons .test,
.cropper-buttons .test2,
.cropper-buttons .test3,
.cropper-buttons .test4 {
width: 16.6%;
text-align: center;
}
@ -280,6 +392,22 @@ export default {
padding-left: 50rpx;
}
.cropper-buttons .test {
color: #ffeb3b;
}
.cropper-buttons .test2 {
color: #4caf50;
}
.cropper-buttons .test3 {
color: #ff9800;
}
.cropper-buttons .test4 {
color: #e91e63;
}
.cropper-buttons .getCropperImage {
text-align: right;
padding-right: 50rpx;

View File

@ -18,7 +18,7 @@
{{ dateWeeks(item.detail.start_time) + '-'+dateWeekends(item.detail.end_time)}}</span>
</view>
<span class="line"></span>
<view style="margin:30rpx;" class="flex" @click="toInfo(item.activity_id)">
<view style="margin:30rpx;" class="flex" @click="toDetail(item.id, item.order_no, item.status)">
<image class="tut" :src="item.detail.images[0]"></image>
<view style="margin-left: 20rpx;width: 80%;">
<view>

View File

@ -32,8 +32,8 @@
<view :class="['hot', 'flex', 'flex-column', status == 0 || status == -2 ? 'wsh_hot' : '']">
<view class="content flex align-items flex-column">
<view class="flex flex-column w-100 bbb" style="position: relative;"
v-for="(item, index) in hotList" :key="index" @click.stop="detail(item.id)">
<view v-if="status != -2">
v-for="(item, index) in hotList" :key="index" >
<view v-if="status != -2" @click.stop="detail(item.id)">
<image v-if="item.auth_status == 0" src="/static/my/daishenhe.png"
style="width: 134rpx; height: 106rpx;position: absolute;right: 0;"></image>
<image v-if="item.auth_status == 2" src="/static/my/wtg.png"
@ -110,7 +110,7 @@
</view>
</view>
</view>
<view v-if="status == -2">
<view v-if="status == -2" @click.stop="detail(item.activity_id)">
<view class="flex" style="margin-top: 30rpx">
<view class="right flex flex-column" style="align-items: self-start;padding-left: 15px;">
<view class="flex flex-column">
@ -676,7 +676,7 @@
.shenhe {
width: 94%;
position: fixed;
top: 85rpx;
top: 75rpx;
//background: #f7f7f7;
background: #f7f7f7;
z-index: 100;

View File

@ -856,7 +856,7 @@
width: 440rpx;
height: 39rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-weight: 600;
font-size: 28rpx;
color: #323232;
// margin-left: 16rpx;

File diff suppressed because it is too large Load Diff

View File

@ -9,7 +9,7 @@
<view class="con-center w-100 flex justify-center flex-column align-items flex-start">
<view class="first-box flex flex-start flex-column justify-start">
<view class="flex align-items justify-center">
<view class="flex align-items justify-center" @click="openInfo()">
<image class="head_img" v-if="detail.images.length > 0" :src="detail.images[0]" mode="" ></image>
<view style="margin-left: 20rpx;">
<view class="flex align-items">
@ -167,7 +167,8 @@
background: '#ffffff00',
titleStyle: {
color: '#000000',
fontSize: '32rpx'
fontSize: '32rpx',
fontWeight: 'bold'
},
status:null,
toptitle: '',
@ -196,6 +197,11 @@
},
methods: {
openInfo(){
uni.navigateTo({
url: `/packageA/center/detail?id=${this.detail.activity_id}`
})
},
//
service(id) {
uni.navigateTo({

View File

@ -50,7 +50,7 @@
<view class="right">
<view>
<text v-if="bankInfo.withdrawal == null"
style="color: #9C9C9C;font-size: 26rpx;">认证</text>
style="color: #9C9C9C;font-size: 26rpx;">设置</text>
<text v-if="bankInfo.withdrawal != null" style="font-size: 26rpx;">已认证</text>
</view>
<view><u-icon name="arrow-right"></u-icon></view>

View File

@ -1,15 +1,17 @@
<template>
<view class="box flex justify-center ">
<view class="center">
<!-- <span class="title">{{detail.title}}</span> -->
<view class="box">
<view style="height: 1px;background-color: #eeeeee;width: 100%;"></view>
<view class=" flex justify-center ">
<view>
<!-- <u-parse :content="detail.desc" :selectable="true"></u-parse> -->
<rich-text :nodes="detail.desc" selectable user-select></rich-text>
<view style="margin:16rpx 0;">{{detail.createtime_text}}</view>
<view class="center">
<span class="title">{{detail.title}}</span>
<view style="margin-top: 15rpx;">
<!-- <u-parse :content="detail.desc" :selectable="true"></u-parse> -->
<rich-text :nodes="detail.desc" selectable user-select></rich-text>
<view style="margin:16rpx 0;">{{detail.createtime_text}}</view>
</view>
</view>
</view>
</view>
</template>
@ -49,7 +51,7 @@
<style lang="scss" scoped>
.box {
background: #f5f5f5;
background: #ffffff;
width: 750rpx;
height: 100vh;
}
@ -92,10 +94,9 @@
}
.center {
margin-top: 42rpx;
width: 640rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 25rpx;
padding:50rpx 30rpx 30rpx 30rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 32rpx;

View File

@ -1,7 +1,7 @@
<template>
<view class="page">
<view class="nav">
<u-navbar :titleStyle="{color:'#000000',fontSize:'32rpx'}" :is-back="true" leftIconColor="#000000" :autoBack="true" :bgColor="'#ffffff'" :title="title"
<u-navbar :titleStyle="{color:'#000000',fontSize:'34rpx',fontWeight:'bold'}" :is-back="true" leftIconColor="#000000" :autoBack="true" :bgColor="'#ffffff'" :title="title"
></u-navbar>
</view>
<view style="padding:30rpx;margin-top: 180rpx;" v-if="istype">

View File

@ -28,7 +28,7 @@
settleInfo.settled_amount }}</text>
</view>
<view style="background-color: #eeeeee;height: 1px;width: 100%;margin-top: 20rpx;"></view>
<view style="line-height:40rpx;">
<view style="line-height:40rpx;padding-bottom: 200rpx;">
<view style="font-size: 24rpx;color: #000000;font-weight: 600;margin-top: 20rpx;">
<view>1提现金额</view>
<view style="text-indent: 2em;color: #FF4810;">本平台的提现操作默认将您当前可提现金额的全部款项一次性提现暂不支持部分提现</view>
@ -50,6 +50,9 @@
<view style="text-indent: 2em;">如在提现过程中遇到任何问题或超过预计到账时间仍未收到款项请及时联系平台客服</view>
</view>
</view>
</view>
<view style="position: fixed;bottom: 0;width: 100%;background-color: #ffffff;padding: 20px 0px;">
<view class="btn_1" @click="withdraw()">确认提现</view>
</view>
</view>
@ -176,7 +179,7 @@ export default {
}
.btn_1 {
width: 100%;
width: 94%;
height: 90rpx;
background: #323232;
border-radius: 198rpx 198rpx 198rpx 198rpx;
@ -186,6 +189,6 @@ export default {
color: #BBFC5B;
line-height: 90rpx;
text-align: center;
margin-top: 70rpx;
margin: 0 auto;
}
</style>

View File

@ -16,7 +16,7 @@
slot="center"
@click="one"
>
<span style="padding-right: 20rpx;">系统消息</span>
<span style="padding-right: 20rpx;font-size: 34rpx;font-weight: bold;">系统消息</span>
<u-icon
size="19"
name="/static/clearicon.png"

View File

@ -19,7 +19,7 @@
<view class="row flex align-items textarea_fb" style="margin-top: 25rpx;">
<u--textarea v-model="form.content" :maxlength="800"
<u--textarea :confirmType="null" v-model="form.content" :maxlength="800"
placeholder="描述一下活动的亮点、活动内容、推荐的人群、叫大家一起运动吧~" :height="120"
placeholder-class="bttop"></u--textarea>
</view>

View File

@ -3,7 +3,7 @@
<view class="nav">
<u-navbar :is-back="true" leftIconColor="#000000" :autoBack="true" :bgColor="'transparent'"
></u-navbar>
:titleStyle="{color:'#000000',fontSize:'34rpx',fontWeight:'bold'}"></u-navbar>
</view>
<view class="center flex flex-column align-items">

View File

@ -358,14 +358,25 @@
while (len-- > 0) args[len] = arguments[len + 1];
if (obj === void 0) obj = {};
console.log('wxPromise 调用:', fn.name || '未知函数', '参数:', JSON.stringify(obj));
return new Promise(function(resolve, reject) {
obj.success = function(res) {
console.log('wxPromise 成功:', fn.name || '未知函数', '结果:', res);
resolve(res);
};
obj.fail = function(err) {
console.error('wxPromise 失败:', fn.name || '未知函数', '错误:', err);
reject(err);
};
fn.apply(void 0, [obj].concat(args));
obj.complete = function() {
console.log('wxPromise 完成:', fn.name || '未知函数');
};
try {
fn.apply(void 0, [obj].concat(args));
} catch (error) {
console.error('wxPromise 执行异常:', fn.name || '未知函数', '错误:', error);
reject(error);
}
})
}
}
@ -373,8 +384,27 @@
function draw(ctx, reserve) {
if (reserve === void 0) reserve = false;
return new Promise(function(resolve) {
ctx.draw(reserve, resolve);
console.log('开始绘制 canvas');
return new Promise(function(resolve, reject) {
try {
if (!ctx) {
console.error('绘制失败: ctx 为空');
reject(new Error('绘制失败: ctx 为空'));
return;
}
// 直接绘制,不使用延时,避免额外问题
ctx.draw(reserve, function(res) {
console.log('绘制完成', res);
// 给一点时间让绘制完成
setTimeout(function() {
resolve(res);
}, 200);
});
} catch (error) {
console.error('绘制出错:', error);
reject(error);
}
})
}
@ -420,7 +450,7 @@
// `decode` is designed to be fully compatible with `atob` as described in the
// HTML Standard. http://whatwg.org/html/webappapis.html#dom-windowbase64-atob
// The optimized base64-decoding algorithm used is based on @atks excellent
// The optimized base64-decoding algorithm used is based on @atk's excellent
// implementation. https://gist.github.com/atk/1020396
var decode = function(input) {
input = String(input)
@ -907,6 +937,81 @@
fn = customOptions;
}
// Check if circular crop is requested
var isCircular = customOptions && customOptions.shape === 'circle';
if (isCircular) {
// 使用更简单的方法实现圆形裁剪
console.log('使用简化方法进行圆形裁剪');
// 先使用普通方式裁剪出矩形
var rectOptions = Object.assign({}, canvasOptions);
// 确保有正确的输出尺寸
var destWidth = customOptions.destWidth || width;
var destHeight = customOptions.destHeight || height;
// 先获取矩形裁剪的临时文件
return canvasToTempFilePath.apply(null, [rectOptions])
.then(function(res) {
console.log('矩形裁剪完成,开始圆形处理');
var rectPath = res.tempFilePath;
// 创建新的画布进行圆形裁剪
var circleCanvas = self.targetCtx;
// 清空画布
circleCanvas.clearRect(0, 0, destWidth, destHeight);
// 创建圆形路径
circleCanvas.save();
circleCanvas.beginPath();
var centerX = destWidth / 2;
var centerY = destHeight / 2;
var radius = Math.min(destWidth, destHeight) / 2;
circleCanvas.arc(centerX, centerY, radius, 0, 2 * Math.PI);
circleCanvas.clip();
// 加载裁剪后的图片
return getImageInfo({ src: rectPath })
.then(function(imgInfo) {
console.log('加载裁剪图片信息:', imgInfo);
// 绘制到圆形区域
circleCanvas.drawImage(
rectPath,
0,
0,
imgInfo.width,
imgInfo.height,
0,
0,
destWidth,
destHeight
);
circleCanvas.restore();
// 绘制并导出 - 不再绘制边框
return draw(circleCanvas)
.then(function() {
var circleOptions = {
canvasId: targetId,
x: 0,
y: 0,
width: destWidth,
height: destHeight,
destWidth: destWidth,
destHeight: destHeight,
fileType: customOptions.fileType || 'png'
};
return canvasToTempFilePath.apply(null, [circleOptions]);
});
});
});
}
var arg = canvasOptions.componentContext ?
[canvasOptions, canvasOptions.componentContext] :
[canvasOptions];
@ -1120,89 +1225,120 @@
self.setBoundStyle = function(ref) {
if (ref === void 0) ref = {};
var color = ref.color;
if (color === void 0) color = '#04b00f';
if (color === void 0) color = '#ffffff';
var mask = ref.mask;
if (mask === void 0) mask = 'rgba(0, 0, 0, 0.3)';
if (mask === void 0) mask = 'rgba(0, 0, 0, 0)';
var lineWidth = ref.lineWidth;
if (lineWidth === void 0) lineWidth = 1;
var isCircle = ref.isCircle;
if (isCircle === void 0) isCircle = true; // 默认使用圆形边框
var half = lineWidth / 2;
var boundOption = [{
start: {
x: x - half,
y: y + 10 - half
},
step1: {
x: x - half,
y: y - half
},
step2: {
x: x + 10 - half,
y: y - half
}
},
{
start: {
x: x - half,
y: y + height - 10 + half
},
step1: {
x: x - half,
y: y + height + half
},
step2: {
x: x + 10 - half,
y: y + height + half
}
},
{
start: {
x: x + width - 10 + half,
y: y - half
},
step1: {
x: x + width + half,
y: y - half
},
step2: {
x: x + width + half,
y: y + 10 - half
}
},
{
start: {
x: x + width + half,
y: y + height - 10 + half
},
step1: {
x: x + width + half,
y: y + height + half
},
step2: {
x: x + width - 10 + half,
y: y + height + half
}
}
];
// 绘制半透明层
self.ctx.beginPath();
self.ctx.setFillStyle(mask);
self.ctx.fillRect(0, 0, x, boundHeight);
self.ctx.fillRect(x, 0, width, y);
self.ctx.fillRect(x, y + height, width, boundHeight - y - height);
self.ctx.fillRect(x + width, 0, boundWidth - x - width, boundHeight);
self.ctx.fill();
// Check if we want a circular boundary instead of rectangular
if (isCircle) {
// Calculate center and radius
var centerX = x + width / 2;
var centerY = y + height / 2;
var radius = width / 2; // Assuming width = height for a circle
boundOption.forEach(function(op) {
// Draw the mask (everything outside the circle)
self.ctx.beginPath();
self.ctx.setFillStyle(mask);
// Draw a rectangle covering the entire canvas
self.ctx.fillRect(0, 0, boundWidth, boundHeight);
// Create a circular hole in the mask
self.ctx.beginPath();
self.ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
self.ctx.setFillStyle('transparent');
self.ctx.fill();
// Draw the border circle
self.ctx.beginPath();
self.ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
self.ctx.setStrokeStyle(color);
self.ctx.setLineWidth(lineWidth);
self.ctx.moveTo(op.start.x, op.start.y);
self.ctx.lineTo(op.step1.x, op.step1.y);
self.ctx.lineTo(op.step2.x, op.step2.y);
self.ctx.stroke();
});
} else {
// Original rectangular boundary code
var boundOption = [{
start: {
x: x - half,
y: y + 10 - half
},
step1: {
x: x - half,
y: y - half
},
step2: {
x: x + 10 - half,
y: y - half
}
},
{
start: {
x: x - half,
y: y + height - 10 + half
},
step1: {
x: x - half,
y: y + height + half
},
step2: {
x: x + 10 - half,
y: y + height + half
}
},
{
start: {
x: x + width - 10 + half,
y: y - half
},
step1: {
x: x + width + half,
y: y - half
},
step2: {
x: x + width + half,
y: y + 10 - half
}
},
{
start: {
x: x + width + half,
y: y + height - 10 + half
},
step1: {
x: x + width + half,
y: y + height + half
},
step2: {
x: x + width - 10 + half,
y: y + height + half
}
}
];
// 绘制半透明层
self.ctx.beginPath();
self.ctx.setFillStyle(mask);
self.ctx.fillRect(0, 0, x, boundHeight);
self.ctx.fillRect(x, 0, width, y);
self.ctx.fillRect(x, y + height, width, boundHeight - y - height);
self.ctx.fillRect(x + width, 0, boundWidth - x - width, boundHeight);
self.ctx.fill();
boundOption.forEach(function(op) {
self.ctx.beginPath();
self.ctx.setStrokeStyle(color);
self.ctx.setLineWidth(lineWidth);
self.ctx.moveTo(op.start.x, op.start.y);
self.ctx.lineTo(op.step1.x, op.step1.y);
self.ctx.lineTo(op.step2.x, op.step2.y);
self.ctx.stroke();
});
}
};
}