物流工艺
This commit is contained in:
@@ -8,170 +8,139 @@
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
ctx: '',
|
||||
points: ''
|
||||
points: [{x1: 711, y1: 749, x2: 711, y2: 731}, {x1: 645, y1: 683, x2: 625, y2: 683}, {x1: 778, y1: 683, x2: 800, y2: 683}, {x1: 305, y1: 470, x2: 305, y2: 440}, {x1: 419, y1: 435, x2: 419, y2: 420}, {x1: 455, y1: 240, x2: 550, y2: 240}, {x1: 830, y1: 332, x2: 830, y2: 370}, {x1: 830, y1: 407, x2: 830, y2: 464}, {x1: 830, y1: 426, x2: 593, y2: 426}, {x1: 593, y1: 426, x2: 593, y2: 470}],
|
||||
dot1: {x1: 711, y1: 749, x2: 711, y2: 731},
|
||||
dot2: {x1: 645, y1: 683, x2: 625, y2: 683},
|
||||
dot3: {x1: 778, y1: 683, x2: 800, y2: 683},
|
||||
dot4: {x1: 305, y1: 470, x2: 305, y2: 440},
|
||||
dot5: {x1: 419, y1: 435, x2: 419, y2: 420},
|
||||
dot6: {x1: 455, y1: 240, x2: 550, y2: 240},
|
||||
line1: 1,
|
||||
line2: 1,
|
||||
line3: 1,
|
||||
dot7: {x1: 830, y1: 332, x2: 830, y2: 370},
|
||||
dot8: {x1: 830, y1: 407, x2: 830, y2: 464},
|
||||
dot9: {x1: 830, y1: 426, x2: 593, y2: 426},
|
||||
dot10: {x1: 593, y1: 426, x2: 593, y2: 470},
|
||||
line4: 1
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
var canvas = document.getElementById('myCanvas')
|
||||
this.ctx = canvas.getContext('2d')
|
||||
this.points = [
|
||||
|
||||
{x: 50, y: 50},
|
||||
|
||||
{x: 100, y: 150},
|
||||
|
||||
{x: 250, y: 200},
|
||||
|
||||
{x: 300, y: 300},
|
||||
|
||||
{x: 350, y: 250},
|
||||
|
||||
{x: 400, y: 350}
|
||||
|
||||
]
|
||||
this.trail()
|
||||
// this.animate()
|
||||
this.animate()
|
||||
},
|
||||
methods: {
|
||||
rectClick () {
|
||||
var ev = window.event
|
||||
// var ev = window.event
|
||||
// 获取相对于当前所指向对象的位置坐标
|
||||
alert('x:' + ev.offsetX + 'y:' + ev.offsetY)
|
||||
// alert('x:' + ev.offsetX + 'y:' + ev.offsetY)
|
||||
},
|
||||
trail () {
|
||||
var canvas = document.getElementById('myCanvas')
|
||||
let ctx = canvas.getContext('2d')
|
||||
drawPoint (ctx, x, y) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(455, 240)
|
||||
ctx.lineTo(550, 240)
|
||||
ctx.moveTo(830, 332)
|
||||
ctx.lineTo(830, 370)
|
||||
ctx.moveTo(830, 407)
|
||||
ctx.lineTo(830, 426)
|
||||
ctx.moveTo(830, 426)
|
||||
ctx.lineTo(830, 464)
|
||||
ctx.moveTo(830, 426)
|
||||
ctx.arcTo(600, 426, 576, 550, 50)
|
||||
ctx.moveTo(645, 683)
|
||||
ctx.lineTo(625, 683)
|
||||
ctx.moveTo(778, 683)
|
||||
ctx.lineTo(800, 683)
|
||||
ctx.moveTo(711, 731)
|
||||
ctx.lineTo(711, 749)
|
||||
ctx.moveTo(305, 470)
|
||||
ctx.lineTo(305, 440)
|
||||
ctx.moveTo(419, 435)
|
||||
ctx.lineTo(419, 420)
|
||||
ctx.arc(x, y, 4, 0, 2 * Math.PI)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.closePath()
|
||||
},
|
||||
drawLine (ctx, x1, y1, x2, y2) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x1, y1)
|
||||
ctx.lineTo(x2, y2)
|
||||
ctx.strokeStyle = '#00c8da'
|
||||
ctx.lineWidth = 1
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(500, 240, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(830, 352, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(830, 445, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(700, 426, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(635, 683, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(790, 683, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(711, 740, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(305, 461, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(419, 429, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
},
|
||||
drawPoint (x, y) {
|
||||
this.ctx.beginPath()
|
||||
|
||||
this.ctx.arc(x, y, 5, 0, 2 * Math.PI)
|
||||
|
||||
this.ctx.fill()
|
||||
|
||||
this.ctx.closePath()
|
||||
},
|
||||
drawLine (x1, y1, x2, y2) {
|
||||
this.ctx.beginPath()
|
||||
|
||||
this.ctx.moveTo(x1, y1)
|
||||
|
||||
this.ctx.lineTo(x2, y2)
|
||||
|
||||
this.ctx.stroke()
|
||||
|
||||
this.ctx.closePath()
|
||||
},
|
||||
animate () {
|
||||
var canvas = document.getElementById('myCanvas')
|
||||
this.ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
let canvas = document.getElementById('myCanvas')
|
||||
let ctx = canvas.getContext('2d')
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
if (this.line1 === 1) {
|
||||
this.dot1.y1 -= 1
|
||||
this.drawPoint(ctx, this.dot1.x1, this.dot1.y1)
|
||||
if (this.dot1.y1 === this.dot1.y2) {
|
||||
this.dot1.y1 = 749
|
||||
this.line1 = 2
|
||||
}
|
||||
}
|
||||
if (this.line1 === 2) {
|
||||
this.dot2.x1 -= 1
|
||||
this.drawPoint(ctx, this.dot2.x1, this.dot2.y1)
|
||||
// this.line1 = 3
|
||||
if (this.dot2.x1 === this.dot2.x2) {
|
||||
this.dot2.x1 = 645
|
||||
this.line1 = 3
|
||||
}
|
||||
}
|
||||
if (this.line1 === 3) {
|
||||
this.dot3.x1 += 1
|
||||
this.drawPoint(ctx, this.dot3.x1, this.dot3.y1)
|
||||
// this.line1 = 2
|
||||
if (this.dot3.x1 === this.dot3.x2) {
|
||||
this.dot3.x1 = 778
|
||||
this.line1 = 1
|
||||
}
|
||||
}
|
||||
if (this.line2 === 1) {
|
||||
this.dot4.y1 -= 1
|
||||
this.drawPoint(ctx, this.dot4.x1, this.dot4.y1)
|
||||
if (this.dot4.y1 === this.dot4.y2) {
|
||||
this.dot4.y1 = 470
|
||||
this.line2 = 2
|
||||
}
|
||||
}
|
||||
if (this.line2 === 2) {
|
||||
this.dot5.y1 -= 1
|
||||
this.drawPoint(ctx, this.dot5.x1, this.dot5.y1)
|
||||
if (this.dot5.y1 === this.dot5.y2) {
|
||||
this.dot5.y1 = 435
|
||||
this.line2 = 1
|
||||
}
|
||||
}
|
||||
if (this.line3 === 1) {
|
||||
this.dot6.x1 += 1
|
||||
this.drawPoint(ctx, this.dot6.x1, this.dot6.y1)
|
||||
if (this.dot6.x1 === this.dot6.x2) {
|
||||
this.dot6.x1 = 455
|
||||
this.line3 = 1
|
||||
}
|
||||
}
|
||||
if (this.line4 === 1) {
|
||||
this.dot7.y1 += 1
|
||||
this.drawPoint(ctx, this.dot7.x1, this.dot7.y1)
|
||||
if (this.dot7.y1 === this.dot7.y2) {
|
||||
this.dot7.y1 = 332
|
||||
this.line4 = 2
|
||||
}
|
||||
}
|
||||
if (this.line4 === 2) {
|
||||
this.dot8.y1 += 1
|
||||
this.drawPoint(ctx, this.dot8.x1, this.dot8.y1)
|
||||
if (this.dot8.y1 === this.dot8.y2) {
|
||||
this.dot8.y1 = 407
|
||||
this.line4 = 3
|
||||
}
|
||||
}
|
||||
if (this.line4 === 3) {
|
||||
this.dot9.x1 -= 1
|
||||
this.drawPoint(ctx, this.dot9.x1, this.dot9.y1)
|
||||
if (this.dot9.x1 === this.dot9.x2) {
|
||||
this.dot9.x1 = 830
|
||||
this.line4 = 4
|
||||
}
|
||||
}
|
||||
if (this.line4 === 4) {
|
||||
this.dot10.y1 += 1
|
||||
this.drawPoint(ctx, this.dot10.x1, this.dot10.y1)
|
||||
if (this.dot10.y1 === this.dot10.y2) {
|
||||
this.dot10.y1 = 426
|
||||
this.line4 = 1
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < this.points.length; i++) {
|
||||
this.drawPoint(this.points[i].x, this.points[i].y)
|
||||
this.drawLine(ctx, this.points[i].x1, this.points[i].y1, this.points[i].x2, this.points[i].y2)
|
||||
}
|
||||
|
||||
for (let i = 0; i < this.points.length - 1; i++) {
|
||||
this.drawLine(this.points[i].x, this.points[i].y, this.points[i + 1].x, this.points[i + 1].y)
|
||||
}
|
||||
|
||||
// requestAnimationFrame(this.animate)
|
||||
requestAnimationFrame(this.animate)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -924,7 +924,7 @@ export default {
|
||||
left: auto
|
||||
right 0
|
||||
top: 74%
|
||||
box-shadow 5px 5px 8px rgba(0,135,172,0.6)
|
||||
box-shadow -5px 5px 8px rgba(0,135,172,0.6)
|
||||
_wh(15.5%, 15%)
|
||||
border-top-left-radius 0
|
||||
.rotate_1
|
||||
|
||||
Reference in New Issue
Block a user