From 0b1a9cdd6a007d2158b195429c5bc65a6f57c956 Mon Sep 17 00:00:00 2001 From: wangkeqiang Date: Mon, 25 Jun 2018 14:27:59 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E6=8F=90=E4=BA=A4pr=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/CanvasNest.js | 29 +++++++++++++++++++++-------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/src/CanvasNest.js b/src/CanvasNest.js index b501630..06f1fc5 100644 --- a/src/CanvasNest.js +++ b/src/CanvasNest.js @@ -61,6 +61,8 @@ export default class CanvasNest { y: Math.random() * this.canvas.height, xa: 2 * Math.random() - 1, // 随机运动返现 ya: 2 * Math.random() - 1, + xd: 0, + yd: 0, max: 6000 //沾附距离 })); }; @@ -93,14 +95,9 @@ export default class CanvasNest { context.clearRect(0, 0, width, height); // 随机的线条和当前位置联合数组 - let e, i, d, x_dist, y_dist, dist; // 临时节点 + let e, i, d, x_dist, y_dist, dist, prex, prey; // 临时节点 // 遍历处理每一个点 points.forEach((r, idx) => { - r.x += r.xa; - r.y += r.ya; // 移动 - r.xa *= r.x > width || r.x < 0 ? -1 : 1; - r.ya *= r.y > height || r.y < 0 ? -1 : 1; // 碰到边界，反向反弹 - context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); // 绘制一个宽高为1的点 // 从下一个点开始 for (i = idx + 1; i < all.length; i ++) { e = all[i]; @@ -108,9 +105,20 @@ export default class CanvasNest { if (null !== e.x && null !== e.y) { x_dist = r.x - e.x; // x轴距离 l y_dist = r.y - e.y; // y轴距离 n + prex = r.x + r.xa - e.x, // 预算下一个x,y的位置，以判断是加速还是减速 + prey = r.y + r.ya - e.y; dist = x_dist * x_dist + y_dist * y_dist; // 总距离, m - - dist < e.max && (e === current && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), // 靠近的时候加速 + if (e === current) { + if (dist < e.max) { // 加速度大小 + r.xd = (Math.abs(prex) > Math.abs(x_dist) ? -1 : 1) * dist / e.max * 2 * r.xa; + r.yd = (Math.abs(prey) > Math.abs(y_dist) ? -1 : 1) * dist / e.max * 2 * r.ya; + console.log(r.xd, r.yd); + } else { + r.xd = 0; + r.yd = 0; + } + } + dist < e.max && ( d = (e.max - dist) / e.max, context.beginPath(), context.lineWidth = d / 2, @@ -119,6 +127,11 @@ export default class CanvasNest { context.lineTo(e.x, e.y), context.stroke()); } + r.x += r.xa + r.xd; + r.y += r.ya + r.yd; // 移动 + r.xa *= r.x > width || r.x < 0 ? -1 : 1; + r.ya *= r.y > height || r.y < 0 ? -1 : 1; // 碰到边界，反向反弹 + context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); // 绘制一个宽高为1的点 } }); this.requestFrame(this.drawCanvas); From b90a850f4391faac61a50cfe1b7643180d598d57 Mon Sep 17 00:00:00 2001 From: wangkeqiang Date: Mon, 25 Jun 2018 14:33:57 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E5=8E=BB=E6=8E=89=E6=97=A0=E7=94=A8?= =?UTF-8?q?=E6=89=93=E5=8D=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/CanvasNest.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/CanvasNest.js b/src/CanvasNest.js index 06f1fc5..2de0e44 100644 --- a/src/CanvasNest.js +++ b/src/CanvasNest.js @@ -112,7 +112,6 @@ export default class CanvasNest { if (dist < e.max) { // 加速度大小 r.xd = (Math.abs(prex) > Math.abs(x_dist) ? -1 : 1) * dist / e.max * 2 * r.xa; r.yd = (Math.abs(prey) > Math.abs(y_dist) ? -1 : 1) * dist / e.max * 2 * r.ya; - console.log(r.xd, r.yd); } else { r.xd = 0; r.yd = 0; From 74de9efc8e61f96807cad09b9f279f08cffa7991 Mon Sep 17 00:00:00 2001 From: wangkeqiang Date: Mon, 25 Jun 2018 14:54:25 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E7=82=B9=E9=87=8D=E7=BB=98=E4=BD=8D?= =?UTF-8?q?=E7=BD=AE=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/CanvasNest.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/CanvasNest.js b/src/CanvasNest.js index 2de0e44..548faa8 100644 --- a/src/CanvasNest.js +++ b/src/CanvasNest.js @@ -126,12 +126,12 @@ export default class CanvasNest { context.lineTo(e.x, e.y), context.stroke()); } - r.x += r.xa + r.xd; - r.y += r.ya + r.yd; // 移动 - r.xa *= r.x > width || r.x < 0 ? -1 : 1; - r.ya *= r.y > height || r.y < 0 ? -1 : 1; // 碰到边界，反向反弹 - context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); // 绘制一个宽高为1的点 } + r.x += r.xa + r.xd; + r.y += r.ya + r.yd; // 移动 + r.xa *= r.x > width || r.x < 0 ? -1 : 1; + r.ya *= r.y > height || r.y < 0 ? -1 : 1; // 碰到边界，反向反弹 + context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); // 绘制一个宽高为1的点 }); this.requestFrame(this.drawCanvas); } From e44b11687a7286c461999f08b70da305d79d0c13 Mon Sep 17 00:00:00 2001 From: wangkeqiang Date: Mon, 25 Jun 2018 15:51:28 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=82=B9=E5=9D=90?= =?UTF-8?q?=E6=A0=87=E6=AD=A3=E8=B4=9F=E5=88=87=E6=8D=A2=E6=97=B6=E7=9A=84?= =?UTF-8?q?=E9=80=BB=E8=BE=91=E4=B8=8D=E6=AD=A3=E7=A1=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/CanvasNest.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/CanvasNest.js b/src/CanvasNest.js index 548faa8..7db05b7 100644 --- a/src/CanvasNest.js +++ b/src/CanvasNest.js @@ -110,8 +110,8 @@ export default class CanvasNest { dist = x_dist * x_dist + y_dist * y_dist; // 总距离, m if (e === current) { if (dist < e.max) { // 加速度大小 - r.xd = (Math.abs(prex) > Math.abs(x_dist) ? -1 : 1) * dist / e.max * 2 * r.xa; - r.yd = (Math.abs(prey) > Math.abs(y_dist) ? -1 : 1) * dist / e.max * 2 * r.ya; + r.xd = (Math.abs(prex) > Math.abs(x_dist) && Math.abs(prex) * Math.abs(x_dist) > 0 ? -1 : 1) * dist / e.max * 2 * r.xa; + r.yd = (Math.abs(prey) > Math.abs(y_dist) && Math.abs(prey) * Math.abs(y_dist) > 0 ? -1 : 1) * dist / e.max * 2 * r.ya; } else { r.xd = 0; r.yd = 0;