225 lines
6.4 KiB
JavaScript
225 lines
6.4 KiB
JavaScript
import utils from "../../utils/utils";
|
||
// painting-2.js
|
||
Component({
|
||
properties: {
|
||
showPaint:{
|
||
type: Boolean,
|
||
value:false,
|
||
observer(newval) {
|
||
this.setData({
|
||
showPaint: newval
|
||
});
|
||
},
|
||
},
|
||
},
|
||
|
||
ready(){
|
||
let that = this;
|
||
// 获取设备信息，canvas高度用
|
||
wx.getSystemInfo({
|
||
success: function(res) {
|
||
console.log(res);
|
||
that.setData({
|
||
canvasWidth: res.windowWidth,
|
||
canvasHeight: res.windowHeight-50,
|
||
windowHeight: res.windowHeight
|
||
})
|
||
},
|
||
})
|
||
// 选照片
|
||
//this.chooseImg();
|
||
},
|
||
/**
|
||
* 页面的初始数据
|
||
*/
|
||
data: {
|
||
showPaint:false,
|
||
hasChoosedImg: false,
|
||
canvasWidth: 0,
|
||
showBars: false,
|
||
canvasHeight: 0, // canvas的完整高度
|
||
canvasHeightLen: 0, // canvas的临时高度（用在操作栏影响画布高度时）
|
||
windowHeight: 0, // 屏幕高度
|
||
prevPosition: [0, 0], // 手指触摸的所在位置
|
||
background: '', // 背景图片，即导入的图片
|
||
colors: ["#FFFFFF", "#000000", "#ff0000", "#ffff00", "#00CC00", "#99CCFF", "#0000ff", "#ff00ff"],
|
||
selectColor:"#99CCFF",
|
||
btnInfo: [
|
||
{
|
||
type: 'width',
|
||
background: 'url("http://ov8a2tdri.bkt.clouddn.com/wx-app/icon-1.png"); background-size: 30px 30px;'
|
||
},
|
||
{
|
||
type: 'color',
|
||
background: 'url("http://ov8a2tdri.bkt.clouddn.com/wx-app/icon-2.png") white no-repeat; background-size: 24px 24px;background-position: 3px 3px;'
|
||
},
|
||
{
|
||
type: 'clear',
|
||
background: 'url("http://img0.imgtn.bdimg.com/it/u=1358545290,3102156418&fm=26&gp=0.jpg") white no-repeat; background-size: 20px 20px;background-position: 5px 5px;'
|
||
},
|
||
{
|
||
type: 'save',
|
||
background: 'url("http://ov8a2tdri.bkt.clouddn.com/wx-app/icon-6.png") white no-repeat; background-size: 20px 20px;background-position: 5px 5px;'
|
||
}
|
||
],
|
||
width: false, // 是否开启宽度调整栏
|
||
color: false, // 是否开启颜色调整栏
|
||
r: 33,
|
||
g: 33,
|
||
b: 33,
|
||
selectSize:5,
|
||
clear: false, // 是否开启清空栏
|
||
eraser: false, // 是否开启橡皮擦
|
||
saving: false, // 是否在保存状态
|
||
scope: false, // 是否有保存图片的权限
|
||
},
|
||
methods:{
|
||
hideTuya(){
|
||
this.setData({
|
||
showPaint:false,
|
||
})
|
||
},
|
||
chooseBi(){
|
||
this.setData({
|
||
width: false, // 是否开启宽度调整栏
|
||
color: false,
|
||
clear: false, // 是否开启清空栏
|
||
eraser: false, // 是否开启橡皮擦
|
||
saving: false,
|
||
})
|
||
},
|
||
// save(e){
|
||
// saveImg(this, 2);
|
||
// this.triggerEvent('confirmUpload')
|
||
// },
|
||
tapBtn: function (e) {
|
||
utils.tapBtn(e, this, 2);
|
||
},
|
||
showBarsHandler(e) {
|
||
//this.tapBtn(e)
|
||
this.setData({
|
||
showBars: !this.data.showBars,
|
||
clear:false,
|
||
eraser:false
|
||
|
||
})
|
||
},
|
||
|
||
sizeHandler(e) {
|
||
const size = e.detail.value;
|
||
this.setData({
|
||
selectSize: size
|
||
})
|
||
},
|
||
hideBarsHandler() {
|
||
this.setData({
|
||
showBars: false
|
||
})
|
||
},
|
||
colorChange(e) {
|
||
this.tapBtn(e);
|
||
const color = e.currentTarget.dataset.color;
|
||
this.setData({
|
||
selectColor: color
|
||
})
|
||
},
|
||
addImg: function (e) {
|
||
this.chooseImg();
|
||
},
|
||
|
||
chooseImg() {
|
||
let that = this;
|
||
wx.chooseImage({
|
||
count:1,
|
||
success: function (res) {
|
||
that.setData({
|
||
hasChoosedImg: true,
|
||
})
|
||
wx.getImageInfo({
|
||
src: res.tempFilePaths[0],
|
||
success: function (res) {
|
||
// 获取图片信息，主要为宽高，选择合适的自适应方式（将最大边完整显示）
|
||
let [height, width] = [that.data.canvasWidth / res.width * res.height, that.data.canvasWidth];
|
||
if (height > that.data.windowHeight - 50) {
|
||
height = that.data.windowHeight - 50;
|
||
width = height / res.height * res.width;
|
||
}
|
||
that.setData({
|
||
canvasHeight: height,
|
||
canvasWidth: width,
|
||
background: res.path
|
||
});
|
||
}
|
||
})
|
||
},
|
||
fail: function (res) {
|
||
console.log(res);
|
||
}
|
||
})
|
||
},
|
||
|
||
touchStart: function (e) {
|
||
// 开始画图，隐藏所有的操作栏
|
||
this.setData({
|
||
prevPosition: [e.touches[0].x, e.touches[0].y],
|
||
width: false,
|
||
color: false,
|
||
canvasHeightLen: 0
|
||
})
|
||
},
|
||
|
||
touchMove: function (e) {
|
||
// 触摸移动，绘制中。。。
|
||
let ctx = wx.createCanvasContext('myCanvas',this);
|
||
|
||
if (this.data.eraser) {
|
||
ctx.clearRect(e.touches[0].x, e.touches[0].y, this.data.selectSize,this.data.selectSize);
|
||
ctx.draw(true);
|
||
} else {
|
||
ctx.setStrokeStyle(this.data.selectColor);
|
||
ctx.setLineWidth(this.data.selectSize);
|
||
ctx.setLineCap('round');
|
||
ctx.setLineJoin('round');
|
||
ctx.moveTo(this.data.prevPosition[0], this.data.prevPosition[1]);
|
||
ctx.lineTo(e.touches[0].x, e.touches[0].y);
|
||
ctx.stroke();
|
||
ctx.draw(true);
|
||
}
|
||
|
||
this.setData({
|
||
prevPosition: [e.touches[0].x, e.touches[0].y]
|
||
})
|
||
console.log(11111)
|
||
},
|
||
|
||
clearCanvas: function (e) {
|
||
this.tapBtn(e)
|
||
let ctx = wx.createCanvasContext('myCanvas',this);
|
||
ctx.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeight);
|
||
ctx.draw();
|
||
this.setData({
|
||
clear: false,
|
||
canvasHeightLen: 0
|
||
});
|
||
this.chooseBi();
|
||
},
|
||
|
||
chooseEraser: function () {
|
||
this.setData({
|
||
eraser: true,
|
||
clear: false,
|
||
canvasHeightLen: 0
|
||
})
|
||
},
|
||
|
||
changeColor: function (e) {
|
||
utils.changeColor(e, this);
|
||
},
|
||
|
||
changeWidth: function (e) {
|
||
utils.changeWidth(e, this, (this.data.canvasHeightLen + this.data.w - e.detail.value), 2);
|
||
},
|
||
|
||
},
|
||
|
||
}) |