gdxz/miniprogram-jianfanCase
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

6.19

Browse Source
This commit is contained in:
zoujiandong
2025-06-19 19:06:50 +08:00
parent 5aaa605a13
commit 5a887c8dea
18 changed files with 985 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/navBar/navBar.js
+1 -1
View File
@@ -4,7 +4,7 @@ Component({
/**
* 组件的属性列表
*/
externalClasses:['myclass'],
externalClasses:['myclass','colorCalss'],
properties: {
navName: {
type: String,
components/navBar/navBar.wxml
+5 -3
View File
@@ -1,5 +1,7 @@
<!--components/navBar.wxml-->
<view class="ui-navigatorbar myclass" >
<van-icon name="arrow-left" bindtap="goBack" class="ui-navigatorbar-back" />
<view class="ui-title">{{name}}</view>
<view class="ui-navigatorbar myclass colorCalss" >
<van-icon name="arrow-left" bindtap="goBack"
class="colorCalss"
class="ui-navigatorbar-back" />
<view class="ui-title colorCalss">{{name}}</view>
</view>
components/navBar/navBar.wxss
+1 -1
View File
@@ -1,7 +1,7 @@
/* components/navBar.wxss */
.ui-navigatorbar {
position: fixed;
z-index:99;
top: 0;
width: 750rpx;
height: 172rpx;
components/paintCanvas/paintCanvas.js
+225
View File
@@ -0,0 +1,225 @@
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);
},
},
})
components/paintCanvas/paintCanvas.json
+7
View File
@@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"van-icon": "@vant/weapp/icon/index",
"van-overlay": "@vant/weapp/overlay/index"
}
}
components/paintCanvas/paintCanvas.wxml
+73
View File
@@ -0,0 +1,73 @@
<!--painting-2.wxml-->
<van-overlay show="{{showPaint}}" z-index="99999999" >
<view class="upage" style="position:reltive;background-color: #000;height:100vh;" catch:tap="hideBarsHandler" >
<!-- <view class="ui-navigatorbar myclass colorCalss" >
<van-icon name="arrow-left" bindtap="hideTuya"
color="#fff"
class="ui-navigatorbar-back colorCalss" />
<view class="ui-title colorCalss">涂鸦</view>
</view> -->
<canvas canvas-id="myCanvas" disable-scroll="true" bindtouchstart="touchStart"
bindtouchmove="touchMove" bindtouchend="touchEnd" wx:if="{{hasChoosedImg}}"
style="margin:0 auto;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 style="padding: 30rpx 32rpx 50rpx;position: fixed;bottom:0;width:100%;box-sizing: border-box;" >
<view class="space" style="padding-bottom: 20rpx; color: #FFF; font-size: 30rpx; line-height: 56rpx;display: flex;width:100%">
<view catch:tap="hideTuya">返回</view>
<view style="width: 30rpx;"></view>
<view catch:tap="tapBtn" data-type="save">确定</view>
<view style="flex: 1;"></view>
<view catch:tap="chooseBi" >铅笔</view>
<view style="width: 30rpx;"></view>
<view catch:tap="showBarsHandler" data-type="width">笔触</view>
<view style="width: 30rpx;"></view>
<view catch:tap="chooseEraser" >橡皮擦</view>
<view style="width: 30rpx;"></view>
<view catch:tap="clearCanvas" data-type="clear">清除</view>
</view>
<scroll-view scroll-x style="height: 90rpx;">
<view style="white-space: nowrap;">
<block wx:for="{{colors}}" wx:key="index">
<view style="background-color: {{item}};" class="colorBtn {{selectColor == item && 'select'}}" catch:tap="colorChange" data-color="{{item}}" data-type="color"></view>
</block>
</view>
</scroll-view>
</view>
<view class="bars {{showBars && 'show'}}" wx:if="{{showBars}}">
<view class="space vertical_center">
<view style="width: 136rpx;">字号：</view>
<slider style="flex: 1;" value="{{selectSize}}" step="1" min="1" max="20" block-size="12" activeColor="#a88cf8" bindchanging="sizeHandler" />
<view style="width: 50rpx; text-align: right;">{{selectSize}}</view>
</view>
</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> -->
</view>
</van-overlay>
components/paintCanvas/paintCanvas.wxss
+150
View File
@@ -0,0 +1,150 @@
/* case/pages/paintCanvas/paintCanvas.wxss *//* painting-2.wxss */
page {
background: rgba(153, 204, 255, 0.1);
}
.myclass{
background-color: #000!important;
}
.colorCalss{
color:#fff!important;
}
.ui-navigatorbar {
position: fixed;
top:0;
z-index:99999;
width: 750rpx;
height: 172rpx;
background: #FFFFFF;
backdrop-filter: blur(20px);
border-bottom: none;
}
.ui-navigatorbar-back {
position: absolute;
padding-left:40rpx;
padding-right:40rpx;
left: 0rpx;
font-size: 40rpx;
bottom: 20rpx;
}
.ui-title {
position: absolute;
width: 350rpx;
height: 88rpx;
line-height: 56rpx;
font-size: 36rpx;
white-space: nowrap;
color: #000000;
bottom: 0;
left: 200rpx;
display: flex;
justify-content: center;
align-items: center;
}
.upage {
position: relative;
z-index:999;
display: flex;
flex-direction: column;
}
.failText {
margin-top: 200rpx;
text-align: center;
color: #888;
}
.colorBtn {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
margin-right: 20rpx;
display: inline-block;
border: 6rpx solid #242424;
}
.colorBtn.select {
border: 6rpx solid #FFF;
}
.bars {
right: 1rem;
width: 400rpx;
padding: 20rpx;
bottom: 7.5rem;
color: #a88cf8;
font-size: 32rpx;
font-weight: bold;
position: absolute;
border-radius: 8rpx;
background-color: #242424;
box-shadow: 0 0 1.5rem 0 #FFFFFF20;
}
slider {
margin: 20rpx 20rpx 20rpx 0 !important;
}
.flex_column {
display: flex;
flex-direction: column !important;
}
.vertical_center {
display: flex;
align-items: center;
}
.space {
display: flex;
justify-content: space-between;
text-shadow: 2px 2px 1px #000000;
}
.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;
}