Skip to content

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

fix

parent 86a42d3b
Hide whitespace changes
Inline Side-by-side
Showing with 316 additions and 322 deletions
business/pages/classservice/classreviewshare.js
View file @ 93836002
import {
activityLog,
generateCustomerQrcode,
formIdCreate
} from '../../../service/common.js';
import {
LocalStorage,
imagify,
dateDetail
dateDetail,
timestampToTime
} from '../../../utilities/index.js';
import {
studentidentity
......@@ -15,6 +15,9 @@ import {
import {
classroomdetailGet
} from '../../../service/business/classservice.js';
import {
wxGetImageInfo
} from '../../../utilities/wxApi.js';
import CanvasDrag from '../../../components/canvas-drag/canvas-drag';
var app = getApp();
Page({
......@@ -24,16 +27,17 @@ Page({
localImageRoot: '../../../images/',
id: 0,
currentIndex: 0,
currentImgUrl: '../../../images/2b/classreviewshare/carda_l.png',
currentImgUrl: 'https://cdn.img.shangjiadao.cn/qingxiao/daka/images/2b/classreviewshare/carda_l.png',
currentImgShareUrl: 'https://cdn.img.shangjiadao.cn/qingxiao/daka/images/2b/classreviewshare/carda_l_share.png.png',
reviewDetailContent: '',
userInfo: {},
qrcode: '',
painting: {},
posterUrl: '',
posterBox: [],
scrollLeft: 0,
reviewDetail: '',
graph: {},
graph2: '',
datetime: '',
bigType: 1,
bigTab: [
......@@ -42,7 +46,9 @@ Page({
],
tempImgArr1: [],
tempImgArr2: [],
coverindex: 0,
selectCardLong: false
},
onLoad: function (options) {
const {sid,rid} = options;
......@@ -55,12 +61,16 @@ Page({
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}`,
src_l_share: `${this.data.imageRoot}2b/classreviewshare/carda_l_share.png.png?${this.data.imageVersion}`,
src_s_share: `${this.data.imageRoot}2b/classreviewshare/carda_s_share.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}`,
src_l_share: `${this.data.imageRoot}2b/classreviewshare/carda_l.png.png?${this.data.imageVersion}`,
src_s_share: `${this.data.imageRoot}2b/classreviewshare/carda_s.png?${this.data.imageVersion}`,
src_l_share: `${this.data.imageRoot}2b/classreviewshare/carda_l_share.png.png?${this.data.imageVersion}`,
src_s_share: `${this.data.imageRoot}2b/classreviewshare/carda_s_share.png?${this.data.imageVersion}`,
}
],
tempImgArr2: [
......@@ -70,9 +80,8 @@ Page({
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 () {
......@@ -89,15 +98,22 @@ Page({
})
},
selectCard (e) {
const {item} = e.currentTarget.dataset;
let ReviewImgLen = this.data.hasReviewImg.length
console.log(item)
this.setData({
currentIndex: item.idx,
currentImgUrl: ReviewImgLen>0?item.src_l:item.src_s
})
console.log(this.data.currentImgUrl)
this.checkInstance()
const {item,islong} = e.currentTarget.dataset;
if(islong){
this.setData({
selectCardLong: true
})
}else{
let ReviewImgLen = this.data.hasReviewImg.length
this.setData({
currentIndex: item.idx,
currentImgUrl: ReviewImgLen>0?item.src_l:item.src_s,
currentImgShareUrl: ReviewImgLen>0?item.src_l_share:item.src_s_share,
selectCardLong: false
})
this.checkInstance()
}
},
// 适当改变tab位置
checkInstance () {
......@@ -123,23 +139,42 @@ Page({
const {code, data, datetime} = res;
this.data.datetime = datetime;
if(code == 200){
console.log(data)
this.setData({
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.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)
let that = this;
console.log('音频',this.data.hasReviewAudio)
if(this.data.hasReviewImg.length>0){
this.setData({
graph: {
w: 120,
h: 120,
type: 'image',
url: imagify(this.data.hasReviewImg[`${this.data.coverindex}`].src, 'image/resize,w_320/format,jpg/quality,q_50')
},
},()=>{
wxGetImageInfo({src: that.data.graph.url}).then((res)=>{
that.setData({
graph2: {
w: 120,
h: 120,
type: 'image',
url: res.path
},
})
}).catch(()=>{
})
})
}else{
this.setData({
currentImgUrl: 'https://cdn.img.shangjiadao.cn/qingxiao/daka/images/2b/classreviewshare/carda_s.png',
currentImgShareUrl: 'https://cdn.img.shangjiadao.cn/qingxiao/daka/images/2b/classreviewshare/carda_s_share.png',
})
}
this.userShow(this.data.sid);
}
}).catch((err)=>{
......@@ -161,6 +196,21 @@ Page({
}).catch((err)=>{
wx.hideLoading();
})
},
saveAndGenerate(){
let ReviewImgLen = this.data.hasReviewImg.length;
if(ReviewImgLen>0){
CanvasDrag.export().then((filePath) => {
console.log(filePath);
this.data.graphAfter = filePath;
this.generatePoster()
}).catch((e) => {
})
}else{
this.generatePoster()
}
},
generateCustomerQrcode () {
const visitor = LocalStorage.getItem('visitor');
......@@ -185,33 +235,19 @@ Page({
})
},
generatePoster (e) {
const {dataset} = e.currentTarget;
const date = dateDetail(this.data.datetime);
if (this.data.posterBox[this.data.currentIndex]) {
wx.previewImage({
current: this.data.posterBox[this.data.currentIndex], // 当前显示图片的链接，不填则默认为 urls 的第一张
urls: [this.data.posterBox[this.data.currentIndex]],
})
return;
}
let ReviewImgLen = this.data.hasReviewImg.length;
let hasPic = this.data.hasReviewImg.length>0?1:0
wx.showLoading({
title: '卡片生成中...'
})
switch(Number(dataset.posterindex)) {
case 1:
switch(hasPic) {
case 1://有图
this.setData({
painting:{
painting: {
width: 750,
height: 1141,
views: [
// {
// type: 'image',
// url: this.data.currentImgUrl,
// top: 0,
// left: 0,
// width: 750,
// height: 1141
// },
{
type: 'image',
url: imagify(this.data.userInfo.avatar, 'image/resize,w_320/format,jpg/quality,q_50'),
......@@ -222,7 +258,15 @@ Page({
},
{
type: 'image',
url: imagify(this.data.hasReviewImg[0].src, 'image/resize,w_320/format,jpg/quality,q_50'),
url: this.data.currentImgShareUrl,
top: 0,
left: 0,
width: 750,
height: 1141
},
{
type: 'image',
url: this.data.graphAfter,
top: 171,
left: 72,
width: 607,
......@@ -236,8 +280,7 @@ Page({
textAlign: 'center',
top: 123,
left: 375,
width: 750,
bolder: true
width: 750
},
{
type: 'text',
......@@ -249,11 +292,12 @@ Page({
top: 719,
left: 61,
MaxLineNumber: 2,
breakWord: true
breakWord: true,
width: 620
},
{
type: 'image',
url: `${this.data.imageRoot}2c/clockdetail/btn-bg.png`,
url: `${this.data.imageRoot}2b/classreviewshare/icon_audio.png`,
top: 800,
left: 61,
width: 144,
......@@ -265,17 +309,17 @@ Page({
fontSize: 30,
color: '#8395A6',
textAlign: 'center',
top: 993,
top: 985,
left: 85,
width: 109,
},
{ // 日
type: 'text',
content: date.day,
fontSize: 55,
fontSize: 50,
color: '#586D7E',
textAlign: 'center',
top: 1036,
top: 1015,
left: 85,
width: 109,
},
......@@ -285,7 +329,7 @@ Page({
fontSize: 15,
color: '#586D7E',
textAlign: 'center',
top: 1100,
top: 1090,
left: 85,
width: 109,
},
......@@ -296,99 +340,132 @@ Page({
lineHeight: 48,
color: '#000000',
textAlign: 'left',
top: 1027,
left: 350,
top: 1020,
left: 311,
},
{
type: 'image',
url: this.data.qrcode,
top: 976,
left: 565,
width: 150,
height: 150
top: 970,
left: 564,
width: 155,
height: 155
},
]
}
})
break;
case 2:
default://无图
this.setData({
painting:{
width: 750,
height: 1334,
height: 791,
views: [
{
type: 'image',
url: `${this.data.imageRoot}2c/invitationcard/cardb.png`,
url: this.data.userInfo.avatar?imagify(this.data.userInfo.avatar, 'image/resize,w_320/format,jpg/quality,q_50'): `${this.data.imageRoot}common/empty/avatar_user.png?${this.data.imageVersion}`,
top: 20,
left: 329,
width: 93,
height: 93
},
{
type: 'image',
url: this.data.currentImgShareUrl,
top: 0,
left: 0,
width: 750,
height: 1334
height: 791
},
{
type: 'image',
url: imagify(this.data.userInfo.avatar, 'image/resize,w_320/format,jpg/quality,q_50'),
top: 34,
left: 310,
width: 132,
height: 132
type: 'text',
content: this.data.userInfo.nickname,
fontSize: 28,
color: '#000000',
textAlign: 'center',
top: 123,
left: 375,
width: 750,
},
{
type: 'image',
url: `${this.data.imageRoot}2c/invitationcard/cardbavatarcircle.png`,
top: 25,
left: 300,
width: 148,
height: 148
{
type: 'text',
content: this.data.reviewDetailContent.content,
fontSize: 23,
lineHeight: 32,
color: '#000000',
textAlign: 'left',
top: 202,
left: 61,
MaxLineNumber: 4,
breakWord: true,
width: 620
},
{
{
type: 'image',
url: this.data.qrcode,
top: 1123,
left: 164,
width: 152,
height: 152
url: this.data.hasReviewAudio?`${this.data.imageRoot}2b/classreviewshare/icon_audio.png`: `${this.data.imageRoot}2b/classreviewshare/icon_audio.png`,
top: 350,
left: 61,
width: 144,
height: 39
},
{
{ // 月
type: 'text',
content: this.data.userInfo.nickname,
content: date.month.chineseShortName + '月',
fontSize: 30,
color: '#fff',
color: '#8395A6',
textAlign: 'center',
top: 204,
left: 375,
// bolder: true
top: 635,
left: 85,
width: 109,
},
{ // 日
type: 'text',
content: date.day,
fontSize: 50,
color: '#586D7E',
textAlign: 'center',
top: 670,
left: 85,
width: 109,
},
{ // 年
type: 'text',
content: date.year,
fontSize: 15,
color: '#586D7E',
textAlign: 'center',
top: 740,
left: 85,
width: 109,
},
{
type: 'text',
content: this.data.reviewDetailContent.content,
fontSize: 44,
content: this.data.reviewDetail.school_teacher.nickname || '',
fontSize: 28,
lineHeight: 48,
color: '#FFF9C6',
textAlign: 'center',
top: 510,
left: 375,
width: 500,
MaxLineNumber: 2,
breakWord: true,
bolder: true
}
color: '#000000',
textAlign: 'left',
top: 668,
left: 311,
},
{
type: 'image',
url: this.data.qrcode,
top: 620,
left: 564,
width: 155,
height: 155
},
]
}
})
break;
default:
break;
}
},
eventGetImage (e) {
const {detail} = e;
wx.hideLoading();
if (detail.errMsg == 'canvasdrawer:ok') {
this.setData({
// `[${this.data.currentIndex}]`: e.detail.tempFilePath
[`posterBox[${this.data.currentIndex}]`]: e.detail.tempFilePath
})
wx.previewImage({
current: e.detail.tempFilePath, // 当前显示图片的链接，不填则默认为 urls 的第一张
urls: [e.detail.tempFilePath],
......@@ -412,75 +489,41 @@ 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));
changeCover(){
let that = this;
let ReviewImgLen = this.data.hasReviewImg.length;
let coverindex = this.data.coverindex
if(this.data.coverindex>=ReviewImgLen-1){
coverindex=0
}else{
coverindex += 1;
}
that.setData({
coverindex,
})
// that.setData({canvasBg:null});
CanvasDrag.clearCanvas();
that.setData({
graph: {
w: 120,
h: 120,
type: 'image',
url: imagify(this.data.hasReviewImg[`${this.data.coverindex}`].src, 'image/resize,w_320/format,jpg/quality,q_50')
},
},()=>{
wxGetImageInfo({src: that.data.graph.url}).then((res)=>{
that.setData({
graph2: {
w: 120,
h: 120,
type: 'image',
url: res.path
},
})
}).catch(()=>{
})
.catch((e) => {
console.error(e);
});
},
onClearCanvas:function(event){
let _this = this;
_this.setData({canvasBg:null});
CanvasDrag.clearCanvas();
},
onUndo:function(event){
CanvasDrag.undo();
})
console.log('当前封面',this.data.coverindex)
}
})
})
\ No newline at end of file
business/pages/classservice/classreviewshare.json
View file @ 93836002
{
"navigationBarTitleText": "分享卡片",
"enablePullDownRefresh": false,
"disableScroll": true,
"usingComponents": {
"canvasdrawer": "/components/canvasdrawer/canvasdrawer",
"canvas-drag": "/components/canvas-drag/index"
......
business/pages/classservice/classreviewshare.wxml
View file @ 93836002
<wxs src="./../../../filter/index.wxs" module="filter" />
<view class="container">
<view class="swiperwrap">
<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="card {{hasReviewImg.length==0?'card-s':''}} {{selectCardLong?'card-hide':''}}">
<image class="cardbg" src="{{currentImgUrl}}"></image>
<view class="cardcontent">
<image class="avatar" src="{{filter.imagify(userInfo.avatar, 'image/resize,w_320/format,jpg/quality,q_50')}}"></image>
<image class="avatar" src="{{filter.imagify(userInfo.avatar, 'image/resize,w_320/format,jpg/quality,q_50')}}" wx:if="{{userInfo.avatar}}"></image>
<image class="avatar" src="{{imageRoot}}common/empty/avatar_user.png?{{imageVersion}}" wx:else></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> -->
<canvas-drag id="canvas-drag" graph="{{graph2}}" width="520" height="440" enableUndo="{{true}}"></canvas-drag>
<cover-image class="icon-angle icon-angle-lt" src="{{imageRoot}}2b/classreviewshare/icon_angle_lr.png?{{imageVersion}}"></cover-image>
<cover-image class="icon-angle icon-angle-rt" src="{{imageRoot}}2b/classreviewshare/icon_angle_rl.png?{{imageVersion}}"></cover-image>
<cover-image class="icon-angle icon-angle-rb" src="{{imageRoot}}2b/classreviewshare/icon_angle_lr.png?{{imageVersion}}"></cover-image>
<cover-image class="icon-angle icon-angle-lb" src="{{imageRoot}}2b/classreviewshare/icon_angle_rl.png?{{imageVersion}}"></cover-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>
<image class="icon-audio" src="{{imageRoot}}2b/classreviewshare/icon_audio.png?{{imageVersion}}" wx:if="{{hasReviewAudio}}"></image>
</view>
<form report-submit="true" bindsubmit="formIdCreate" class="createidform">
<button form-type="submit" class="createidbutton">生成form</button>
</form>
</view>
<view class="{{!selectCardLong?'card-hide':''}}">长图</view>
</view>
<view class="scroll-box">
<view class="tab-box">
......@@ -48,14 +48,18 @@
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="cardbox {{bigType==2 && currentIndex == index ? 'selected' : ''}}" data-item="{{item}}" data-islong="1" bindtap="selectCard" wx:for="{{tempImgArr2}}" wx:key="">
<view class="card">
<image class="cardbg" src="{{item.icon_src}}"></image>
</view>
</view>
</scroll-view>
<view class="button-boxfix">生成卡片</view>
<view class="button-boxfix">
<view class="btn btn-l" wx:if="{{hasReviewImg.length>0 && !selectCardLong}}" bindtap="changeCover">换封面 （{{coverindex+1}}/{{hasReviewImg.length}}）</view>
<view class="btn btn-r" bindtap="saveAndGenerate">生成卡片</view>
</view>
</view>
<canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>
</view>
business/pages/classservice/classreviewshare.wxss
View file @ 93836002
......@@ -26,6 +26,14 @@ page{
width: 647rpx;
height: 826rpx;
}
.card-s {
position: relative;
width: 647rpx;
height: 522rpx;
}
.card-hide{
display: none;
}
.cardbg {
width: 100%;
height: 100%;
......@@ -44,7 +52,7 @@ page{
top: 0;
padding: 17rpx 52rpx 0;
}
.carda .cardcontent .avatar {
.card .cardcontent .avatar {
width: 80rpx;
height: 80rpx;
margin: 0 auto;
......@@ -53,7 +61,7 @@ page{
border: 3rpx solid rgba(255,255,255,1);
display: block;
}
.carda .cardcontent .nickname {
.card .cardcontent .nickname {
color: #000;
font-size: 24rpx;
text-align: center;
......@@ -63,7 +71,7 @@ page{
line-height: 1;
padding-top: 17rpx;
}
.carda .cardcontent .imgbox{
.card .cardcontent .imgbox{
width: 542rpx;
height: 463rpx;
background: rgba(255,255,255,1);
......@@ -73,34 +81,34 @@ page{
padding: 10rpx;
overflow: hidden;
}
.carda .cardcontent .imgbox .icon-angle{
.card .cardcontent .imgbox .icon-angle{
width: 44rpx;
height: 44rpx;
background: rgba(101,184,244,1);
border-radius: 50%;
position: absolute;
}
.carda .cardcontent .imgbox .icon-angle-lt{
.card .cardcontent .imgbox .icon-angle-lt{
top: 12rpx;
left: 12rpx;
}
.carda .cardcontent .imgbox .icon-angle-rt{
.card .cardcontent .imgbox .icon-angle-rt{
top: 12rpx;
right: 12rpx;
}
.carda .cardcontent .imgbox .icon-angle-rb{
.card .cardcontent .imgbox .icon-angle-rb{
bottom: 12rpx;
right: 12rpx;
}
.carda .cardcontent .imgbox .icon-angle-lb{
.card .cardcontent .imgbox .icon-angle-lb{
bottom: 12rpx;
left: 12rpx;
}
.carda .cardcontent .imgbox .review-img{
.card .cardcontent .imgbox .review-img{
width: 100%;
max-height: 440rpx;
}
.carda .reviewtext {
.card .reviewtext {
font-size: 20rpx;
line-height: 28rpx;
color: #000;
......@@ -112,6 +120,9 @@ page{
padding-top: 13rpx;
font-weight: 500;
}
.card.card-s .reviewtext{
-webkit-line-clamp: 4;
}
.icon-audio{
width: 124rpx;
height: 34rpx;
......@@ -198,10 +209,46 @@ page{
width: 100%;
height: 100rpx;
background: #65B8F4;
font-size: 30rpx;
color: #fff;
font-weight: 500;
display: flex;
}
.button-boxfix .btn{
height: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: #fff;
font-weight: 500;
position: relative;
}
.button-boxfix .btn::after{
content: '';
width: 1px;
height: 100%;
background: #fff;
position: absolute;
right: 0;
top: 0;
transform: scaleX(.5);
}
.button-boxfix .btn:last-of-type::after{
display: none;
}
.button-boxfix .btn-l{
background: #fff;
color: #666;
}
.button-boxfix .btn-l::before{
content: '';
width: 100%;
height: 1px;
background: rgba(0,0,0,.05);
position: absolute;
left: 0;
top: 0;
transform: scaleY(.5);
}
.button-boxfix .btn-l{
}
\ No newline at end of file
components/canvas-drag/canvas-drag.js
View file @ 93836002
......@@ -7,13 +7,10 @@ function CanvasDrag(options = {}) {
...defaultOptions,
...options,
};
const pages = getCurrentPages();
const ctx = pages[pages.length - 1];
const canvasDrag = ctx.selectComponent(options.selector);
const canvasDrag = ctx.selectComponent(options.selector);
delete options.selector;
return canvasDrag;
}
......@@ -25,67 +22,12 @@ CanvasDrag.export = () => {
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"!!!');
console.error('请设置组件的id="canvas-drag"!!!');
} else {
return CanvasDrag().undo();
return CanvasDrag().clearCanvas();
}
};
};
export default CanvasDrag;
\ No newline at end of file
components/canvas-drag/index.js
View file @ 93836002
// components/canvas-drag/index.js
const DRAG_ICON = '../../images/2b/classreviewshare/icon_angle_lr.png'; // 缩放按钮
const STROKE_COLOR = 'red';
const DRAG_ICON = './icon_angle_rl.png'; // 缩放按钮
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.centerX = x + w / 2;
this.centerY = y + h / 2;
this.w = w;
this.h = h;
this.x = x;
this.y = y;
......@@ -52,41 +40,18 @@ 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') {
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();
},
......@@ -225,19 +190,9 @@ dragGraph.prototype = {
*/
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;
}
this.centerX = this.x + this.w / 2;
this.centerY = this.y + this.h / 2;
const diffXBefore = px - this.centerX;
const diffYBefore = py - this.centerY;
......@@ -385,6 +340,7 @@ Component({
}
},
onGraphChange(n, o) {
console.log(n,o,222222)
if (JSON.stringify(n) === '{}') return;
if(!this.ctx) return;
this.drawArr.push(new dragGraph(Object.assign({
......
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