571 lines
15 KiB
JavaScript
571 lines
15 KiB
JavaScript
// index.js
|
||
// 获取应用实例
|
||
let index = 0, // 当前点击图片的index
|
||
items = [], // 图片数组信息
|
||
itemId = 1, // 图片id，用于识别点击图片
|
||
fliter = 'init', // 默认过滤类型（原图）
|
||
shape = 'init'; // 默认形状（原图）
|
||
const hCw = 1.62; // 图片宽高比
|
||
const canvasPre = 1; // 展示的canvas占mask的百分比
|
||
const maskCanvas = wx.createCanvasContext('maskCanvas', this); // 创建 canvas 的绘图上下文 CanvasContext 对象
|
||
|
||
const util = require('../../utils/util.js');
|
||
var urlPath = require('../../config.js');
|
||
Page({
|
||
/**
|
||
* 页面的初始数据
|
||
*/
|
||
data: {
|
||
isLogin: false, //是否授权
|
||
funBox:true,//功能框
|
||
itemList: [],
|
||
showBtn: false, //按钮
|
||
showBox: false, //弹框
|
||
titlelist: ['脸谱', '背景', '按钮', '川剧', '人物', '文字', '装饰'],
|
||
titleIndex: '-1',
|
||
allList: [
|
||
'../../img/background/3.png',
|
||
'../../img/background/3.png',
|
||
'../../img/background/3.png',
|
||
'../../img/background/3.png',
|
||
'../../img/background/3.png',
|
||
'../../img/background/3.png',
|
||
'../../img/background/3.png',
|
||
'../../img/background/3.png',
|
||
],
|
||
allIndex: '-1',
|
||
faceImg: [
|
||
'../../img/face/3.png',
|
||
'../../img/face/4.png',
|
||
'../../img/face/3.png',
|
||
'../../img/face/3.png',
|
||
],
|
||
operaImg: [
|
||
'../../img/opera/3.png',
|
||
'../../img/opera/4.png',
|
||
'../../img/opera/5.png',
|
||
'../../img/opera/5.png',
|
||
'../../img/opera/4.png',
|
||
'../../img/opera/3.png',
|
||
],
|
||
backgroundImg: [
|
||
'../../img/background/2.png',
|
||
'../../img/background/3.png',
|
||
'../../img/background/2.png',
|
||
'../../img/background/3.png',
|
||
],
|
||
buttonImg: [
|
||
'../../img/button/2.png',
|
||
'../../img/button/1.png',
|
||
'../../img/button/2.png',
|
||
'../../img/button/1.png',
|
||
],
|
||
personageImg: [
|
||
'../../img/personage/1.png',
|
||
'../../img/personage/2.png',
|
||
'../../img/personage/3.png',
|
||
],
|
||
wordImg: [
|
||
'../../img/word/1.png',
|
||
'../../img/word/2.png',
|
||
'../../img/word/3.png',
|
||
],
|
||
decorateImg: [
|
||
'../../img/decorate/1.png',
|
||
'../../img/decorate/2.png',
|
||
'../../img/decorate/3.png',
|
||
],
|
||
isOk:false,
|
||
isNo:false
|
||
},
|
||
chooseTitle(e) {
|
||
let that = this;
|
||
if (that.data.titleIndex != e.currentTarget.dataset.index) {
|
||
that.setData({
|
||
allIndex: '-1'
|
||
})
|
||
}
|
||
that.setData({
|
||
titleIndex: e.currentTarget.dataset.index,
|
||
showBox: true,
|
||
showBtn: true
|
||
})
|
||
if (that.data.titlelist[that.data.titleIndex] == "脸谱") {
|
||
that.setData({
|
||
allList: that.data.faceImg
|
||
})
|
||
}
|
||
if (that.data.titlelist[that.data.titleIndex] == "川剧") {
|
||
that.setData({
|
||
allList: that.data.operaImg
|
||
})
|
||
}
|
||
if (that.data.titlelist[that.data.titleIndex] == "背景") {
|
||
that.setData({
|
||
allList: that.data.backgroundImg
|
||
})
|
||
}
|
||
if (that.data.titlelist[that.data.titleIndex] == "按钮") {
|
||
that.setData({
|
||
allList: that.data.buttonImg
|
||
})
|
||
}
|
||
if (that.data.titlelist[that.data.titleIndex] == "人物") {
|
||
that.setData({
|
||
allList: that.data.personageImg
|
||
})
|
||
}
|
||
if (that.data.titlelist[that.data.titleIndex] == "文字") {
|
||
that.setData({
|
||
allList: that.data.wordImg
|
||
})
|
||
}
|
||
if (that.data.titlelist[that.data.titleIndex] == "装饰") {
|
||
that.setData({
|
||
allList: that.data.decorateImg
|
||
})
|
||
}
|
||
},
|
||
chooseImg(e) {
|
||
let that = this;
|
||
that.setData({
|
||
allIndex: e.currentTarget.dataset.index,
|
||
showBox: false,
|
||
showBtn: false
|
||
})
|
||
if (that.data.titleIndex == 1) {
|
||
this.setBackGroundImg({
|
||
url: that.data.backgroundImg[that.data.allIndex]
|
||
});
|
||
} else {
|
||
that.setDropItem({
|
||
url: that.data.allList[that.data.allIndex]
|
||
});
|
||
}
|
||
},
|
||
onShow: function() {
|
||
if (typeof this.getTabBar === 'function' &&
|
||
this.getTabBar()) {
|
||
this.getTabBar().setData({
|
||
selected: 0
|
||
})
|
||
}
|
||
},
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad: function(options) {
|
||
items = this.data.itemList;
|
||
wx.getSystemInfo({ // 获取系统信息
|
||
success: sysData => {
|
||
this.sysData = sysData;
|
||
// 设置画布宽高，this.sysData.windowWidth为屏幕的宽度
|
||
this.setData({
|
||
canvasWidth: this.sysData.windowWidth *canvasPre, // 如果觉得不清晰的话，可以把所有组件、宽高放大一倍
|
||
canvasHeight: this.sysData.windowWidth * canvasPre * hCw,
|
||
backGroundWidth: this.sysData.windowWidth,
|
||
backGroundHeight: this.sysData.screenHeight
|
||
})
|
||
|
||
}
|
||
})
|
||
this.setBackGroundImg({
|
||
url: this.data.backgroundImg[0]
|
||
});
|
||
this.getBottleCategories();
|
||
},
|
||
// 上传图片
|
||
uploadImg() {
|
||
let that = this;
|
||
wx.chooseImage({
|
||
count: 1,
|
||
sizeType: ['original', 'compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success(res) {
|
||
// tempFilePath可以作为img标签的src属性显示图片
|
||
that.setDropItem({
|
||
url: res.tempFilePaths[0]
|
||
});
|
||
}
|
||
})
|
||
},
|
||
// 设置背景图片
|
||
setBackGroundImg(imgData) {
|
||
console.log(imgData);
|
||
let data = {}; // 存储图片信息
|
||
// 获取图片信息，网络图片需先配置download域名才能生效
|
||
wx.getImageInfo({
|
||
src: imgData.url,
|
||
success: res => {
|
||
// 初始化数据
|
||
let maxWidth = this.data.backGroundWidth,
|
||
maxHeight = this.data.backGroundHeight; // 设置最大宽高
|
||
console.log(maxWidth, maxHeight);
|
||
if (res.width > maxWidth || res.height > maxHeight) { // 原图宽或高大于最大值就执行
|
||
if (res.width / res.height > maxWidth / maxHeight) { // 判断比例使用最大值的宽或高作为基数计算
|
||
data.width = maxWidth;
|
||
data.height = Math.round(maxWidth * (res.height / res.width));
|
||
} else {
|
||
data.height = maxHeight;
|
||
data.width = Math.round(maxHeight * (res.width / res.height));
|
||
}
|
||
}
|
||
data.image = imgData.url; // 显示地址
|
||
data.initImage = imgData.url; // 原始地址
|
||
// data.id = ++itemId; // id
|
||
data.id = 2; // id
|
||
data.top = 0; // top定位
|
||
data.left = 0; // left定位
|
||
// 圆心坐标
|
||
data.x = data.left + data.width / 2;
|
||
data.y = data.top + data.height / 2;
|
||
data.scale = 1; // scale缩放
|
||
data.rotate = 1; // 旋转角度
|
||
data.active = false; // 选中状态
|
||
items[0] = data; // 每增加一张图片数据增加一条信息
|
||
this.setData({
|
||
itemList: items
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 设置图片的信息
|
||
setDropItem(imgData) {
|
||
let data = {}; // 存储图片信息
|
||
// 获取图片信息，网络图片需先配置download域名才能生效
|
||
wx.getImageInfo({
|
||
src: imgData.url,
|
||
success: res => {
|
||
// 初始化数据
|
||
let maxWidth = 150,
|
||
maxHeight = 150; // 设置最大宽高
|
||
if (res.width > maxWidth || res.height > maxHeight) { // 原图宽或高大于最大值就执行
|
||
if (res.width / res.height > maxWidth / maxHeight) { // 判断比例使用最大值的宽或高作为基数计算
|
||
data.width = maxWidth;
|
||
data.height = Math.round(maxWidth * (res.height / res.width));
|
||
} else {
|
||
data.height = maxHeight;
|
||
data.width = Math.round(maxHeight * (res.width / res.height));
|
||
}
|
||
}
|
||
data.image = imgData.url; // 显示地址
|
||
data.initImage = imgData.url; // 原始地址
|
||
data.id = ++itemId + 1; // id
|
||
data.top = 10; // top定位
|
||
data.left = 10; // left定位
|
||
// 圆心坐标
|
||
data.x = data.left + data.width / 2;
|
||
data.y = data.top + data.height / 2;
|
||
data.scale = 1; // scale缩放
|
||
data.rotate = 1; // 旋转角度
|
||
data.active = false; // 选中状态
|
||
console.log(data);
|
||
items[items.length] = data; // 每增加一张图片数据增加一条信息
|
||
this.setData({
|
||
itemList: items
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 点击图片
|
||
WraptouchStart: function(e) {
|
||
if (e.currentTarget.dataset.id != 2) {
|
||
// 循环图片数组获取点击的图片信息
|
||
for (let i = 0; i < items.length; i++) {
|
||
items[i].active = false;
|
||
if (e.currentTarget.dataset.id == items[i].id) {
|
||
index = i;
|
||
items[index].active = true;
|
||
}
|
||
}
|
||
this.setData({
|
||
itemList: items
|
||
})
|
||
// 获取点击的坐标值
|
||
items[index].lx = e.touches[0].clientX;
|
||
items[index].ly = e.touches[0].clientY;
|
||
}
|
||
this.setData({
|
||
showBox: false,
|
||
funBox:false
|
||
})
|
||
},
|
||
// 拖动图片
|
||
WraptouchMove(e) {
|
||
if (e.currentTarget.dataset.id != 2) {
|
||
items[index]._lx = e.touches[0].clientX;
|
||
items[index]._ly = e.touches[0].clientY;
|
||
|
||
items[index].left += items[index]._lx - items[index].lx;
|
||
items[index].top += items[index]._ly - items[index].ly;
|
||
items[index].x += items[index]._lx - items[index].lx;
|
||
items[index].y += items[index]._ly - items[index].ly;
|
||
|
||
items[index].lx = e.touches[0].clientX;
|
||
items[index].ly = e.touches[0].clientY;
|
||
|
||
this.setData({
|
||
itemList: items,
|
||
showBtn: true,
|
||
funBox:false
|
||
})
|
||
}
|
||
},
|
||
// 放开图片
|
||
WraptouchEnd() {
|
||
this.synthesis(); // 调用合成图方法
|
||
this.setData({
|
||
showBtn: false,
|
||
funBox:true
|
||
})
|
||
},
|
||
// 点击伸缩图标
|
||
oTouchStart(e) {
|
||
//找到点击的那个图片对象，并记录
|
||
for (let i = 0; i < items.length; i++) {
|
||
items[i].active = false;
|
||
if (e.currentTarget.dataset.id == items[i].id) {
|
||
index = i;
|
||
items[index].active = true;
|
||
}
|
||
}
|
||
//获取作为移动前角度的坐标
|
||
items[index].tx = e.touches[0].clientX;
|
||
items[index].ty = e.touches[0].clientY;
|
||
//移动前的角度
|
||
items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index].ty);
|
||
//获取图片半径
|
||
items[index].r = this.getDistancs(items[index].x, items[index].y, items[index].left, items[index].top);
|
||
},
|
||
oTouchMove: function(e) {
|
||
//记录移动后的位置
|
||
items[index]._tx = e.touches[0].clientX;
|
||
items[index]._ty = e.touches[0].clientY;
|
||
//移动的点到圆心的距离
|
||
items[index].disPtoO = this.getDistancs(items[index].x, items[index].y, items[index]._tx, items[index]._ty - 10)
|
||
|
||
items[index].scale = items[index].disPtoO / items[index].r;
|
||
|
||
//移动后位置的角度
|
||
items[index].angleNext = this.countDeg(items[index].x, items[index].y, items[index]._tx, items[index]._ty)
|
||
//角度差
|
||
items[index].new_rotate = items[index].angleNext - items[index].anglePre;
|
||
|
||
//叠加的角度差
|
||
items[index].rotate += items[index].new_rotate;
|
||
items[index].angle = items[index].rotate; //赋值
|
||
|
||
//用过移动后的坐标赋值为移动前坐标
|
||
items[index].tx = e.touches[0].clientX;
|
||
items[index].ty = e.touches[0].clientY;
|
||
items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index].ty)
|
||
|
||
//赋值setData渲染
|
||
this.setData({
|
||
itemList: items
|
||
})
|
||
},
|
||
// 计算坐标点到圆心的距离
|
||
getDistancs(cx, cy, pointer_x, pointer_y) {
|
||
this.setData({
|
||
showBtn: true,
|
||
funBox:false
|
||
})
|
||
var ox = pointer_x - cx;
|
||
var oy = pointer_y - cy;
|
||
return Math.sqrt(
|
||
ox * ox + oy * oy
|
||
);
|
||
},
|
||
/*
|
||
*参数cx和cy为图片圆心坐标
|
||
*参数pointer_x和pointer_y为手点击的坐标
|
||
*返回值为手点击的坐标到圆心的角度
|
||
*/
|
||
countDeg: function(cx, cy, pointer_x, pointer_y) {
|
||
var ox = pointer_x - cx;
|
||
var oy = pointer_y - cy;
|
||
var to = Math.abs(ox / oy);
|
||
var angle = Math.atan(to) / (2 * Math.PI) * 360;
|
||
if (ox < 0 && oy < 0) //相对在左上角，第四象限，js中坐标系是从左上角开始的，这里的象限是正常坐标系
|
||
{
|
||
angle = -angle;
|
||
} else if (ox <= 0 && oy >= 0) //左下角,3象限
|
||
{
|
||
angle = -(180 - angle)
|
||
} else if (ox > 0 && oy < 0) //右上角，1象限
|
||
{
|
||
angle = angle;
|
||
} else if (ox > 0 && oy > 0) //右下角，2象限
|
||
{
|
||
angle = 180 - angle;
|
||
}
|
||
return angle;
|
||
},
|
||
// 删除
|
||
deleteItem: function(e) {
|
||
let newList = [];
|
||
for (let i = 0; i < items.length; i++) {
|
||
if (e.currentTarget.dataset.id != items[i].id) {
|
||
newList.push(items[i])
|
||
}
|
||
}
|
||
if (newList.length > 1) { //大于0背景图可被删除，大于1背景图不能被删除
|
||
newList[newList.length - 1].active = true; // 剩下图片组最后一个选中
|
||
}
|
||
items = newList;
|
||
this.setData({
|
||
itemList: items
|
||
})
|
||
},
|
||
// 打开遮罩层
|
||
openMask() {
|
||
this.synthesis();
|
||
this.setData({
|
||
showCanvas: true
|
||
})
|
||
},
|
||
synthesis() { // 合成图片
|
||
maskCanvas.save();
|
||
maskCanvas.beginPath();
|
||
// 画背景色（白色）
|
||
maskCanvas.setFillStyle('#fff');
|
||
maskCanvas.fillRect(0, 0, this.data.canvasWidth, this.data.backGroundHeight);
|
||
console.log(this.data.canvasWidth, this.data.backGroundHeight);
|
||
items.forEach((currentValue, index) => {
|
||
maskCanvas.save();
|
||
maskCanvas.translate(0, 0);
|
||
maskCanvas.beginPath();
|
||
maskCanvas.translate(currentValue.x, currentValue.y); // 圆心坐标
|
||
maskCanvas.rotate(currentValue.angle * Math.PI / 180);
|
||
maskCanvas.translate(-(currentValue.width * currentValue.scale / 2), -(currentValue.height *currentValue.scale / 2))
|
||
maskCanvas.drawImage(currentValue.image, 0, 0, currentValue.width * currentValue.scale,currentValue.height * currentValue.scale);
|
||
maskCanvas.restore();
|
||
})
|
||
// reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制
|
||
maskCanvas.draw(false, (e) => {
|
||
wx.canvasToTempFilePath({
|
||
canvasId: 'maskCanvas',
|
||
success: res => {
|
||
this.setData({
|
||
canvasTemImg: res.tempFilePath
|
||
})
|
||
}
|
||
}, this);
|
||
})
|
||
},
|
||
// 关闭遮罩层
|
||
disappearCanvas() {
|
||
this.setData({
|
||
showCanvas: false
|
||
})
|
||
},
|
||
// 保存图片到系统相册
|
||
saveImg: function() {
|
||
if (wx.getStorageSync('token')) {
|
||
wx.saveImageToPhotosAlbum({
|
||
filePath: this.data.canvasTemImg,
|
||
success: res => {
|
||
wx.showToast({
|
||
title: '保存成功',
|
||
icon: "success"
|
||
})
|
||
},
|
||
fail: res => {
|
||
wx.openSetting({
|
||
success: settingdata => {
|
||
if (settingdata.authSetting['scope.writePhotosAlbum']) {
|
||
console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
|
||
} else {
|
||
console.log('获取权限失败，给出不给权限就无法正常使用的提示')
|
||
}
|
||
},
|
||
fail: error => {
|
||
console.log(error)
|
||
}
|
||
})
|
||
wx.showModal({
|
||
title: '提示',
|
||
content: '保存失败，请确保相册权限已打开',
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
this.setData({
|
||
isLogin: true
|
||
})
|
||
}
|
||
},
|
||
shareImg() {
|
||
if (wx.getStorageSync('token')) {
|
||
wx.downloadFile({
|
||
url: this.data.canvasTemImg,
|
||
success: (res) => {
|
||
wx.showShareImageMenu({
|
||
path: res.tempFilePath
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
this.setData({
|
||
isLogin: true
|
||
})
|
||
}
|
||
},
|
||
chooseBtn(e) {
|
||
let loginIndex = e.currentTarget.dataset.index;
|
||
this.setData({
|
||
isOk:false,
|
||
isNo:false
|
||
})
|
||
loginIndex==1 ? this.setData({isOk:true}) : this.setData({isNo:true})
|
||
},
|
||
shouq(e) {
|
||
wx.getUserProfile({ //获取用户昵称
|
||
desc: '用于完善会员资料',
|
||
success: (res) => {
|
||
this.setData({
|
||
userInfo: res.userInfo,
|
||
isLogin: false
|
||
})
|
||
wx.showToast({title:'授权成功',icon:'none'})
|
||
this.setData({isOk:false})
|
||
wx.login({//调用授权登录
|
||
success: res => {
|
||
wx.request({
|
||
url: urlPath.getopenid,
|
||
method:'post',
|
||
data: {
|
||
code: res.code,
|
||
wx_ame:this.data.userInfo.nickName,
|
||
avater:this.data.userInfo.avatarUrl,
|
||
},
|
||
success(res) {
|
||
console.log(res,1234);
|
||
if (res.data.code == 0) {
|
||
wx.setStorageSync('token', res.data.data.token);
|
||
wx.setStorageSync('openid', res.data.data.openid);
|
||
wx.setStorageSync('user', res.data.data.user);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
fail:(res)=>{
|
||
wx.showToast({title:'授权失败',icon:'none'})
|
||
this.setData({isOk:false})
|
||
}
|
||
})
|
||
},
|
||
getBottleCategories(){
|
||
wx.request({
|
||
url: urlPath.getBottleCategories,
|
||
data: {},
|
||
success(res) {
|
||
console.log(res);
|
||
}
|
||
});
|
||
}
|
||
})
|