Skip to content

M
mallapp
Commit cccb9582 authored by 罗超's avatar 罗超
Browse files
Options

修改Canvas

parent 403d6acc
Show whitespace changes
Inline Side-by-side
Showing with 158 additions and 266 deletions
pages/goods/components/draw/style1.vue
View file @ cccb9582
<template>
<view class="draw-style1" :style="{ zoom: zoom }">
<view class="draw-style1">
<u-top-tips ref="uTips"></u-top-tips>
<img :src="tempPic" mode="widthFix" :style="{ width: 750 * zoom + 'px' }" />
<canvas
canvas-id="firstCanvas"
class="sty-box"
......@@ -44,6 +45,7 @@ export default {
loca_images: [],
},
ctx: null,
tempPic: "",
};
},
watch: {
......@@ -77,8 +79,6 @@ export default {
},
},
mounted() {
console.log("in draw");
this.zoom = (parseFloat(this.autoHeight) / 1344.0).toFixed(2);
this.config.images = this.images;
this.config.bgType = this.bgType;
......@@ -154,6 +154,9 @@ export default {
);
},
drawCtx() {
uni.showLoading({
title: "正在生成海报",
});
let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this;
if (!this.info.avatar_loca) {
......@@ -227,11 +230,33 @@ export default {
}
},
drawQrCode(ctx) {
let that = this;
uni.getImageInfo({
src: this.info.qrcode_url,
success: function (image) {
ctx.drawImage(image.path, 480, 975, 215, 215);
ctx.draw();
ctx.draw(false, () => {
uni.canvasToTempFilePath(
{
x: 0,
y: 0,
width: 750,
height: 1344,
destWidth: 750.0 * that.zoom,
destHeight: 1344.0 * that.zoom,
canvasId: "firstCanvas",
success: (res) => {
console.log(res);
uni.hideLoading();
that.tempPic = res.tempFilePath;
},
fail(e) {
console.log(e);
},
},
that
);
});
},
});
},
......@@ -428,7 +453,10 @@ export default {
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375, 459, 351, 234
375,
459,
351,
234
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 693, 351, 234);
......@@ -444,7 +472,10 @@ export default {
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375, 693, 351, 234
375,
693,
351,
234
);
this.otherDraw(ctx);
}
......@@ -600,73 +631,18 @@ export default {
<style>
.draw-style1 {
width: 750px;
height: 1344px;
background: #fff;
}
.draw-style1 .sty-box {
width: 100%;
height: 100%;
}
.draw-style1 .sty-box .header {
height: 90px;
display: flex;
align-items: center;
margin-bottom: 40px;
}
.draw-style1 .sty-box .header .image {
width: 90px;
height: 90px;
border-radius: 90px;
margin-right: 20px;
}
.draw-style1 .sty-box .header .title {
font-size: 20px;
color: #000;
line-height: 55px;
height: 55px;
border-radius: 55px;
padding: 0 24px;
background: #fff;
}
.draw-style1 .sty-box .content-img,
.draw-style1 .sty-box .content-img-one {
width: 100%;
height: 702px;
}
.draw-style1 .sty-box .info-box {
padding: 28px 30px;
display: flex;
align-items: center;
background: #fff;
}
.draw-style1 .sty-box .info-box .qrcode {
width: 215px;
height: 215px;
}
.draw-style1 .sty-box .info-box .left-info {
width: 1px;
flex: 1;
}
.draw-style1 .sty-box .info-box .left-info .good-name {
font-size: 28px;
color: #000;
line-height: 1.5;
text-overflow: -o-ellipsis-lastline;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.draw-style1 .sty-box .info-box .left-info .good-price {
color: #fc4a3b;
font-size: 40px;
margin-bottom: 75px;
z-index: 2;
}
.draw-style1 .sty-box .info-box .left-info .tips {
font-size: 24px;
color: gray;
.draw-style1 .sty-box {
width: 750px;
height: 1344px;
position: absolute;
top: -1344px;
left: -750px;
}
</style>
pages/goods/components/draw/style2.vue
View file @ cccb9582
<template>
<view class="draw-style1" :style="{ zoom: zoom }">
<view class="draw-style1">
<u-top-tips ref="uTips"></u-top-tips>
<img :src="tempPic" mode="widthFix" :style="{ width: 750 * zoom + 'px' }" />
<canvas
canvas-id="firstCanvas"
class="sty-box"
......@@ -44,6 +45,7 @@ export default {
loca_images: [],
},
ctx: null,
tempPic: ""
};
},
watch: {
......@@ -154,6 +156,9 @@ export default {
);
},
drawCtx() {
uni.showLoading({
title: "正在生成海报",
});
let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this;
if (!this.info.avatar_loca) {
......@@ -218,11 +223,33 @@ export default {
}
},
drawQrCode(ctx) {
let that=this
uni.getImageInfo({
src: this.info.qrcode_url,
success: function (image) {
ctx.drawImage(image.path, 458, 1063, 215, 215);
ctx.draw();
ctx.draw(false, () => {
uni.canvasToTempFilePath(
{
x: 0,
y: 0,
width: 750,
height: 1344,
destWidth: 750.0 * that.zoom,
destHeight: 1344.0 * that.zoom,
canvasId: "firstCanvas",
success: (res) => {
console.log(res);
uni.hideLoading();
that.tempPic = res.tempFilePath;
},
fail(e) {
console.log(e);
},
},
that
);
});
},
});
},
......@@ -469,8 +496,8 @@ export default {
this.showGoodPrice(ctx);
//this.showTips(ctx);
this.drawQrCode(ctx);
that.drawAvatar(ctx);
that.drawTitle(ctx);
this.drawAvatar(ctx);
this.drawTitle(ctx);
}
},
showGoodPrice(ctx) {
......@@ -560,73 +587,18 @@ export default {
<style>
.draw-style1 {
width: 750px;
height: 1344px;
background: #fff;
}
.draw-style1 .sty-box {
width: 100%;
height: 100%;
}
.draw-style1 .sty-box .header {
height: 90px;
display: flex;
align-items: center;
margin-bottom: 40px;
}
.draw-style1 .sty-box .header .image {
width: 90px;
height: 90px;
border-radius: 90px;
margin-right: 20px;
}
.draw-style1 .sty-box .header .title {
font-size: 20px;
color: #000;
line-height: 55px;
height: 55px;
border-radius: 55px;
padding: 0 24px;
background: #fff;
}
.draw-style1 .sty-box .content-img,
.draw-style1 .sty-box .content-img-one {
width: 100%;
height: 702px;
}
.draw-style1 .sty-box .info-box {
padding: 28px 30px;
display: flex;
align-items: center;
background: #fff;
}
.draw-style1 .sty-box .info-box .qrcode {
width: 215px;
height: 215px;
}
.draw-style1 .sty-box .info-box .left-info {
width: 1px;
flex: 1;
}
.draw-style1 .sty-box .info-box .left-info .good-name {
font-size: 28px;
color: #000;
line-height: 1.5;
text-overflow: -o-ellipsis-lastline;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
z-index: 2;
}
.draw-style1 .sty-box .info-box .left-info .good-price {
color: #fc4a3b;
font-size: 40px;
margin-bottom: 75px;
}
.draw-style1 .sty-box .info-box .left-info .tips {
font-size: 24px;
color: gray;
.draw-style1 .sty-box {
width: 750px;
height: 1344px;
position: absolute;
top: -1344px;
left: -750px;
}
</style>
pages/goods/components/draw/style3.vue
View file @ cccb9582
<template>
<view class="draw-style1" :style="{ zoom: zoom }">
<view class="draw-style1">
<u-top-tips ref="uTips"></u-top-tips>
<img :src="tempPic" mode="widthFix" :style="{ width: 750 * zoom + 'px' }" />
<canvas
canvas-id="firstCanvas"
class="sty-box"
......@@ -44,6 +45,7 @@ export default {
loca_images: [],
},
ctx: null,
tempPic: "",
};
},
watch: {
......@@ -154,6 +156,9 @@ export default {
);
},
drawCtx() {
uni.showLoading({
title: "正在生成海报",
});
let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this;
if (!this.info.avatar_loca) {
......@@ -227,11 +232,33 @@ export default {
}
},
drawQrCode(ctx) {
let that = this;
uni.getImageInfo({
src: this.info.qrcode_url,
success: function (image) {
ctx.drawImage(image.path, 50, 1085, 232, 232);
ctx.draw();
ctx.draw(false, () => {
uni.canvasToTempFilePath(
{
x: 0,
y: 0,
width: 750,
height: 1344,
destWidth: 750.0 * that.zoom,
destHeight: 1344.0 * that.zoom,
canvasId: "firstCanvas",
success: (res) => {
console.log(res);
uni.hideLoading();
that.tempPic = res.tempFilePath;
},
fail(e) {
console.log(e);
},
},
that
);
});
},
});
},
......@@ -522,73 +549,18 @@ export default {
<style>
.draw-style1 {
width: 750px;
height: 1344px;
background: #fff;
}
.draw-style1 .sty-box {
width: 100%;
height: 100%;
}
.draw-style1 .sty-box .header {
height: 90px;
display: flex;
align-items: center;
margin-bottom: 40px;
}
.draw-style1 .sty-box .header .image {
width: 90px;
height: 90px;
border-radius: 90px;
margin-right: 20px;
}
.draw-style1 .sty-box .header .title {
font-size: 20px;
color: #000;
line-height: 55px;
height: 55px;
border-radius: 55px;
padding: 0 24px;
background: #fff;
}
.draw-style1 .sty-box .content-img,
.draw-style1 .sty-box .content-img-one {
width: 100%;
height: 702px;
}
.draw-style1 .sty-box .info-box {
padding: 28px 30px;
display: flex;
align-items: center;
background: #fff;
}
.draw-style1 .sty-box .info-box .qrcode {
width: 215px;
height: 215px;
}
.draw-style1 .sty-box .info-box .left-info {
width: 1px;
flex: 1;
}
.draw-style1 .sty-box .info-box .left-info .good-name {
font-size: 28px;
color: #000;
line-height: 1.5;
text-overflow: -o-ellipsis-lastline;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
z-index: 2;
}
.draw-style1 .sty-box .info-box .left-info .good-price {
color: #fc4a3b;
font-size: 40px;
margin-bottom: 75px;
}
.draw-style1 .sty-box .info-box .left-info .tips {
font-size: 24px;
color: gray;
.draw-style1 .sty-box {
width: 750px;
height: 1344px;
position: absolute;
top: -1344px;
left: -750px;
}
</style>
pages/goods/components/draw/style4.vue
View file @ cccb9582
<template>
<view class="draw-style1" :style="{ zoom: zoom }">
<view class="draw-style1">
<u-top-tips ref="uTips"></u-top-tips>
<img :src="tempPic" mode="widthFix" :style="{ width: 750 * zoom + 'px' }" />
<canvas
canvas-id="firstCanvas"
class="sty-box"
......@@ -44,6 +45,7 @@ export default {
loca_images: [],
},
ctx: null,
tempPic: "",
};
},
watch: {
......@@ -154,6 +156,9 @@ export default {
);
},
drawCtx() {
uni.showLoading({
title: "正在生成海报",
});
let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this;
if (!this.info.avatar_loca) {
......@@ -219,11 +224,33 @@ export default {
}
},
drawQrCode(ctx) {
let that = this;
uni.getImageInfo({
src: this.info.qrcode_url,
success: function (image) {
ctx.drawImage(image.path, 306, 1097, 138, 138);
ctx.draw();
ctx.draw(false, () => {
uni.canvasToTempFilePath(
{
x: 0,
y: 0,
width: 750,
height: 1344,
destWidth: 750.0 * that.zoom,
destHeight: 1344.0 * that.zoom,
canvasId: "firstCanvas",
success: (res) => {
console.log(res);
uni.hideLoading();
that.tempPic = res.tempFilePath;
},
fail(e) {
console.log(e);
},
},
that
);
});
},
});
},
......@@ -541,73 +568,18 @@ export default {
<style>
.draw-style1 {
width: 750px;
height: 1344px;
background: #fff;
}
.draw-style1 .sty-box {
width: 100%;
height: 100%;
}
.draw-style1 .sty-box .header {
height: 90px;
display: flex;
align-items: center;
margin-bottom: 40px;
}
.draw-style1 .sty-box .header .image {
width: 90px;
height: 90px;
border-radius: 90px;
margin-right: 20px;
}
.draw-style1 .sty-box .header .title {
font-size: 20px;
color: #000;
line-height: 55px;
height: 55px;
border-radius: 55px;
padding: 0 24px;
background: #fff;
}
.draw-style1 .sty-box .content-img,
.draw-style1 .sty-box .content-img-one {
width: 100%;
height: 702px;
}
.draw-style1 .sty-box .info-box {
padding: 28px 30px;
display: flex;
align-items: center;
background: #fff;
}
.draw-style1 .sty-box .info-box .qrcode {
width: 215px;
height: 215px;
}
.draw-style1 .sty-box .info-box .left-info {
width: 1px;
flex: 1;
}
.draw-style1 .sty-box .info-box .left-info .good-name {
font-size: 28px;
color: #000;
line-height: 1.5;
text-overflow: -o-ellipsis-lastline;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
z-index: 2;
}
.draw-style1 .sty-box .info-box .left-info .good-price {
color: #fc4a3b;
font-size: 40px;
margin-bottom: 75px;
}
.draw-style1 .sty-box .info-box .left-info .tips {
font-size: 24px;
color: gray;
.draw-style1 .sty-box {
width: 750px;
height: 1344px;
position: absolute;
top: -1344px;
left: -750px;
}
</style>
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