Skip to content

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

fix

parent 86a42d3b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 316 additions and 322 deletions
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