Ideas: In the introduction js generated posters plugin configuration posterConfig constants, click Generate poster posters trigger the generation of an event onCreateOtherPoster, posters generated after a successful picture is assigned to bomb box pictures, posters displayed in the form of bomb box.
The introduction of plug-ins generated posters, constant configuration posterConfig, click on the poster to generate a trigger event generated posters onCreateOtherPoster, posters generated after a successful picture is assigned to bomb box pictures, posters displayed in the form of bomb box.
step:
1, is introduced to generate widget posters, configuration data
2, click the share button to trigger toggleAction event, showàtrue bottom of the list display
// pull-up list of menu options to switch the display / hide
toggle(type) {
this.setData({
[type]: !this.data[type]
});
},
toggleAction() {
this.toggle('show');
},
// close the pop-up menu
onCloseActionSheet() {
this.setData({
show: false
});
},
// Click on the drop-down menu
onSelectActionSheet: function (e) {
var that = this;
// If you choose to send to a friend
if (e.detail.name == "to a friend") {
that.onCloseActionSheet();
}
if (e.detail.name == "Multiple generation") {
// turn off the pull list
that.onCloseActionSheet();
// call events generated poster
that.onCreateOtherPoster();
}
},
3. Click Generate posters, onSelectActionSheet trigger event after the judge generate posters, posters for the re-assignment
// generate Posters
onCreateOtherPoster() {
console.log ( "Poster generation event")
// display prompts pop generation ...
wx.showLoading({
title: '... generation'
})
this.setData({
posterConfig: posterConfig.jdConfig
}, () => {
Poster.create (true); // the parameters: true for the regenerated erase
});
this.setData({
'PosterConfig.images [1] .url': this.data.detail.imgs_url [0], // reassigned poster Picture
'PosterConfig.texts [2] .text': this.data.detail.goods_name, // reassigned poster commodity title
'PosterConfig.texts [3] .text [1] .text': '¥' + this.data.goods_price // reassigned poster commodity prices
}, () => {
Poster.create (true); // the parameters: true for the regenerated erase
});
console.log(this.data.posterConfig.images[1].url)
}
4, posters generate successful, click the Save Image button to save the picture to your local
Accessories: Poster profile Codes
const posterConfig = {
jdConfig: {
width: 750,
height: 1000,
backgroundColor: '#fff',
debug: false,
preload: true,
blocks: [{
width: 690,
height: 808,
x: 30,
and 183,
borderWidth: 2,
borderColor: '#f0c2a0',
borderRadius: 20,
},
{
width: 634,
height: 74,
x: 59,
and: 770,
backgroundColor: '#fff',
opacity: 0.5,
zIndex: 100,
},
],
texts: [{
x: 113,
and: 61,
baseLine: 'middle',
text: 'Mary Chaoshan people shop'
fontSize: 32,
color: '#8d8d8d',
},
{
x: 30,
and 113,
baseLine: 'top',
text: 'find a good thing, it is recommended to you'
fontSize: 38,
color: '#080808',
},
{
x: 92,
and 810,
fontSize: 38,
baseLine: 'middle',
text: 'title'
width: 570,
lineNum: 1,
color: '#222',
zIndex: 200,
},
{
x: 78,
and: 895,
baseLine: 'middle',
text: [{
text: '',
fontSize: 28,
color: '#ec1731',
},
{
text: '￥99',
fontSize: 36,
color: '#ec1731',
marginLeft: 30,
}
]
},
{
x: 522,
and: 895,
baseLine: 'middle',
text: '',
fontSize: 28,
color: '#929292',
},
{
x: 106,
and 945,
baseLine: 'middle',
text: [{
text: 'Merchant Shipping & sale'
fontSize: 28,
color: '#929292',
},
{
text: 'seven days return',
fontSize: 28,
color: '#929292',
marginLeft: 50,
},
{
text: 'freight insurance'
fontSize: 28,
color: '#929292',
marginLeft: 50,
},
]
},
{
x: 360,
y: 1065,
baseLine: 'top',
text: 'Press applet identification code'
fontSize: 38,
color: '#080808',
},
{
x: 360,
y: 1123,
baseLine: 'top',
text: 'good value for money goods'
fontSize: 28,
color: '#929292',
},
],
images: [{
width: 62,
height: 62,
x: 30,
and: 30,
borderRadius: 62,
url: '/assets/img/logo1.jpg', // store pictures
},
{
width: 645,
height: 645,
x: 59,
and 210,
url: 'https://cdn-job1.phpyd.com/uploads/20190329/58f2f95a9ba484eb9ac85d1fe5ff6cc5.jpg', // poster map
},
{
width: 220,
height: 220,
x: 92,
and 1020,
url: 'https://cdn-job1.phpyd.com/uploads/20190403/fd1ab815e67a0ed0ccf22d13829a2b6d.jpg', // two-dimensional code
}
// ,
// {
// width: 750,
// height: 90,
// x: 0,
// y: 1244,
// url: '/assets/img/share_bottom.png', // bottom of the picture
// }
]
},
demoConfig: {
width: 750,
height: 1000,
backgroundColor: '#fff',
debug: false,
blocks: [{
x: 0,
and 10,
width: 750, // if the internal text, character width determined by the padding and
height: 120,
paddingLeft: 0,
paddingRight: 0,
borderWidth: 10,
borderColor: 'red',
backgroundColor: 'blue',
borderRadius: 40,
text: {
text: [{
text: 'Amount ¥ 1.00',
fontSize: 80,
color: 'yellow',
opacity: 1,
marginLeft: 50,
marginRight: 10,
},
{
text: 'Amount ¥ 1.00',
fontSize: 20,
color: 'yellow',
opacity: 1,
marginLeft: 10,
textDecoration: 'line-through',
},
],
baseLine: 'middle',
},
}],
texts: [{
x: 0,
and 180,
text: [{
text: 'Long Long Title Title Title length long title long title long title long title long title long title'
fontSize: 40,
color: 'red',
opacity: 1,
marginLeft: 0,
marginRight: 10,
width: 200,
lineHeight: 40,
lineNum: 2,
},
{
text: 'Price ¥ 1.00',
fontSize: 40,
color: 'blue',
opacity: 1,
marginLeft: 10,
textDecoration: 'line-through',
},
],
baseLine: 'middle',
},
{
x: 10,
and 330,
text: 'Amount ¥ 1.00',
fontSize: 80,
color: 'blue',
opacity: 1,
baseLine: 'middle',
textDecoration: 'line-through',
},
],
images: [{
url: 'https://lc-I0j7ktVK.cn-n1.lcfile.com/02bb99132352b5b5dcea.jpg',
width: 300,
height: 300,
and 450,
x: 0,
// borderRadius: 150,
// borderWidth: 10,
// borderColor: 'red',
},
{
url: 'https://lc-I0j7ktVK.cn-n1.lcfile.com/02bb99132352b5b5dcea.jpg',
width: 100,
height: 100,
and 450,
x: 400,
borderRadius: 100,
borderWidth: 10,
},
],
lines: [{
starts: 800
startX: 10,
endX: 300,
endY: 800,
width: 5,
color: 'red',
}]
}
}