- 当前 Bug 的表现（可附上截图）
- 预期表现
一根实线一根虚线
- 提供一个最简复现 Demo
// 手指开始移动/选中点（线）
start: function (e) {
console.log(e)
var that = this
let touchPoint = e.changedTouches[0]
let length = this.data.pointList.length
for (let i = 0; i < length; i++) {
let point = this.data.pointList[i]
if (Math.abs(touchPoint.x - point.x) < width) {
that.setData({
current: point
})
point.isSelected = true
break
}
}
if (that.data.current && that.data.current == last) {
startMove = true
startPoint = touchPoint
} else {
if (last) {
last.isSelected = false
}
last = that.data.current
this.draw()
}
},
// 手指移动
move: function (e) {
if (startMove) {
let touchPoint = e.changedTouches[0]
this.data.current.x = parseFloat(this.data.current.x) + parseFloat(touchPoint.x) - parseFloat(startPoint.x) // 移动线只改变x值
this.data.current.y = this.data.current.y // 0
if (this.data.pointList[0].isSelected == true) {
this.data.pointList[1].x = this.data.pointList[0].x
} else if (this.data.pointList[1].isSelected == true) {
this.data.pointList[0].x = this.data.pointList[1].x
}
startPoint = touchPoint
var current = this.data.current;
this.draw()
// console.log(this.data.current)
this.setData({
current: current
})
}
},
//手指结束移动
end: function (e) {
startMove = false
},
draw(callback) {
this.drawImage()
this.drawLine()
this.drawDashLine()
ctx.draw(false, callback)
},
// 画底图
drawImage: function () {
ctx.drawImage(this.data.src, 0, 0, this.data.cnavasWidth, this.data.canvasHeight)
},
// 画实线
drawLine: function () {
// ctx.strokeStyle = ‘#ffa29b’
lineList.map(pointMap => {
ctx.beginPath()
ctx.setLineWidth(5)
ctx.strokeStyle = this.data.pointList[pointMap[0]].isSelected == true || this.data.pointList[pointMap[1]].isSelected == true ? ‘blue’ : ‘#ffa29b’
ctx.moveTo(this.data.pointList[pointMap[0]].x, this.data.pointList[pointMap[0]].y)
ctx.lineTo(this.data.pointList[pointMap[1]].x, this.data.pointList[pointMap[1]].y)
ctx.stroke()
})
},
// 画虚线
drawDashLine: function() {
ctx.beginPath()
ctx.strokeStyle = ‘#ffa29b’
ctx.setLineDash([5, 5], 5)
ctx.moveTo(wx.getStorageSync(‘leftPoint’),0)
ctx.lineTo(wx.getStorageSync(‘leftPoint’), app.globalData.windowHeight - (app.globalData.height * 6 + 10 + 150) / (750 / app.globalData.windowWidth) + 100)
ctx.stroke()
},
backTake() {
wx.redirectTo({
url: ‘/pages/camera/hipcamerathree/hipcamerathree’,
})
},
// 保存canvas绘制内容
savePhoto() {
for (var i in this.data.pointList) {
this.data.pointList[i].isSelected = false
}
wx.setStorageSync(‘hiplistjsonthree’, this.data.pointList)
var that = this
this.draw(() => {
// 绘图
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: that.data.cnavasWidth,
height: that.data.canvasHeight,
destWidth: that.data.cnavasWidth,
destHeight: that.data.canvasHeight,
fileType: ‘jpg’,
canvasId: ‘mycanvas’,
success(res) {
wx.compressImage({
src: res.tempFilePath,
quality: 45,
success(res) {
wx.uploadFile({
url: ‘https://apich.xiaoxiaowu.info/user/Upload’,
filePath: res.tempFilePath,
name: ‘avatar’,
success(e) {
console.log(‘上传成功’, e.data)
var data = JSON.parse(e.data)
// wx.setStorageSync(‘hipImgThree’, data.url)
wx.setStorage({
key: ‘hipImgThree’,
data: data.url,
success(res) {
wx.reLaunch({
url: ‘/pages/testevaluation/testevaluation?index=4&&hipListThree=’ + JSON.stringify(that.data.pointList),
})
}
})
}
})
}
})
}
}, this)
})
},
强力驱动