Skip to content

W
wechatapp.shangjiadao.com
Commit f82f4050 authored by lvtz's avatar lvtz
Browse files
Options

delete img

parent 127d5de1
Hide whitespace changes
Inline Side-by-side
Showing with 1074 additions and 250 deletions
business/pages/classservice/classdetail.wxml
View file @ f82f4050
......@@ -229,7 +229,7 @@
<view class="tip-box">
<view class="btn" bindtap="showSelectStudent">
<view class="icon">
<image class="" src="{{localImageRoot}}2b/common/classComment.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
<image class="" src="{{imageRoot}}2b/common/classComment.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
</view>
<view class="text">
课堂点评
......@@ -237,7 +237,7 @@
</view>
<view class="btn" bindtap="remindStudent">
<view class="icon">
<image class="" src="{{localImageRoot}}2b/common/remindme.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
<image class="" src="{{imageRoot}}2b/common/remindme.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
</view>
<view class="text">
提醒未读同学
......@@ -250,7 +250,7 @@
<block wx:for="{{listItem.arr}}" wx:key="index">
<view class="class-comment" wx:if="{{item.review_type == 1}}">
<view class="title">
<image class="count-icon" src="{{localImageRoot}}2b/common/countIcon.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
<image class="count-icon" src="{{imageRoot}}2b/common/countIcon.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
课堂小评已读统计
</view>
<view class="count-item" style="padding-bottom: 32rpx;">
......@@ -291,7 +291,7 @@
<scroll-view class="student-list" scroll-y="true" bindscrolltolower="studentScrolltolower">
<view class="student-item" bindtap="goReviewClass">
<view class="avatar-box">
<image class="" src="{{localImageRoot}}2b/common/class-student.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
<image class="" src="{{imageRoot}}2b/common/class-student.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
</view>
<view class="name">全班{{selectStudentList.length}}人</view>
<view class="count">月评50次</view>
......
business/pages/classservice/classreviewshare.js
View file @ f82f4050
import {
themeDetail,
} from '../../../service/customer/themeindex.js';
import {
unlockmodesdetail,
} from '../../../service/customer/morethemeindex.js';
import {
getActivities,
activityLog,
generateCustomerQrcode,
formIdCreate
......@@ -18,55 +12,91 @@ import {
import {
studentidentity
} from '../../../service/customer/signup.js'
import {
classroomdetailGet
} from '../../../service/business/classservice.js';
import CanvasDrag from '../../../components/canvas-drag/canvas-drag';
var app = getApp();
Page({
data: {
imageRoot: app.globalData.imageRoot,
imageVersion: app.globalData.imageVersion,
localImageRoot: '../../../images/',
id:0,
tid: 0,
currentIndex: 1,
swiperCurrent: 0,
themeDetail: {},
id: 0,
currentIndex: 0,
currentImgUrl: '../../../images/2b/classreviewshare/carda_l.png',
reviewDetailContent: '',
userInfo: {},
qrcode: '',
painting: {},
posterUrl: '',
posterBox: [],
scrollLeft: 0,
reviewDetail: '',
graph: {},
datetime: '',
bigType: 1,
bigTab: [
{type: 1, title: "主题"},
{type: 2, title: "长图"}
],
tempImgArr1: [],
tempImgArr2: [],
},
onLoad: function (options) {
const {
tid,
id,
pagefrom
// consumerId
} = options;
const {sid,rid} = options;
this.setData({
tid,
id,
pagefrom:pagefrom||0
// consumerId
rid,
sid,
tempImgArr1: [
{
idx: 0,
icon_src: `${this.data.imageRoot}2b/classreviewshare/carda.png?${this.data.imageVersion}`,
src_l: `${this.data.imageRoot}2b/classreviewshare/carda_l.png?${this.data.imageVersion}`,
src_s: `${this.data.imageRoot}2b/classreviewshare/carda_s.png?${this.data.imageVersion}`,
},
{
idx: 1,
icon_src: `${this.data.imageRoot}2b/classreviewshare/carda.png?${this.data.imageVersion}`,
src_l: `${this.data.imageRoot}2b/classreviewshare/carda_l.png?${this.data.imageVersion}`,
src_s: `${this.data.imageRoot}2b/classreviewshare/carda_s.png?${this.data.imageVersion}`,
}
],
tempImgArr2: [
{
idx: 0,
icon_src: `${this.data.imageRoot}2c/growthrecord/share_bg.png?${this.data.imageVersion}`,
src_l: `${this.data.imageRoot}2c/invitationcard/cardc.png?${this.data.imageVersion}`,
src_s: `${this.data.imageRoot}2c/invitationcard/cardh.png?${this.data.imageVersion}`,
}
]
})
this.reviewDetailGet();
},
onShow: function () {
},
selectCard (e) {
const {dataset} = e.currentTarget;
this.setData({
currentIndex: dataset.cardindex,
swiperCurrent: dataset.cardindex - 1
changeBigTab(e){
let that = this;
let bigType = that.data.bigType;
const {bigtype} = e.currentTarget.dataset;
if(bigType == bigtype){
return
}
that.setData({
bigType: bigtype
})
this.checkInstance()
},
swiperChange (e) {
const {detail} = e;
selectCard (e) {
const {item} = e.currentTarget.dataset;
let ReviewImgLen = this.data.hasReviewImg.length
console.log(item)
this.setData({
currentIndex: detail.current + 1
currentIndex: item.idx,
currentImgUrl: ReviewImgLen>0?item.src_l:item.src_s
})
console.log(this.data.currentImgUrl)
this.checkInstance()
},
// 适当改变tab位置
......@@ -84,50 +114,35 @@ Page({
onShareAppMessage: function () {
},
reviewDetailGet () {
wx.showLoading();
themeDetail({
subject_id: this.data.tid
}).then((res) => {
const {code, data} = res;
if (code != 200) {
return
}
this.setData({
themeDetail: data,
})
this.userShow(data.school_id);
const visitor = LocalStorage.getItem('visitor');
activityLog({
type: 22,
open_id: visitor && visitor.openid,
school_id:data.school_id,
remark: ''
})
}).catch(() => {
wx.hideLoading();
})
},
getModesDetail() {
wx.showLoading();
unlockmodesdetail(this.data.tid).then((res) => {
const {
code,
data
} = res;
if (code == 200&&data) {
wx.showLoading({
title: '加载中'
});
classroomdetailGet({
id: this.data.rid
}).then((res)=>{
const {code, data, datetime} = res;
this.data.datetime = datetime;
if(code == 200){
console.log(data)
this.setData({
themeDetail: data,
reviewDetail: data,
reviewDetailContent: JSON.parse(data.content),
hasReviewAudio : JSON.parse(data.content).audio,
hasReviewImg : JSON.parse(data.content).img.filter(item=>item.type=='image'),
})
this.userShow(data.school_id);
const visitor = LocalStorage.getItem('visitor');
activityLog({
type: 22,
open_id: visitor && visitor.openid,
school_id:data.school_id,
remark: ''
this.setData({
graph: {
w: 120,
h: 120,
type: 'image',
url: imagify(this.data.hasReviewImg[0].src, 'image/resize,w_320/format,jpg/quality,q_50'),
},
})
console.log(12121,this.data.graph)
this.userShow(this.data.sid);
}
}).catch((err) => {
}).catch((err)=>{
wx.hideLoading();
})
},
......@@ -141,7 +156,6 @@ Page({
this.setData({
userInfo: data.student,
})
console.log(this.data.userInfo)
this.generateCustomerQrcode()
}
}).catch((err)=>{
......@@ -171,7 +185,6 @@ Page({
})
},
generatePoster (e) {
console.log(2222,e)
const {dataset} = e.currentTarget;
const date = dateDetail(this.data.datetime);
if (this.data.posterBox[this.data.currentIndex]) {
......@@ -186,98 +199,114 @@ Page({
})
switch(Number(dataset.posterindex)) {
case 1:
console.log(333)
this.setData({
painting:{
width: 750,
height: 1334,
height: 1141,
views: [
// {
// type: 'image',
// url: `${this.data.imageRoot}2c/invitationcard/cardh.png`,
// url: this.data.currentImgUrl,
// top: 0,
// left: 0,
// width: 750,
// height: 1334
// },
// {
// type: 'image',
// url: imagify(this.data.userInfo.avatar, 'image/resize,w_320/format,jpg/quality,q_50'),
// top: 770,
// left: 70,
// width: 80,
// height: 80
// },
// {
// type: 'text',
// content: this.data.userInfo.nickname,
// fontSize: 30,
// color: '#000000',
// textAlign: 'left',
// top: 796,
// left: 172,
// bolder: true
// },
// {
// type: 'text',
// content: this.data.themeDetail.title,
// fontSize: 40,
// lineHeight: 48,
// color: '#000000',
// textAlign: 'center',
// top: 1090,
// left: 375,
// width: 500,
// MaxLineNumber: 2,
// breakWord: true
// },
// { // 月
// type: 'text',
// content: date.month.chineseShortName + '月',
// fontSize: 30,
// color: '#fff',
// textAlign: 'center',
// top: 94,
// left: 80,
// },
// { // 日
// type: 'text',
// content: date.day,
// fontSize: 50,
// color: '#fff',
// textAlign: 'left',
// top: 78,
// left: 80,
// },
// { // 年
// type: 'text',
// content: date.month.shortName + ' '+ date.year,
// fontSize: 20,
// color: '#fff',
// textAlign: 'center',
// top: 198,
// left: 80,
// },
// {
// type: 'text',
// content: '张老师',
// fontSize: 40,
// lineHeight: 48,
// color: '#000000',
// textAlign: 'center',
// top: 1090,
// left: 300,
// width: 500
// },
// {
// type: 'image',
// url: this.data.qrcode,
// top: 0,
// left: 0,
// width: 130,
// height: 130
// height: 1141
// },
{
type: 'image',
url: imagify(this.data.userInfo.avatar, 'image/resize,w_320/format,jpg/quality,q_50'),
top: 20,
left: 329,
width: 93,
height: 93
},
{
type: 'image',
url: imagify(this.data.hasReviewImg[0].src, 'image/resize,w_320/format,jpg/quality,q_50'),
top: 171,
left: 72,
width: 607,
height: 517
},
{
type: 'text',
content: this.data.userInfo.nickname,
fontSize: 28,
color: '#000000',
textAlign: 'center',
top: 123,
left: 375,
width: 750,
bolder: true
},
{
type: 'text',
content: this.data.reviewDetailContent.content,
fontSize: 23,
lineHeight: 32,
color: '#000000',
textAlign: 'left',
top: 719,
left: 61,
MaxLineNumber: 2,
breakWord: true
},
{
type: 'image',
url: `${this.data.imageRoot}2c/clockdetail/btn-bg.png`,
top: 800,
left: 61,
width: 144,
height: 39
},
{ // 月
type: 'text',
content: date.month.chineseShortName + '月',
fontSize: 30,
color: '#8395A6',
textAlign: 'center',
top: 993,
left: 85,
width: 109,
},
{ // 日
type: 'text',
content: date.day,
fontSize: 55,
color: '#586D7E',
textAlign: 'center',
top: 1036,
left: 85,
width: 109,
},
{ // 年
type: 'text',
content: date.year,
fontSize: 15,
color: '#586D7E',
textAlign: 'center',
top: 1100,
left: 85,
width: 109,
},
{
type: 'text',
content: this.data.reviewDetail.school_teacher.nickname || '',
fontSize: 28,
lineHeight: 48,
color: '#000000',
textAlign: 'left',
top: 1027,
left: 350,
},
{
type: 'image',
url: this.data.qrcode,
top: 976,
left: 565,
width: 150,
height: 150
},
]
}
})
......@@ -332,7 +361,7 @@ Page({
},
{
type: 'text',
content: this.data.themeDetail.title,
content: this.data.reviewDetailContent.content,
fontSize: 44,
lineHeight: 48,
color: '#FFF9C6',
......@@ -383,6 +412,73 @@ Page({
formId
})
},
/**
* 添加测试图片
*/
onAddTest() {
this.setData({
graph: {
w: 120,
h: 120,
type: 'image',
url: '../../assets/images/test.jpg',
}
});
},
/**
* 导出图片
*/
onExport() {
CanvasDrag.export()
.then((filePath) => {
console.log(filePath);
wx.previewImage({
urls: [filePath]
})
})
.catch((e) => {
console.error(e);
})
},
/**
* 改变背景颜色
*/
onChangeBgColor() {
CanvasDrag.changeBgColor('yellow');
},
/**
* 改变背景照片
*/
onChangeBgImage() {
CanvasDrag.changeBgImage('../../assets/images/test.jpg');
},
/**
* 导出当前画布为模板
*/
onExportJSON(){
CanvasDrag.exportJson()
.then((imgArr) => {
console.log(JSON.stringify(imgArr));
})
.catch((e) => {
console.error(e);
});
},
onClearCanvas:function(event){
let _this = this;
_this.setData({canvasBg:null});
CanvasDrag.clearCanvas();
},
onUndo:function(event){
CanvasDrag.undo();
}
})
......
business/pages/classservice/classreviewshare.json
View file @ f82f4050
{
"navigationBarTitleText": "分享卡片",
"usingComponents": {
"canvasdrawer": "/components/canvasdrawer/canvasdrawer"
"canvasdrawer": "/components/canvasdrawer/canvasdrawer",
"canvas-drag": "/components/canvas-drag/index"
}
}
\ No newline at end of file
business/pages/classservice/classreviewshare.wxml
View file @ f82f4050
<wxs src="./../../../filter/index.wxs" module="filter" />
<view class="container">
<view class="swiperwrap">
<view class="swiperbox">
<swiper
style="height: 826rpx"
current="{{swiperCurrent}}"
bindchange="swiperChange"
>
<swiper-item data-posterindex="1" bindtap="generatePoster">
<view class="card carda">
<image class="cardbg" src="{{localImageRoot}}2b/classreviewshare/carda_l.png?{{imageVersion}}"></image>
<view class="cardcontent">
<image class="avatar" src="{{localImageRoot}}2b/classreviewshare/carda.png?{{imageVersion}}"></image>
<!-- <image class="avatar" src="{{filter.imagify(userInfo.avatar, 'image/resize,w_320/format,jpg/quality,q_50')}}"></image> -->
<view class="nickname">{{userInfo.nickname}}</view>
<view class="imgbox">
<image class="icon-angle icon-angle-lt" src="{{localImageRoot}}2b/classreviewshare/icon_angle_lr.png?{{imageVersion}}"></image>
<image class="icon-angle icon-angle-rt" src="{{localImageRoot}}2b/classreviewshare/icon_angle_rl.png?{{imageVersion}}"></image>
<image class="icon-angle icon-angle-rb" src="{{localImageRoot}}2b/classreviewshare/icon_angle_lr.png?{{imageVersion}}"></image>
<image class="icon-angle icon-angle-lb" src="{{localImageRoot}}2b/classreviewshare/icon_angle_rl.png?{{imageVersion}}"></image>
</view>
<view class="reviewtext">{{themeDetail.title}}{{themeDetail.title}}{{themeDetail.title}}{{themeDetail.title}}
{{themeDetail.title}}{{themeDetail.title}}{{themeDetail.title}}{{themeDetail.title}}{{themeDetail.title}}</view>
<image class="icon-audio" src="{{localImageRoot}}2b/classreviewshare/icon_audio.png?{{imageVersion}}"></image>
</view>
<form report-submit="true" bindsubmit="formIdCreate" class="createidform">
<button form-type="submit" class="createidbutton">生成form</button>
</form>
</view>
</swiper-item>
<swiper-item data-posterindex="2" bindtap="generatePoster">
<view class="card cardb">
<image class="cardbg" src="{{localImageRoot}}2b/classreviewshare/carda_l.png?{{imageVersion}}"></image>
<view class="cardcontent">
<image class="avatar" src="{{filter.imagify(userInfo.avatar, 'image/resize,w_320/format,jpg/quality,q_50')}}"></image>
<view class="nickname">{{userInfo.nickname}}</view>
<view class="themetitle">
<view class="themetitlebox">{{themeDetail.title}}</view>
</view>
</view>
<form report-submit="true" bindsubmit="formIdCreate" class="createidform">
<button form-type="submit" class="createidbutton">生成form</button>
</form>
</view>
</swiper-item>
</swiper>
<view class="card carda" data-posterindex="1" bindtap="generatePoster" >
<image class="cardbg" src="{{currentImgUrl}}" wx:if="{{hasReviewImg.length>0}}"></image>
<image class="cardbg" src="{{imageRoot}}2b/classreviewshare/carda_s.png?{{imageVersion}}" wx:else></image>
<view class="cardcontent">
<image class="avatar" src="{{filter.imagify(userInfo.avatar, 'image/resize,w_320/format,jpg/quality,q_50')}}"></image>
<view class="nickname">{{userInfo.nickname}}</view>
<view class="imgbox" wx:if="{{hasReviewImg.length>0}}">
<canvas-drag id="canvas-drag" graph="{{graph}}" width="520" height="440" enableUndo="{{true}}"></canvas-drag>
<image class="icon-angle icon-angle-lt" src="{{imageRoot}}2b/classreviewshare/icon_angle_lr.png?{{imageVersion}}"></image>
<image class="icon-angle icon-angle-rt" src="{{imageRoot}}2b/classreviewshare/icon_angle_rl.png?{{imageVersion}}"></image>
<image class="icon-angle icon-angle-rb" src="{{imageRoot}}2b/classreviewshare/icon_angle_lr.png?{{imageVersion}}"></image>
<image class="icon-angle icon-angle-lb" src="{{imageRoot}}2b/classreviewshare/icon_angle_rl.png?{{imageVersion}}"></image>
<!-- <image class="review-img" src="{{filter.imagify(hasReviewImg[0].src, 'image/resize,w_320/format,jpg/quality,q_50')}}" mode="aspectFill"></image> -->
</view>
<view class="reviewtext">{{reviewDetailContent.content}}</view>
<image class="icon-audio" src="{{imageRoot}}2b/classreviewshare/icon_audio.png?{{imageVersion}}" wx:if="{{hasReviewAudio.length>0}}"></image>
</view>
<form report-submit="true" bindsubmit="formIdCreate" class="createidform">
<button form-type="submit" class="createidbutton">生成form</button>
</form>
</view>
</view>
<view class="scroll-box">
<view class="tab-box">
<view class="tab-item active">主题</view>
<view class="tab-item">长图</view>
<view class="tab-item {{item.type == bigType? 'active': ''}}" bindtap="changeBigTab" data-bigtype="{{item.type}}" wx:for="{{bigTab}}" wx:key="">{{item.title}}</view>
</view>
<scroll-view
scroll-y="{{false}}"
scroll-x="{{true}}"
style="width: auto;overflow:hidden;"
style="width: auto;overflow:hidden; padding: 31rpx 0 26rpx;"
scroll-left = "{{scrollLeft}}"
style="padding: 31rpx 0 26rpx;"
wx:if="{{bigType==1}}"
>
<view class="cardbox {{currentIndex == 1 ? 'selected' : ''}}" data-cardindex="1" bindtap="selectCard">
<view class="card carda">
<image class="cardbg" src="{{localImageRoot}}2b/classreviewshare/carda.png?{{imageVersion}}"></image>
<view class="cardbox {{bigType==1 && currentIndex == index ? 'selected' : ''}}" data-item="{{item}}" bindtap="selectCard" wx:for="{{tempImgArr1}}" wx:key="">
<view class="card">
<image class="cardbg" src="{{item.icon_src}}"></image>
</view>
<form report-submit="true" bindsubmit="formIdCreate" class="createidform">
<button form-type="submit" class="createidbutton">生成form</button>
</form>
</view>
<view class="cardbox {{currentIndex == 2 ? 'selected' : ''}}" data-cardindex="2" bindtap="selectCard">
<view class="card cardb">
<image class="cardbg" src="{{localImageRoot}}2b/classreviewshare/carda.png?{{imageVersion}}"></image>
</scroll-view>
<scroll-view
scroll-y="{{false}}"
scroll-x="{{true}}"
style="width: auto;overflow:hidden; padding: 31rpx 0 26rpx;"
scroll-left = "{{scrollLeft}}"
wx:if="{{bigType==2}}"
>
<view class="cardbox {{bigType==2 && currentIndex == index ? 'selected' : ''}}" data-item="{{item}}" bindtap="selectCard" wx:for="{{tempImgArr2}}" wx:key="">
<view class="card">
<image class="cardbg" src="{{item.icon_src}}"></image>
</view>
<form report-submit="true" bindsubmit="formIdCreate" class="createidform">
<button form-type="submit" class="createidbutton">生成form</button>
</form>
</view>
</scroll-view>
<view class="button-boxfix">生成卡片</view>
</view>
<canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>
......
business/pages/classservice/classreviewshare.wxss
View file @ f82f4050
page{
height: 100%;
}
#canvas-drag{
position: absolute;
left: 5px;
top: 5px;
width: 260px;
height: 220px
}
.container{
height: 100%;
display: flex;
......@@ -12,6 +19,7 @@ page{
flex-direction: column;
justify-content: center;
overflow-y: auto;
align-items: center;
}
.card {
position: relative;
......@@ -63,6 +71,7 @@ page{
position: relative;
margin: 11rpx auto 0;
padding: 10rpx;
overflow: hidden;
}
.carda .cardcontent .imgbox .icon-angle{
width: 44rpx;
......@@ -87,6 +96,10 @@ page{
bottom: 12rpx;
left: 12rpx;
}
.carda .cardcontent .imgbox .review-img{
width: 100%;
max-height: 440rpx;
}
.carda .reviewtext {
font-size: 20rpx;
line-height: 28rpx;
......@@ -156,13 +169,13 @@ page{
margin-right: 32rpx;
}
.scroll-box .card{
width: 110rpx;
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.scroll-box .cardbox.selected .card{
width: 130rpx;
height: 130rpx;
padding: 4rpx;
box-sizing: content-box;
}
.swiperbox .card{
margin: 0 auto;
......
business/pages/classservice/classreviewsingle.wxml
View file @ f82f4050
......@@ -17,7 +17,7 @@
<view class="img-status fail" wx:if="{{item.status == 'fail'}}">上传失败</view>
</view>
<view class="pic-item pic-add" bindtap="addWorks">
<image class="icon-add" src="{{localImageRoot}}common/icon_addpic.png?{{imageVersion}}"></image>
<image class="icon-add" src="{{imageRoot}}common/icon_addpic.png?{{imageVersion}}"></image>
<view class="text-add">添加作品</view>
</view>
</view>
......@@ -30,27 +30,27 @@
<view class="starbox starbox2">
<view class="choosescore choosescoreleft" data-index="5" data-score="0.5" bindtap="chooseAverageScore"></view>
<view class="choosescore choosescoreright" data-index="5" data-score="1" bindtap="chooseAverageScore"></view>
<image class="staritem" src="{{localImageRoot}}common/{{filter.flowerCalculate(averageScore, 1)}}?{{imageVersion}}"></image>
<image class="staritem" src="{{imageRoot}}common/{{filter.flowerCalculate(averageScore, 1)}}?{{imageVersion}}"></image>
</view>
<view class="starbox starbox2">
<view class="choosescore choosescoreleft" data-index="5" data-score="1.5" bindtap="chooseAverageScore"></view>
<view class="choosescore choosescoreright" data-index="5" data-score="2" bindtap="chooseAverageScore"></view>
<image class="staritem" data-score="1" src="{{localImageRoot}}common/{{filter.flowerCalculate(averageScore, 2)}}"></image>
<image class="staritem" data-score="1" src="{{imageRoot}}common/{{filter.flowerCalculate(averageScore, 2)}}"></image>
</view>
<view class="starbox starbox2">
<view class="choosescore choosescoreleft" data-index="5" data-score="2.5" bindtap="chooseAverageScore"></view>
<view class="choosescore choosescoreright" data-index="5" data-score="3" bindtap="chooseAverageScore"></view>
<image class="staritem" data-score="1" src="{{localImageRoot}}common/{{filter.flowerCalculate(averageScore, 3)}}"></image>
<image class="staritem" data-score="1" src="{{imageRoot}}common/{{filter.flowerCalculate(averageScore, 3)}}"></image>
</view>
<view class="starbox starbox2">
<view class="choosescore choosescoreleft" data-index="5" data-score="3.5" bindtap="chooseAverageScore"></view>
<view class="choosescore choosescoreright" data-index="5" data-score="4" bindtap="chooseAverageScore"></view>
<image class="staritem" data-score="1" src="{{localImageRoot}}common/{{filter.flowerCalculate(averageScore, 4)}}"></image>
<image class="staritem" data-score="1" src="{{imageRoot}}common/{{filter.flowerCalculate(averageScore, 4)}}"></image>
</view>
<view class="starbox starbox2">
<view class="choosescore choosescoreleft" data-index="5" data-score="4.5" bindtap="chooseAverageScore"></view>
<view class="choosescore choosescoreright" data-index="5" data-score="5" bindtap="chooseAverageScore"></view>
<image class="staritem" data-score="1" src="{{localImageRoot}}common/{{filter.flowerCalculate(averageScore, 5)}}"></image>
<image class="staritem" data-score="1" src="{{imageRoot}}common/{{filter.flowerCalculate(averageScore, 5)}}"></image>
</view>
</view>
<view class="scoreshow">{{averageScore * 2}}分</view>
......@@ -148,7 +148,7 @@
<button form-type="submit" class="createidbutton"></button>
</form>
<view class="media-type-icon">
<image class="media-type-icon-img" src="{{localImageRoot}}2b/common/audio_add.png?{{imageVersion}}" ></image>
<image class="media-type-icon-img" src="{{imageRoot}}2b/common/audio_add.png?{{imageVersion}}" ></image>
</view>
<view class="media-type-name">录音</view>
</view>
......@@ -157,7 +157,7 @@
<button form-type="submit" class="createidbutton"></button>
</form>
<view class="media-type-icon">
<image class="media-type-icon-img" src="{{localImageRoot}}2b/common/pic_add.png?{{imageVersion}}" ></image>
<image class="media-type-icon-img" src="{{imageRoot}}2b/common/pic_add.png?{{imageVersion}}" ></image>
</view>
<view class="media-type-name">图片</view>
</view>
......@@ -167,7 +167,7 @@
<button form-type="submit" class="createidbutton"></button>
</form>
<view class="media-type-icon">
<image class="media-type-icon-img" src="{{localImageRoot}}2b/common/video_add.png?{{imageVersion}}" ></image>
<image class="media-type-icon-img" src="{{imageRoot}}2b/common/video_add.png?{{imageVersion}}" ></image>
</view>
<view class="media-type-name">视频</view>
</view>
......@@ -176,7 +176,7 @@
<button form-type="submit" class="createidbutton"></button>
</form>
<view class="media-type-icon">
<image class="media-type-icon-img" src="{{localImageRoot}}2b/common/wxfile_add.png?{{imageVersion}}" ></image>
<image class="media-type-icon-img" src="{{imageRoot}}2b/common/wxfile_add.png?{{imageVersion}}" ></image>
</view>
<view class="media-type-name">微信文件</view>
</view>
......
business/pages/classservice/reviewclass.wxml
View file @ f82f4050
......@@ -36,7 +36,7 @@
<view class="img-status fail" wx:if="{{item.status == 'fail'}}">上传失败</view>
</view>
<view class="link-student">
<view class="student-list" bindtap="goSelectstudentlist" data-item="{{item}}" data-index="{{index}}">@{{item.students.length>0 ? (item.students.length>2 ? item.students[0].name+ '等' +item.students.length+'名学员': item.students[0].name ) : '关联学员'}} <image class="" src="{{localImageRoot}}2b/common/close_icon.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" data-flag="{{1}}" data-item="{{item}}" data-index="{{index}}" bindtap="closeLinkStudent" /></view>
<view class="student-list" bindtap="goSelectstudentlist" data-item="{{item}}" data-index="{{index}}">@{{item.students.length>0 ? (item.students.length>2 ? item.students[0].name+ '等' +item.students.length+'名学员': item.students[0].name ) : '关联学员'}} <image class="" src="{{imageRoot}}2b/common/close_icon.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" data-flag="{{1}}" data-item="{{item}}" data-index="{{index}}" bindtap="closeLinkStudent" /></view>
<textarea name="" id="" class="link-text" cols="30" rows="4" value="{{item.text}}" placeholder="说点什么吧..." bindinput="getLinkText"></textarea>
</view>
......@@ -60,25 +60,25 @@
<view class="operate-box">
<view class="operate-btn" bindtap="addVoice" wx:if="{{!audioInfo.src}}">
<view class="icon">
<image class="" src="{{localImageRoot}}2b/common/audio_add.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
<image class="" src="{{imageRoot}}2b/common/audio_add.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
</view>
<view class="text">录音</view>
</view>
<view class="operate-btn" bindtap="addImg" wx:if="{{imageBox.length < maxImgCount}}">
<view class="icon">
<image class="" src="{{localImageRoot}}2b/common/pic_add.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
<image class="" src="{{imageRoot}}2b/common/pic_add.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
</view>
<view class="text">图片</view>
</view>
<view class="operate-btn" bindtap="addVideo" wx:if="{{imageBox.length < maxImgCount}}">
<view class="icon">
<image class="" src="{{localImageRoot}}2b/common/video_add.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
<image class="" src="{{imageRoot}}2b/common/video_add.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
</view>
<view class="text">视频</view>
</view>
<view class="operate-btn">
<view class="icon">
<image class="" src="{{localImageRoot}}2b/common/wxfile_add.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
<image class="" src="{{imageRoot}}2b/common/wxfile_add.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
</view>
<view class="text">微信文件</view>
</view>
......
business/pages/classservice/reviewdetail.wxml
View file @ f82f4050
......@@ -11,7 +11,7 @@
<view class="count-box">
<view class="title-box">
<view class="title">
<image class="icon" src="{{localImageRoot}}2b/common/countIcon.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />课堂小评已读统计
<image class="icon" src="{{imageRoot}}2b/common/countIcon.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />课堂小评已读统计
</view>
<view class="detail-btn">
查看详情
......
business/pages/classservice/rewardpoints.wxml
View file @ f82f4050
......@@ -3,7 +3,7 @@
<view class="header-box">
<image class="box-bg" src="{{imageRoot}}2b/optimize/student_top_bg.png?{{imageVersion}}"></image>
<view class="avatar-box">
<image class="avatar" src="{{localImageRoot}}2b/common/class-student.png?{{imageVersion}}" wx:if="{{cid}}"></image>
<image class="avatar" src="{{imageRoot}}2b/common/class-student.png?{{imageVersion}}" wx:if="{{cid}}"></image>
<image class="avatar" src="{{filter.imagify(singleStudentInfo.avatar, 'image/resize,w_160/format,jpg')}}" wx:elif="{{singleStudentInfo.avatar}}"></image>
<image class="avatar" src="{{imageRoot}}common/empty/avatar_user.png?{{imageVersion}}" wx:else></image>
</view>
......
business/pages/classservice/rollcalldetail.wxml
View file @ f82f4050
......@@ -24,16 +24,16 @@
</view>
<view class="operate-box">
<view class="operate-item operate-class">
<image class="operate-icon" src="{{localImageRoot}}2b/common/class-student.png?{{imageVersion}}"></image>
<image class="operate-icon" src="{{imageRoot}}2b/common/class-student.png?{{imageVersion}}"></image>
<view class="operate-title">全班{{schedulesDetail.class_student_count_calls}}人</view>
</view>
<view class="operate-right">
<view class="operate-item operate-comment" bindtap="commentStudent" data-type="all">
<image class="operate-icon" src="{{localImageRoot}}2b/common/classComment.png?{{imageVersion}}"></image>
<image class="operate-icon" src="{{imageRoot}}2b/common/classComment.png?{{imageVersion}}"></image>
<view class="operate-title">课堂小评</view>
</view>
<view class="operate-item operate-reward" bindtap="rewardStudent" data-type="all">
<image class="operate-icon" src="{{localImageRoot}}2b/common/rewardpoints.png?{{imageVersion}}"></image>
<image class="operate-icon" src="{{imageRoot}}2b/common/rewardpoints.png?{{imageVersion}}"></image>
<view class="operate-title">奖励全班</view>
</view>
</view>
......
business/pages/commenteditor/classreviewremark.wxml
View file @ f82f4050
......@@ -10,7 +10,7 @@
<view class="tempRemark-box" wx:if="{{bigTabType==1}}">
<view class="temp-singlebox {{tempListExpend==bigindex? 'active': ''}}" wx:for="{{tempRemarkList}}" wx:key="bigindex" wx:for-index="bigindex">
<view class="temp-titlebox" bindtap="expandTempItem" data-bigindex="{{bigindex}}">
<image class="icon-face" src="{{localImageRoot}}2b/common/icon_face{{bigindex+1}}.png?{{imageVersion}}"></image>
<image class="icon-face" src="{{imageRoot}}2b/common/icon_face{{bigindex+1}}.png?{{imageVersion}}"></image>
<view class="title">{{item.label}}</view>
<image class="icon-arr {{tempListExpend==bigindex? 'active': ''}}" src="{{imageRoot}}2b/common/right.png?{{imageVersion}}"></image>
</view>
......@@ -22,13 +22,13 @@
<view class="memoryRemark-box" wx:if="{{bigTabType==2}}">
<view class="memoryRemark-tip">
<image class="icon-tip" src="{{localImageRoot}}2b/common/icon_warn.png?{{imageVersion}}"></image>
<image class="icon-tip" src="{{imageRoot}}2b/common/icon_warn.png?{{imageVersion}}"></image>
<view class="title">最近常用自动收藏您最近10次的点评文本，锁住即代表该语录不会被您新的点评文本替换</view>
</view>
<view class="memoryRemark-list" wx:if="{{memoryRemarkList.length>0}}">
<view class="memoryRemark-item" wx:for="{{memoryRemarkList}}" wx:key="">
<image class="icon-lock" src="{{localImageRoot}}2b/common/review_locked.png?{{imageVersion}}" wx:if="{{item.is_lock==2}}" data-id="{{item.id}}" data-togglelock='1' bindtap="memoryRemarkLock"></image>
<image class="icon-lock" src="{{localImageRoot}}2b/common/review_lock.png?{{imageVersion}}" wx:else data-id="{{item.id}}" data-togglelock='2' bindtap="memoryRemarkLock"></image>
<image class="icon-lock" src="{{imageRoot}}2b/common/review_locked.png?{{imageVersion}}" wx:if="{{item.is_lock==2}}" data-id="{{item.id}}" data-togglelock='1' bindtap="memoryRemarkLock"></image>
<image class="icon-lock" src="{{imageRoot}}2b/common/review_lock.png?{{imageVersion}}" wx:else data-id="{{item.id}}" data-togglelock='2' bindtap="memoryRemarkLock"></image>
<view class="memory-item" bindtap="pushContent" data-pushcontent="{{item.word}}">{{item.word}}</view>
</view>
</view>
......
components/canvas-drag/canvas-drag.js 0 → 100644
View file @ f82f4050
const defaultOptions = {
selector: '#canvas-drag'
};
function CanvasDrag(options = {}) {
options = {
...defaultOptions,
...options,
};
const pages = getCurrentPages();
const ctx = pages[pages.length - 1];
const canvasDrag = ctx.selectComponent(options.selector);
delete options.selector;
return canvasDrag;
}
CanvasDrag.export = () => {
const canvasDrag = CanvasDrag();
if (!canvasDrag) {
console.error('请设置组件的id="canvas-drag"!!!');
} else {
return CanvasDrag().export();
}
};
CanvasDrag.initByArr = (arr) => {
const canvasDrag = CanvasDrag();
if (!canvasDrag) {
console.error('请设置组件的id="canvas-drag"!!!');
} else {
return CanvasDrag().initByArr(arr);
}
};
CanvasDrag.exportJson = () => {
const canvasDrag = CanvasDrag();
if (!canvasDrag) {
console.error('请设置组件的id="canvas-drag"!!!');
} else {
return CanvasDrag().exportJson();
}
};
CanvasDrag.changFontColor = (color) => {
const canvasDrag = CanvasDrag();
if (!canvasDrag) {
console.error('请设置组件的id="canvas-drag"!!!');
} else {
return CanvasDrag().changColor(color);
}
};
CanvasDrag.changeBgColor = (color) => {
const canvasDrag = CanvasDrag();
if (!canvasDrag) {
console.error('请设置组件的id="canvas-drag"!!!');
} else {
return CanvasDrag().changeBgColor(color);
}
};
CanvasDrag.changeBgImage = (bgImage) => {
const canvasDrag = CanvasDrag();
if (!canvasDrag) {
console.error('请设置组件的id="canvas-drag"!!!');
} else {
return CanvasDrag().changeBgImage(bgImage);
}
};
CanvasDrag.clearCanvas = () => {
const canvasDrag = CanvasDrag();
if (!canvasDrag) {
console.error('请设置组件的id="canvas-drag"!!!');
} else {
return CanvasDrag().clearCanvas();
}
};
CanvasDrag.undo = () => {
const canvasDrag = CanvasDrag();
if (!canvasDrag) {
console.error('请设置组件的id="canvas-drag"!!!');
} else {
return CanvasDrag().undo();
}
};
export default CanvasDrag;
\ No newline at end of file
components/canvas-drag/index.js 0 → 100644
View file @ f82f4050
// components/canvas-drag/index.js
const DRAG_ICON = '../../images/2b/classreviewshare/icon_angle_lr.png'; // 缩放按钮
const STROKE_COLOR = 'red';
const ROTATE_ENABLED = true;
let isMove = false; // 标识触摸后是否有移动，用来判断是否需要增加操作历史
const DEBUG_MODE = false; // 打开调试后会渲染操作区域边框（无背景时有效）
const dragGraph = function ({x = 30, y = 30, w, h, type, text, fontSize = 20, color = 'red', url = null, rotate = 0, sourceId = null, selected = true}, canvas, factor) {
if (type === 'text') {
canvas.setFontSize(fontSize);
const textWidth = canvas.measureText(text).width;
const textHeight = fontSize + 10;
this.centerX = x + textWidth / 2;
this.centerY = y + textHeight / 2;
this.w = textWidth;
this.h = textHeight;
} else {
this.centerX = x + w / 2;
this.centerY = y + h / 2;
this.w = w;
this.h = h;
}
this.x = x;
this.y = y;
// 4个顶点坐标
this.square = [
[this.x, this.y],
[this.x + this.w, this.y],
[this.x + this.w, this.y + this.h],
[this.x, this.y + this.h]
];
this.fileUrl = url;
this.text = text;
this.fontSize = fontSize;
this.color = color;
this.ctx = canvas;
this.rotate = rotate;
this.type = type;
this.selected = selected;
this.factor = factor;
this.sourceId = sourceId;
this.MIN_WIDTH = 20;
this.MIN_FONTSIZE = 10;
};
dragGraph.prototype = {
/**
* 绘制元素
*/
paint() {
this.ctx.save();
// 由于measureText获取文字宽度依赖于样式，所以如果是文字元素需要先设置样式
let textWidth = 0;
let textHeight = 0;
if (this.type === 'text') {
this.ctx.setFontSize(this.fontSize);
this.ctx.setTextBaseline('middle');
this.ctx.setTextAlign('center');
this.ctx.setFillStyle(this.color);
textWidth = this.ctx.measureText(this.text).width;
textHeight = this.fontSize + 10;
// 字体区域中心点不变，左上角位移
this.x = this.centerX - textWidth / 2;
this.y = this.centerY - textHeight / 2;
}
// 旋转元素
this.ctx.translate(this.centerX, this.centerY);
this.ctx.rotate(this.rotate * Math.PI / 180);
this.ctx.translate(-this.centerX, -this.centerY);
// 渲染元素
if (this.type === 'text') {
this.ctx.fillText(this.text, this.centerX, this.centerY);
} else if (this.type === 'image') {
this.ctx.drawImage(this.fileUrl, this.x, this.y, this.w, this.h);
}
// 如果是选中状态，绘制选择虚线框，和缩放图标
if (this.selected) {
this.ctx.setLineDash([2, 5]);
this.ctx.setLineWidth(2);
this.ctx.setStrokeStyle(STROKE_COLOR);
this.ctx.lineDashOffset = 6;
this.ctx.strokeRect(this.x, this.y, this.w, this.h);
this.ctx.drawImage(DRAG_ICON, this.x + this.w - 15, this.y + this.h - 15, 22, 22);
}
this.ctx.restore();
},
/**
* 给矩形描边
* @private
*/
_drawBorder() {
let p = this.square;
let ctx = this.ctx;
this.ctx.save();
this.ctx.beginPath();
ctx.setStrokeStyle('orange');
this._draw_line(this.ctx, p[0], p[1]);
this._draw_line(this.ctx, p[1], p[2]);
this._draw_line(this.ctx, p[2], p[3]);
this._draw_line(this.ctx, p[3], p[0]);
ctx.restore();
},
/**
* 画一条线
* @param ctx
* @param a
* @param b
* @private
*/
_draw_line(ctx, a, b) {
ctx.moveTo(a[0], a[1]);
ctx.lineTo(b[0], b[1]);
ctx.stroke();
},
/**
* 判断点击的坐标落在哪个区域
* @param {*} x 点击的坐标
* @param {*} y 点击的坐标
*/
isInGraph(x, y) {
// 删除区域左上角的坐标和区域的高度宽度
const delW = 30;
const delH = 30;
// 旋转后的删除区域坐标
const transformedDelCenter = this._rotatePoint(this.x, this.y, this.centerX, this.centerY, this.rotate);
const transformDelX = transformedDelCenter[0] - delW / 2;
const transformDelY = transformedDelCenter[1] - delH / 2;
// 变换区域左上角的坐标和区域的高度宽度
const scaleW = 30;
const scaleH = 30;
const transformedScaleCenter = this._rotatePoint(this.x + this.w, this.y + this.h, this.centerX, this.centerY, this.rotate);
// 旋转后的变换区域坐标
const transformScaleX = transformedScaleCenter[0] - scaleW / 2;
const transformScaleY = transformedScaleCenter[1] - scaleH / 2;
// 调试使用，标识可操作区域
if (DEBUG_MODE) {
// 标识删除按钮区域
this.ctx.setLineWidth(1);
this.ctx.setStrokeStyle('red');
this.ctx.strokeRect(transformDelX, transformDelY, delW, delH);
// 标识旋转/缩放按钮区域
this.ctx.setLineWidth(1);
this.ctx.setStrokeStyle('black');
this.ctx.strokeRect(transformScaleX, transformScaleY, scaleW, scaleH);
// 标识移动区域
this._drawBorder();
}
if (x - transformScaleX >= 0 && y - transformScaleY >= 0 &&
transformScaleX + scaleW - x >= 0 && transformScaleY + scaleH - y >= 0) {
// 缩放区域
return 'transform';
} else if (x - transformDelX >= 0 && y - transformDelY >= 0 &&
transformDelX + delW - x >= 0 && transformDelY + delH - y >= 0) {
// 删除区域
return 'del';
} else if (this.insidePolygon(this.square, [x, y])) {
return 'move';
}
// 不在选择区域里面
return false;
},
/**
* 判断一个点是否在多边形内部
* @param points 多边形坐标集合
* @param testPoint 测试点坐标
* 返回true为真，false为假
* */
insidePolygon(points, testPoint) {
let x = testPoint[0], y = testPoint[1];
let inside = false;
for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
let xi = points[i][0], yi = points[i][1];
let xj = points[j][0], yj = points[j][1];
let intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
if (intersect) inside = !inside;
}
return inside;
},
/**
* 计算旋转后矩形四个顶点的坐标（相对于画布）
* @private
*/
_rotateSquare() {
this.square = [
this._rotatePoint(this.x, this.y, this.centerX, this.centerY, this.rotate),
this._rotatePoint(this.x + this.w, this.y, this.centerX, this.centerY, this.rotate),
this._rotatePoint(this.x + this.w, this.y + this.h, this.centerX, this.centerY, this.rotate),
this._rotatePoint(this.x, this.y + this.h, this.centerX, this.centerY, this.rotate),
];
},
/**
* 计算旋转后的新坐标（相对于画布）
* @param x
* @param y
* @param centerX
* @param centerY
* @param degrees
* @returns {*[]}
* @private
*/
_rotatePoint(x, y, centerX, centerY, degrees) {
let newX = (x - centerX) * Math.cos(degrees * Math.PI / 180) - (y - centerY) * Math.sin(degrees * Math.PI / 180) + centerX;
let newY = (x - centerX) * Math.sin(degrees * Math.PI / 180) + (y - centerY) * Math.cos(degrees * Math.PI / 180) + centerY;
return [newX, newY];
},
/**
*
* @param {*} px 手指按下去的坐标
* @param {*} py 手指按下去的坐标
* @param {*} x 手指移动到的坐标
* @param {*} y 手指移动到的坐标
* @param {*} currentGraph 当前图层的信息
*/
transform(px, py, x, y, currentGraph) {
// 获取选择区域的宽度高度
if (this.type === 'text') {
this.ctx.setFontSize(this.fontSize);
const textWidth = this.ctx.measureText(this.text).width;
const textHeight = this.fontSize + 10;
this.w = textWidth;
this.h = textHeight;
// 字体区域中心点不变，左上角位移
this.x = this.centerX - textWidth / 2;
this.y = this.centerY - textHeight / 2;
} else {
this.centerX = this.x + this.w / 2;
this.centerY = this.y + this.h / 2;
}
const diffXBefore = px - this.centerX;
const diffYBefore = py - this.centerY;
const diffXAfter = x - this.centerX;
const diffYAfter = y - this.centerY;
const angleBefore = Math.atan2(diffYBefore, diffXBefore) / Math.PI * 180;
const angleAfter = Math.atan2(diffYAfter, diffXAfter) / Math.PI * 180;
// 旋转的角度
if (ROTATE_ENABLED) {
this.rotate = currentGraph.rotate + angleAfter - angleBefore;
}
const lineA = Math.sqrt(Math.pow((this.centerX - px), 2) + Math.pow((this.centerY - py), 2));
const lineB = Math.sqrt(Math.pow((this.centerX - x), 2) + Math.pow((this.centerY - y), 2));
if (this.type === 'image') {
let resize_rito = lineB / lineA;
let new_w = currentGraph.w * resize_rito;
let new_h = currentGraph.h * resize_rito;
if (currentGraph.w < currentGraph.h && new_w < this.MIN_WIDTH) {
new_w = this.MIN_WIDTH;
new_h = this.MIN_WIDTH * currentGraph.h / currentGraph.w;
} else if (currentGraph.h < currentGraph.w && new_h < this.MIN_WIDTH) {
new_h = this.MIN_WIDTH;
new_w = this.MIN_WIDTH * currentGraph.w / currentGraph.h;
}
this.w = new_w;
this.h = new_h;
this.x = currentGraph.x - (new_w - currentGraph.w) / 2;
this.y = currentGraph.y - (new_h - currentGraph.h) / 2;
} else if (this.type === 'text') {
const fontSize = currentGraph.fontSize * ((lineB - lineA) / lineA + 1);
this.fontSize = fontSize <= this.MIN_FONTSIZE ? this.MIN_FONTSIZE : fontSize;
// 旋转位移后重新计算坐标
this.ctx.setFontSize(this.fontSize);
const textWidth = this.ctx.measureText(this.text).width;
const textHeight = this.fontSize + 10;
this.w = textWidth;
this.h = textHeight;
// 字体区域中心点不变，左上角位移
this.x = this.centerX - textWidth / 2;
this.y = this.centerY - textHeight / 2;
}
},
toPx(rpx) {
return rpx * this.factor;
},
};
Component({
/**
* 组件的属性列表
*/
properties: {
graph: {
type: Object,
value: {},
observer: 'onGraphChange',
},
bgColor: {
type: String,
value: '',
},
bgImage: {
type: String,
value: '',
},
bgSourceId: {
type: String,
value: '',
},
width: {
type: Number,
value: 750,
},
height: {
type: Number,
value: 750,
},
enableUndo: {
type: Boolean,
value: false,
}
},
/**
* 组件的初始数据
*/
data: {
history:[],
},
attached() {
const sysInfo = wx.getSystemInfoSync();
const screenWidth = sysInfo.screenWidth;
this.factor = screenWidth / 750;
if (typeof this.drawArr === 'undefined') {
this.drawArr = [];
}
this.ctx = wx.createCanvasContext('canvas-label', this);
this.draw();
},
/**
* 组件的方法列表
*/
methods: {
toPx(rpx) {
return rpx * this.factor;
},
initBg(){
this.data.bgColor = '';
this.data.bgSourceId = '';
this.data.bgImage = '';
},
initHistory(){
this.data.history = [];
},
recordHistory(){
if (!this.data.enableUndo){
return;
}
this.exportJson().then((imgArr) => {
this.data.history.push(JSON.stringify(imgArr));
}).catch((e) => {
console.error(e);
});
},
undo() {
if (!this.data.enableUndo) {
console.log(`后退功能未启用，请设置enableUndo="{{true}}"`);
return;
}
if(this.data.history.length > 1){
this.data.history.pop()
let newConfigObj = this.data.history[this.data.history.length - 1];
this.initByArr(JSON.parse(newConfigObj));
}else{
console.log('已是第一步，不能回退');
}
},
onGraphChange(n, o) {
if (JSON.stringify(n) === '{}') return;
if(!this.ctx) return;
this.drawArr.push(new dragGraph(Object.assign({
x: 30,
y: 30,
}, n), this.ctx, this.factor));
this.draw();
// 参数有变化时记录历史
this.recordHistory();
},
initByArr(newArr) {
this.drawArr = []; // 重置绘画元素
this.initBg(); // 重置绘画背景
// 循环插入 drawArr
newArr.forEach((item, index) => {
switch (item.type) {
case 'bgColor':
this.data.bgImage = '';
this.data.bgSourceId = '';
this.data.bgColor = item.color;
break;
case 'bgImage':
this.data.bgColor = '';
this.data.bgImage = item.url;
if (item.sourceId) {
this.data.bgSourceId = item.sourceId;
}
break;
case 'image':
if (index === newArr.length - 1) {
item.selected = true;
} else {
item.selected = false;
}
this.drawArr.push(new dragGraph(item, this.ctx, this.factor));
break;
}
});
this.draw();
},
draw() {
if (this.data.bgImage !== '') {
this.ctx.drawImage(this.data.bgImage, 0, 0, this.toPx(this.data.width), this.toPx(this.data.height));
}
if (this.data.bgColor !== '') {
this.ctx.save();
this.ctx.setFillStyle(this.data.bgColor);
this.ctx.fillRect(0, 0, this.toPx(this.data.width), this.toPx(this.data.height));
this.ctx.restore();
}
this.drawArr.forEach((item) => {
item.paint();
});
return new Promise((resolve) => {
this.ctx.draw(false, () => {
resolve();
});
});
},
start(e) {
isMove = false; // 重置移动标识
const {x, y} = e.touches[0];
this.tempGraphArr = [];
let lastDelIndex = null; // 记录最后一个需要删除的索引
this.drawArr && this.drawArr.forEach((item, index) => {
const action = item.isInGraph(x, y);
if (action) {
item.action = action;
this.tempGraphArr.push(item);
// 保存点击时的坐标
this.currentTouch = {x, y};
if (action === 'del') {
lastDelIndex = index;// 标记需要删除的元素
}
} else {
item.action = false;
item.selected = false;
}
});
// 保存点击时元素的信息
if (this.tempGraphArr.length > 0) {
for (let i = 0; i < this.tempGraphArr.length; i++) {
let lastIndex = this.tempGraphArr.length - 1;
// 对最后一个元素做操作
if (i === lastIndex) {
// 未选中的元素，不执行删除和缩放操作
if (lastDelIndex !== null && this.tempGraphArr[i].selected) {
if (this.drawArr[lastDelIndex].action === 'del') {
this.drawArr.splice(lastDelIndex, 1);
this.ctx.clearRect(0, 0, this.toPx(this.data.width), this.toPx(this.data.height));
}
} else {
this.tempGraphArr[lastIndex].selected = true;
this.currentGraph = Object.assign({}, this.tempGraphArr[lastIndex]);
}
} else {
// 不是最后一个元素，不需要选中，也不记录状态
this.tempGraphArr[i].action = false;
this.tempGraphArr[i].selected = false;
}
}
}
this.draw();
},
move(e) {
const {x, y} = e.touches[0];
if (this.tempGraphArr && this.tempGraphArr.length > 0) {
isMove = true; // 有选中元素，并且有移动时，设置移动标识
const currentGraph = this.tempGraphArr[this.tempGraphArr.length - 1];
if (currentGraph.action === 'move') {
currentGraph.centerX = this.currentGraph.centerX + (x - this.currentTouch.x);
currentGraph.centerY = this.currentGraph.centerY + (y - this.currentTouch.y);
// 使用中心点坐标计算位移，不使用 x,y 坐标，因为会受旋转影响。
if (currentGraph.type !== 'text') {
currentGraph.x = currentGraph.centerX - this.currentGraph.w / 2;
currentGraph.y = currentGraph.centerY - this.currentGraph.h / 2;
}
} else if (currentGraph.action === 'transform') {
currentGraph.transform(this.currentTouch.x, this.currentTouch.y, x, y, this.currentGraph);
}
// 更新4个坐标点（相对于画布的坐标系）
currentGraph._rotateSquare();
this.draw();
}
},
end(e) {
this.tempGraphArr = [];
if(isMove){
isMove = false; // 重置移动标识
// 用户操作结束时记录历史
this.recordHistory();
}
},
export() {
return new Promise((resolve, reject) => {
this.drawArr = this.drawArr.map((item) => {
item.selected = false;
return item;
});
this.draw().then(() => {
wx.canvasToTempFilePath({
canvasId: 'canvas-label',
success: (res) => {
resolve(res.tempFilePath);
},
fail: (e) => {
reject(e);
},
}, this);
});
})
},
exportJson() {
return new Promise((resolve, reject) => {
let exportArr = this.drawArr.map((item) => {
item.selected = false;
switch (item.type) {
case 'image':
return {
type: 'image',
url: item.fileUrl,
y: item.y,
x: item.x,
w: item.w,
h: item.h,
rotate: item.rotate,
sourceId: item.sourceId,
};
break;
case 'text':
return {
type: 'text',
text: item.text,
color: item.color,
fontSize: item.fontSize,
y: item.y,
x: item.x,
w: item.w,
h: item.h,
rotate: item.rotate,
};
break;
}
});
if (this.data.bgImage) {
let tmp_img_config = {
type: 'bgImage',
url: this.data.bgImage,
};
if (this.data.bgSourceId) {
tmp_img_config['sourceId'] = this.data.bgSourceId;
}
exportArr.unshift(tmp_img_config);
} else if (this.data.bgColor) {
exportArr.unshift({
type: 'bgColor',
color: this.data.bgColor
});
}
resolve(exportArr);
})
},
changeBgColor(color) {
this.data.bgImage = '';
this.data.bgColor = color;
this.draw();
// 改变背景颜色时记录历史
this.recordHistory();
},
changeBgImage(newBgImg) {
this.data.bgColor = '';
if (typeof newBgImg == 'string') {
this.data.bgSourceId = '';
this.data.bgImage = newBgImg;
} else {
this.data.bgSourceId = newBgImg.sourceId;
this.data.bgImage = newBgImg.url;
}
this.draw();
// 改变背景图片时记录历史
this.recordHistory();
},
clearCanvas() {
this.ctx.clearRect(0, 0, this.toPx(this.data.width), this.toPx(this.data.height));
this.ctx.draw();
this.drawArr = [];
this.initBg(); // 重置绘画背景
this.initHistory(); // 清空历史记录
}
}
});
components/canvas-drag/index.json 0 → 100644
View file @ f82f4050
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
components/canvas-drag/index.wxml 0 → 100644
View file @ f82f4050
<!--components/canvas-drag/index.wxml-->
<canvas canvas-id='canvas-label'
disable-scroll="true"
bindtouchstart="start"
bindtouchmove="move"
bindtouchend="end"
style='width: {{width}}rpx; height: {{height}}rpx;'></canvas>
\ No newline at end of file
components/canvas-drag/index.wxss 0 → 100644
View file @ f82f4050
/* components/canvas-drag/index.wxss */
.movable-label {
margin-top: 300rpx;
width: 750rpx;
height: 400rpx;
background: #eee;
}
.movable-block {
width: 120rpx;
height: 120rpx;
background: #ccc;
}
.movable-block .image-con {
width: 100%;
height: 100%;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment