czg_team/video_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加other分包页面

Browse Source 
我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）
This commit is contained in:
YeMingfei666
2024-12-20 18:01:37 +08:00
parent 908205200b
commit b2fd3ba347
154 changed files with 43228 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

690
tuniao-ui/components/tn-sign-board/tn-sign-board.vue Normal file
View File

@@ -0,0 +1,690 @@
<template>
<view v-if="show" class="tn-sign-board-class tn-sign-board" :style="{top: `${customBarHeight}px`, height: `calc(100% - ${customBarHeight}px)`}">
<!-- 签名canvas -->
<view class="tn-sign-board__content">
<view class="tn-sign-board__content__wrapper">
<canvas class="tn-sign-board__content__canvas" :canvas-id="canvasName" :disableScroll="true" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"></canvas>
</view>
</view>
<!-- 底部工具栏 -->
<view class="tn-sign-board__tools">
<!-- 可选颜色 -->
<view class="tn-sign-board__tools__color">
<view
v-for="(item, index) in signSelectColor"
:key="index"
class="tn-sign-board__tools__color__item"
:class="[{'tn-sign-board__tools__color__item--active': currentSelectColor === item}]"
:style="{backgroundColor: item}"
@tap="colorSwitch(item)"
></view>
</view>
<!-- 按钮 -->
<view class="tn-sign-board__tools__button">
<view class="tn-sign-board__tools__button__item tn-bg-red" @tap="reDraw">清除</view>
<view class="tn-sign-board__tools__button__item tn-bg-blue" @tap="save">保存</view>
<view class="tn-sign-board__tools__button__item tn-bg-indigo" @tap="previewImage">预览</view>
<view class="tn-sign-board__tools__button__item tn-bg-orange" @tap="closeBoard">关闭</view>
</view>
</view>
<!-- 伪全屏生成旋转图片canvas容器，不在页面上展示 -->
<view style="position: fixed; left: -2000px;width: 0;height: 0;overflow: hidden;">
<canvas canvas-id="temp-tn-sign-canvas" :style="{width: `${canvasHeight}px`, height: `${canvasHeight}px`}"></canvas>
</view>
</view>
</template>
<script>
export default {
name: 'tn-sign-board',
props: {
// 是否显示
show: {
type: Boolean,
default: false
},
// 可选签名颜色
signSelectColor: {
type: Array,
default() {
return ['#080808', '#E83A30']
}
},
// 是否旋转输出图片
rotate: {
type: Boolean,
default: true
},
// 自定义顶栏的高度
customBarHeight: {
type: [String, Number],
default: 0
}
},
data() {
return {
canvasName: 'tn-sign-canvas',
ctx: null,
canvasWidth: 0,
canvasHeight: 0,
currentSelectColor: this.signSelectColor[0],
// 第一次触摸
firstTouch: false,
// 透明度
transparent: 1,
// 笔迹倍数
lineSize: 1.5,
// 最小画笔半径
minLine: 0.5,
// 最大画笔半径
maxLine: 4,
// 画笔压力
pressure: 1,
// 顺滑度，用60的距离来计算速度
smoothness: 60,
// 当前触摸的点
currentPoint: {},
// 当前线条
currentLine: [],
// 画笔圆半径
radius: 1,
// 裁剪区域
cutArea: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
// 所有线条， 生成贝塞尔点
// bethelPoint: [],
// 上一个点
lastPoint: 0,
// 笔迹
chirography: [],
// 当前笔迹
// currentChirography: {},
// 画线轨迹，生成线条的实际点
linePrack: []
}
},
watch: {
show(value) {
if (value && this.canvasWidth === 0 && this.canvasHeight === 0) {
this.$nextTick(() => {
this.getCanvasInfo()
})
}
},
signSelectColor(value) {
if (value.length > 0) {
this.currentSelectColor = value[0]
}
}
},
created() {
// 创建canvas
this.ctx = uni.createCanvasContext(this.canvasName, this)
},
mounted() {
// 获取画板的相关信息
// this.$nextTick(() => {
// this.getCanvasInfo()
// })
},
methods: {
// 获取画板的相关信息
getCanvasInfo() {
this._tGetRect('.tn-sign-board__content__canvas').then(res => {
this.canvasWidth = res.width
this.canvasHeight = res.height
// 初始化Canvas
this.$nextTick(() => {
this.initCanvas('#FFFFFF')
})
})
},
// 初始化Canvas
initCanvas(color) {
/* 将canvas背景设置为 白底，不设置 导出的canvas的背景为透明 */
// rect() 参数说明 矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
// 矩形的宽高需要减去边框的宽度
this.ctx.rect(0, 0, this.canvasWidth - uni.upx2px(4), this.canvasHeight - uni.upx2px(4))
this.ctx.setFillStyle(color)
this.ctx.fill()
this.ctx.draw()
},
// 开始画
onTouchStart(e) {
if (e.type != 'touchstart') return false
// 设置线条颜色
this.ctx.setFillStyle(this.currentSelectColor)
// 设置透明度
this.ctx.setGlobalAlpha(this.transparent)
let currentPoint = {
x: e.touches[0].x,
y: e.touches[0].y
}
let currentLine = this.currentLine
currentLine.unshift({
time: new Date().getTime(),
dis: 0,
x: currentPoint.x,
y: currentPoint.y
})
this.currentPoint = currentPoint
if (this.firstTouch) {
this.cutArea = {
top: currentPoint.y,
right: currentPoint.x,
bottom: currentPoint.y,
left: currentPoint.x
}
this.firstTouch = false
}
this.pointToLine(currentLine)
},
// 正在画
onTouchMove(e) {
if (e.type != 'touchmove') return false
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault()
}
}
let point = {
x: e.touches[0].x,
y: e.touches[0].y
}
if (point.y < this.cutArea.top) {
this.cutArea.top = point.y
}
if (point.y < 0) this.cutArea.top = 0
if (point.x < this.cutArea.right) {
this.cutArea.right = point.x
}
if (this.canvasWidth - point.x <= 0) {
this.cutArea.right = this.canvasWidth
}
if (point.y > this.cutArea.bottom) {
this.cutArea.bottom = this.canvasHeight
}
if (this.canvasHeight - point.y <= 0) {
this.cutArea.bottom = this.canvasHeight
}
if (point.x < this.cutArea.left) {
this.cutArea.left = point.x
}
if (point.x < 0) this.cutArea.left = 0
this.lastPoint = this.currentPoint
this.currentPoint = point
let currentLine = this.currentLine
currentLine.unshift({
time: new Date().getTime(),
dis: this.distance(this.currentPoint, this.lastPoint),
x: point.x,
y: point.y
})
this.pointToLine(currentLine)
},
// 移动结束
onTouchEnd(e) {
if (e.type != 'touchend') return false
let point = {
x: e.changedTouches[0].x,
y: e.changedTouches[0].y
}
this.lastPoint = this.currentPoint
this.currentPoint = point
let currentLine = this.currentLine
currentLine.unshift({
time: new Date().getTime(),
dis: this.distance(this.currentPoint, this.lastPoint),
x: point.x,
y: point.y
})
//一笔结束，保存笔迹的坐标点，清空，当前笔迹
//增加判断是否在手写区域
this.pointToLine(currentLine)
let currentChirography = {
lineSize: this.lineSize,
lineColor: this.currentSelectColor
}
let chirography = this.chirography
chirography.unshift(currentChirography)
this.chirography = chirography
let linePrack = this.linePrack
linePrack.unshift(this.currentLine)
this.linePrack = linePrack
this.currentLine = []
},
// 重置绘画板
reDraw() {
this.initCanvas('#FFFFFF')
},
// 保存
save() {
// 在组件内使用需要第二个参数this
uni.canvasToTempFilePath({
canvasId: this.canvasName,
fileType: 'png',
quality: 1,
success: (res) => {
if (this.rotate) {
this.getRotateImage(res.tempFilePath).then((res) => {
this.$emit('save', res)
}).catch(err => {
this.$t.message.toast('旋转图片失败')
})
} else {
this.$emit('save', res.tempFilePath)
}
},
fail: () => {
this.$t.message.toast('保存失败')
}
}, this)
},
// 预览图片
previewImage() {
// 在组件内使用需要第二个参数this
uni.canvasToTempFilePath({
canvasId: this.canvasName,
fileType: 'png',
quality: 1,
success: (res) => {
if (this.rotate) {
this.getRotateImage(res.tempFilePath).then((res) => {
uni.previewImage({
urls: [res]
})
}).catch(err => {
this.$t.message.toast('旋转图片失败')
})
} else {
uni.previewImage({
urls: [res.tempFilePath]
})
}
},
fail: (e) => {
this.$t.message.toast('预览失败')
}
}, this)
},
// 关闭签名板
closeBoard() {
this.$t.message.modal('提示信息','关闭后内容将被清除，是否确认关闭',() => {
this.$emit('closed')
}, true)
},
// 切换画笔颜色
colorSwitch(color) {
this.currentSelectColor = color
},
// 绘制两点之间的线条
pointToLine(line) {
this.calcBethelLine(line)
},
// 计算插值，让线条更加圆滑
calcBethelLine(line) {
if (line.length <= 1) {
line[0].r = this.radius
return
}
let x0,
x1,
x2,
y0,
y1,
y2,
r0,
r1,
r2,
len,
lastRadius,
dis = 0,
time = 0,
curveValue = 0.5;
if (line.length <= 2) {
x0 = line[1].x
y0 = line[1].y
x2 = line[1].x + (line[0].x - line[1].x) * curveValue
y2 = line[1].y + (line[0].y - line[1].y) * curveValue
x1 = x0 + (x2 - x0) * curveValue
y1 = y0 + (y2 - y0) * curveValue
} else {
x0 = line[2].x + (line[1].x - line[2].x) * curveValue
y0 = line[2].y + (line[1].y - line[2].y) * curveValue
x1 = line[1].x
y1 = line[1].y
x2 = x1 + (line[0].x - x1) * curveValue
y2 = y1 + (line[0].y - y1) * curveValue
}
// 三个点分别是(x0,y0),(x1,y1),(x2,y2) ；(x1,y1)这个是控制点，控制点不会落在曲线上；实际上，这个点还会手写获取的实际点，却落在曲线上
len = this.distance({
x: x2,
y: y2
}, {
x: x0,
y: y0
})
lastRadius = this.radius
for (let i = 0; i < line.length - 1; i++) {
dis += line[i].dis
time += line[i].time - line[i + 1].time
if (dis > this.smoothness) break
}
this.radius = Math.min((time / len) * this.pressure + this.minLine, this.maxLine) * this.lineSize
line[0].r = this.radius
// 计算笔迹半径
if (line.length <= 2) {
r0 = (lastRadius + this.radius) / 2
r1 = r0
r2 = r1
} else {
r0 = (line[2].r + line[1].r) / 2
r1 = line[1].r
r2 = (line[1].r + line[0].r) / 2
}
let n = 5
let point = []
for (let i = 0; i < n; i++) {
let t = i / (n - 1)
let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2
let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2
let r = lastRadius + ((this.radius - lastRadius) / n) * i
point.push({
x,
y,
r
})
if (point.length === 3) {
let a = this.ctaCalc(point[0].x, point[0].y, point[0].r, point[1].x, point[1].y, point[1].r, point[2].x, point[2].y, point[2].r)
a[0].color = this.currentSelectColor
this.drawBethel(a, true)
point = [{
x,
y,
r
}]
}
}
this.currentLine = line
},
// 求两点之间的距离
distance(a, b) {
let x = b.x - a.x
let y = b.y - a.y
return Math.sqrt(x * x + y * y)
},
// 计算点信息
ctaCalc(x0, y0, r0, x1, y1, r1, x2, y2, r2) {
let a = [],
vx01,
vy01,
norm,
n_x0,
n_y0,
vx21,
vy21,
n_x2,
n_y2;
vx01 = x1 - x0
vy01 = y1 - y0
norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2
vx01 = (vx01 / norm) * r0
vy01 = (vy01 / norm) * r0
n_x0 = vy01
n_y0 = -vx01
vx21 = x1 - x2
vy21 = y1 - y2
norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2
vx21 = (vx21 / norm) * r2
vy21 = (vy21 / norm) * r2
n_x2 = -vy21
n_y2 = vx21
a.push({
mx: x0 + n_x0,
my: y0 + n_y0,
color: '#080808'
})
a.push({
c1x: x1 + n_x0,
c1y: y1 + n_y0,
c2x: x1 + n_x2,
c2y: y1 + n_y2,
ex: x2 + n_x2,
ey: y2 + n_y2
})
a.push({
c1x: x2 + n_x2 - vx21,
c1y: y2 + n_y2 - vy21,
c2x: x2 - n_x2 - vx21,
c2y: y2 - n_y2 - vy21,
ex: x2 - n_x2,
ey: y2 - n_y2
})
a.push({
c1x: x1 - n_x2,
c1y: y1 - n_y2,
c2x: x1 - n_x0,
c2y: y1 - n_y0,
ex: x0 - n_x0,
ey: y0 - n_y0
})
a.push({
c1x: x0 - n_x0 - vx01,
c1y: y0 - n_y0 - vy01,
c2x: x0 + n_x0 - vx01,
c2y: y0 + n_y0 - vy01,
ex: x0 + n_x0,
ey: y0 + n_y0
})
a[0].mx = a[0].mx.toFixed(1)
a[0].mx = parseFloat(a[0].mx)
a[0].my = a[0].my.toFixed(1)
a[0].my = parseFloat(a[0].my)
for (let i = 1; i < a.length; i++) {
a[i].c1x = a[i].c1x.toFixed(1)
a[i].c1x = parseFloat(a[i].c1x)
a[i].c1y = a[i].c1y.toFixed(1)
a[i].c1y = parseFloat(a[i].c1y)
a[i].c2x = a[i].c2x.toFixed(1)
a[i].c2x = parseFloat(a[i].c2x)
a[i].c2y = a[i].c2y.toFixed(1)
a[i].c2y = parseFloat(a[i].c2y)
a[i].ex = a[i].ex.toFixed(1)
a[i].ex = parseFloat(a[i].ex)
a[i].ey = a[i].ey.toFixed(1)
a[i].ey = parseFloat(a[i].ey)
}
return a
},
// 绘制贝塞尔曲线
drawBethel(point, is_fill, color) {
this.ctx.beginPath()
this.ctx.moveTo(point[0].mx, point[0].my)
if (color != undefined) {
this.ctx.setFillStyle(color)
this.ctx.setStrokeStyle(color)
} else {
this.ctx.setFillStyle(point[0].color)
this.ctx.setStrokeStyle(point[0].color)
}
for (let i = 1; i < point.length; i++) {
this.ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey)
}
this.ctx.stroke()
if (is_fill != undefined) {
//填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 )
this.ctx.fill()
}
this.ctx.draw(true)
},
// 旋转图片
async getRotateImage(dataUrl) {
// const url = await this.base64ToPath(dataUrl)
const url = dataUrl
// 创建新画布
const tempCtx = uni.createCanvasContext('temp-tn-sign-canvas', this)
const width = this.canvasWidth
const height = this.canvasHeight
tempCtx.restore()
tempCtx.save()
tempCtx.translate(0, height)
tempCtx.rotate(270 * Math.PI / 180)
tempCtx.drawImage(url, 0, 0, width, height)
tempCtx.draw()
return new Promise((resolve, reject) => {
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'temp-tn-sign-canvas',
fileType: 'png',
x: 0,
y: height - width,
width: height,
height: width,
success: res => resolve(res.tempFilePath),
fail: reject
}, this)
}, 50)
})
},
// 将base64转换为本地
base64ToPath(dataUrl) {
return new Promise((resolve, reject) => {
// 判断地址是否包含bas64字样，不包含直接返回
if (dataUrl.indexOf('base64') !== -1) {
const data = uni.base64ToArrayBuffer(dataUrl.replace(/^data:image\/\w+;base64,/, ''))
// #ifdef MP-WEIXIN
const filePath = `${wx.env.USER_DATA_PATH}/${new Date().getTime()}-${Math.random().toString(32).slice(2)}.png`
// #endif
// #ifndef MP-WEIXIN
const filePath = `${new Date().getTime()}-${Math.random().toString(32).slice(2)}.png`
// #endif
uni.getFileSystemManager().writeFile({
filePath,
data,
encoding: 'base64',
success: () => resolve(filePath),
fail: reject
})
} else {
resolve(dataUrl)
}
})
}
}
}
</script>
<style lang="scss" scoped>
.tn-sign-board {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #E6E6E6;
z-index: 997;
display: flex;
flex-direction: row-reverse;
&__content {
width: 84%;
height: 100%;
&__wrapper {
width: calc(100% - 60rpx);
height: calc(100% - 60rpx);
margin: 30rpx;
border-radius: 20rpx;
border: 2rpx dotted #AAAAAA;
overflow: hidden;
}
&__canvas {
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
}
&__tools {
width: 16%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
&__color {
margin-top: 30rpx;
&__item {
width: 70rpx;
height: 70rpx;
border-radius: 100rpx;
margin: 20rpx auto;
&--active {
position: relative;
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40%;
height: 40%;
border-radius: 100rpx;
background-color: #FFFFFF;
transform: translate(-50%, -50%);
}
}
}
}
&__button {
margin-bottom: 30rpx;
display: flex;
flex-direction: column;
&__item {
width: 130rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
margin: 60rpx auto;
border-radius: 10rpx;
color: #FFFFFF;
transform-origin: center center;
transform: rotateZ(90deg);
}
}
}
}
</style>