111
This commit is contained in:
zoujiandong
@@ -0,0 +1,222 @@
|
||||
import utils from "../../utils/utils";
|
||||
// painting-2.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
hasChoosedImg: false,
|
||||
canvasWidth: 0,
|
||||
canvasHeight: 0, // canvas的完整高度
|
||||
canvasHeightLen: 0, // canvas的临时高度（用在操作栏影响画布高度时）
|
||||
windowHeight: 0, // 屏幕高度
|
||||
prevPosition: [0, 0], // 手指触摸的所在位置
|
||||
background: '', // 背景图片，即导入的图片
|
||||
|
||||
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,
|
||||
w: 10,
|
||||
clear: false, // 是否开启清空栏
|
||||
eraser: false, // 是否开启橡皮擦
|
||||
saving: false, // 是否在保存状态
|
||||
scope: false, // 是否有保存图片的权限
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
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();
|
||||
// 检查权限，保存时提示弹窗用
|
||||
wx.getSetting({
|
||||
success(res) {
|
||||
if (res.authSetting['scope.writePhotosAlbum']) {
|
||||
that.setData({
|
||||
scope: true,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
tapBtn: function (e) {
|
||||
utils.tapBtn(e, this, 2);
|
||||
},
|
||||
|
||||
addImg: function (e) {
|
||||
this.chooseImg();
|
||||
},
|
||||
|
||||
chooseImg() {
|
||||
let that = this;
|
||||
wx.chooseImage({
|
||||
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');
|
||||
|
||||
if (this.data.eraser) {
|
||||
ctx.clearRect(e.touches[0].x, e.touches[0].y, 30, 30);
|
||||
ctx.draw(true);
|
||||
} else {
|
||||
ctx.setStrokeStyle("rgb(" + this.data.r + ', ' + this.data.g + ', ' + this.data.b + ')');
|
||||
ctx.setLineWidth(this.data.w);
|
||||
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]
|
||||
})
|
||||
},
|
||||
|
||||
clearCanvas: function () {
|
||||
let ctx = wx.createCanvasContext('myCanvas');
|
||||
ctx.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeight);
|
||||
ctx.draw();
|
||||
this.setData({
|
||||
clear: false,
|
||||
canvasHeightLen: 0
|
||||
})
|
||||
},
|
||||
|
||||
chooseEraser: function () {
|
||||
this.setData({
|
||||
eraser: !this.data.eraser,
|
||||
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);
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {
|
||||
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "涂鸦",
|
||||
"navigationBarBackgroundColor": "#9cf",
|
||||
"navigationBarTextStyle": "white",
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<!--painting-2.wxml-->
|
||||
<canvas canvas-id="myCanvas" disable-scroll="true" bindtouchstart="touchStart"
|
||||
bindtouchmove="touchMove" bindtouchend="touchEnd" wx:if="{{hasChoosedImg}}"
|
||||
style="height: {{(canvasHeightLen == 0) ? canvasHeight : canvasHeightLen}}px; width: {{canvasWidth}}px; background: url('{{background}}');background-position: 0 0; background-size: {{canvasWidth}}px {{canvasHeight}}px"
|
||||
/>
|
||||
<view class="failText" wx:if="{{!hasChoosedImg}}" bindtap="addImg">没有选择照片，点击重新选择</view>
|
||||
<view class="bottom">
|
||||
<block wx:for="{{btnInfo}}" wx:key="{{index}}">
|
||||
<view class="list-item" data-type="{{item.type}}" style="background: {{item.background}}" bindtap="tapBtn"></view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="choose-box" wx:if="{{width}}">
|
||||
<view class="color-box" style="background: {{'rgb(' + r + ', ' + g + ', ' + b + ')'}}; height: {{w}}px; border-radius: {{w/2}}px"></view>
|
||||
<slider min="1" max="50" step="1" show-value="true" value="{{w}}" bindchange="changeWidth"/>
|
||||
</view>
|
||||
<view class="choose-box" wx:if="{{color}}">
|
||||
<view class="color-box" style="background: {{'rgb(' + r + ', ' + g + ', ' + b + ')'}}; height: {{w}}px; border-radius: {{w/2}}px"></view>
|
||||
<slider min="0" max="255" step="1" show-value="true" activeColor="red" value="{{r}}" data-color="r" bindchange="changeColor"/>
|
||||
<slider min="0" max="255" step="1" show-value="true" activeColor="green" value="{{g}}" data-color="g" bindchange="changeColor"/>
|
||||
<slider min="0" max="255" step="1" show-value="true" activeColor="blue" value="{{b}}" data-color="b" bindchange="changeColor"/>
|
||||
</view>
|
||||
<view class="choose-box-flex" wx:if="{{clear}}">
|
||||
<view class="choose-item" bindtap="chooseEraser">
|
||||
<view class="choose-img" style='background: url("http://ov8a2tdri.bkt.clouddn.com/wx-app/icon-5.png") white no-repeat; background-size: 26px 26px;background-position: 2px 2px; border: {{eraser ? "2px solid #888" : "2px solid transparent"}}'></view>
|
||||
<view>橡皮擦</view>
|
||||
</view>
|
||||
<view class="choose-item" bindtap="clearCanvas">
|
||||
<view class="choose-img" style='background: url("http://ov8a2tdri.bkt.clouddn.com/wx-app/icon-4.png") white no-repeat; background-size: 26px 26px;background-position: 2px 2px;'></view>
|
||||
<view>清空</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,59 @@
|
||||
/* case/pages/paintCanvas/paintCanvas.wxss *//* painting-2.wxss */
|
||||
page {
|
||||
background: rgba(153, 204, 255, 0.1);
|
||||
}
|
||||
|
||||
.failText {
|
||||
margin-top: 200rpx;
|
||||
text-align: center;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 750rpx;
|
||||
height: 100rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin: 20rpx 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.choose-box {
|
||||
width: 750rpx;
|
||||
position: absolute;
|
||||
bottom: 100rpx;
|
||||
}
|
||||
|
||||
.color-box {
|
||||
width: 375rpx;
|
||||
margin: 40rpx auto;
|
||||
}
|
||||
|
||||
slider {
|
||||
margin: 40rpx 60rpx;
|
||||
}
|
||||
|
||||
.choose-box-flex {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 750rpx;
|
||||
position: absolute;
|
||||
bottom: 100rpx;
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
.choose-img {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin: 20rpx;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
}
|
||||
Reference in New Issue
Block a user