541 lines
18 KiB
JavaScript
541 lines
18 KiB
JavaScript
(function (global, factory) {
|
||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||
typeof define === 'function' && define.amd ? define(factory) :
|
||
(global.BranchRiver = factory());
|
||
}(this, (function () { 'use strict';
|
||
|
||
var tool = {
|
||
merge: function merge(settings, defaults) {
|
||
Object.keys(settings).forEach(function (key) {
|
||
defaults[key] = settings[key];
|
||
});
|
||
},
|
||
//计算两点间距离
|
||
getDistance: function getDistance(p1, p2) {
|
||
return Math.sqrt((p1[0] - p2[0]) * (p1[0] - p2[0]) + (p1[1] - p2[1]) * (p1[1] - p2[1]));
|
||
},
|
||
//判断点是否在线段上
|
||
containStroke: function containStroke(x0, y0, x1, y1, lineWidth, x, y) {
|
||
if (lineWidth === 0) {
|
||
return false;
|
||
}
|
||
var _l = lineWidth;
|
||
var _a = 0;
|
||
var _b = x0;
|
||
// Quick reject
|
||
if (y > y0 + _l && y > y1 + _l || y < y0 - _l && y < y1 - _l || x > x0 + _l && x > x1 + _l || x < x0 - _l && x < x1 - _l) {
|
||
return false;
|
||
}
|
||
|
||
if (x0 !== x1) {
|
||
_a = (y0 - y1) / (x0 - x1);
|
||
_b = (x0 * y1 - x1 * y0) / (x0 - x1);
|
||
} else {
|
||
return Math.abs(x - x0) <= _l / 2;
|
||
}
|
||
var tmp = _a * x - y + _b;
|
||
var _s = tmp * tmp / (_a * _a + 1);
|
||
return _s <= _l / 2 * _l / 2;
|
||
}
|
||
};
|
||
|
||
var resolutionScale = function (context) {
|
||
var devicePixelRatio = window.devicePixelRatio || 1;
|
||
context.canvas.width = context.canvas.width * devicePixelRatio;
|
||
context.canvas.height = context.canvas.height * devicePixelRatio;
|
||
context.canvas.style.width = context.canvas.width / devicePixelRatio + 'px';
|
||
context.canvas.style.height = context.canvas.height / devicePixelRatio + 'px';
|
||
context.scale(devicePixelRatio, devicePixelRatio);
|
||
};
|
||
|
||
var global = typeof window === 'undefined' ? {} : window;
|
||
|
||
var requestAnimationFrame = global.requestAnimationFrame || global.mozRequestAnimationFrame || global.webkitRequestAnimationFrame || global.msRequestAnimationFrame || function (callback) {
|
||
return global.setTimeout(callback, 1000 / 60);
|
||
};
|
||
|
||
var cancelAnimationFrame = global.cancelAnimationFrame || global.mozCancelAnimationFrame || global.webkitCancelAnimationFrame || global.msCancelAnimationFrame || function (id) {
|
||
clearTimeout(id);
|
||
};
|
||
|
||
var img1 = document.createElement('img');
|
||
var img2 = document.createElement('img');
|
||
var img3 = document.createElement('img');
|
||
img1.src = 'images/1.png';
|
||
img2.src = 'images/2.png';
|
||
img3.src = 'images/3.png';
|
||
|
||
var BranchRiver = function BranchRiver(map, userOptions) {
|
||
var self = this;
|
||
self.map = map;
|
||
|
||
//默认参数
|
||
var options = {
|
||
type: 'point',
|
||
isShowBaseLine: 'true',
|
||
grap: 10,
|
||
isShowTail: true, //是否显示粒子尾巴效果
|
||
lineWidth: 0.5, //线条宽度
|
||
lineStyle: '#C82800', //线条颜色
|
||
tailOpacity: 0.88, //尾巴动画透明度
|
||
animateLineWidth: 1, //动画线条宽度
|
||
renderLineWidth: [4, 3, 2, 1], //尾巴动画线条宽度
|
||
animateLineStyle: '#ffff00', //动画线条颜色
|
||
colors: ["#b5c334", "#59c4e6", "#edafda", "#93b7e3", "#a5e7f0", "#cbb0e3"]
|
||
};
|
||
|
||
self.init(userOptions, options);
|
||
|
||
//全局变量
|
||
var baseCtx = self.baseCtx = self.options.canvas.getContext("2d");
|
||
var animateCtx = self.animateCtx = self.options.animateCanvas.getContext("2d");
|
||
var topCtx = self.topCtx = self.options.topCanvas.getContext("2d");
|
||
baseCtx.lineWidth = options.lineWidth;
|
||
};
|
||
|
||
BranchRiver.prototype.init = function (setting, defaults) {
|
||
//合并参数
|
||
tool.merge(setting, defaults);
|
||
this.options = defaults;
|
||
};
|
||
|
||
BranchRiver.prototype.render = function () {
|
||
var self = this;
|
||
var baseCtx = self.baseCtx;
|
||
if (!baseCtx) {
|
||
return;
|
||
}
|
||
var roadLines = self.roadLines;
|
||
roadLines.forEach(function (line) {
|
||
//line.drawPath(baseCtx, self.map, self.options);
|
||
});
|
||
};
|
||
|
||
BranchRiver.prototype.animate = function () {
|
||
var self = this;
|
||
var animateCtx = self.animateCtx;
|
||
if (!animateCtx) {
|
||
return;
|
||
}
|
||
if (self.options.isShowTail) {
|
||
animateCtx.fillStyle = "rgba(0,0,0," + self.options.tailOpacity + ")";
|
||
var prev = animateCtx.globalCompositeOperation;
|
||
animateCtx.globalCompositeOperation = "destination-in";
|
||
animateCtx.fillRect(0, 0, self.map.width, self.map.height);
|
||
animateCtx.globalCompositeOperation = prev;
|
||
} else {
|
||
animateCtx.clearRect(0, 0, self.map.width, self.map.height);
|
||
}
|
||
//首先加载grade=0||grade=1,0&1——2——3，
|
||
if (self.runlines && self.runlines.length === 0) {
|
||
self.runlines = self.roadLines.filter(function (item, index, array) {
|
||
return item.type == 0;
|
||
});
|
||
} else if (self.runlines.length < self.roadLines.length) {
|
||
self.runlines.forEach(function (runline) {
|
||
var type = runline.type;
|
||
var lastPointLng = runline.currentpoint.x;
|
||
var childLines = self.roadLines.filter(function (value) {
|
||
return value.type == type + 1;
|
||
});
|
||
childLines.forEach(function (childline) {
|
||
if (childline.points[0].x == lastPointLng) {
|
||
self.runlines.push(childline);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
var roadLines = self.runlines;
|
||
switch (self.options.type) {
|
||
case 'point':
|
||
roadLines.forEach(function (line, index, arr) {
|
||
line.draw(animateCtx, self.map, self.options, self.topCtx);
|
||
});
|
||
break;
|
||
case 'arrow':
|
||
roadLines.forEach(function (line, index, arr) {
|
||
line.drawArrow(animateCtx, self.map, self.options);
|
||
});
|
||
break;
|
||
case 'circle':
|
||
roadLines.forEach(function (line, index, arr) {
|
||
line.drawCircle(animateCtx, self.map, self.options);
|
||
});
|
||
break;
|
||
}
|
||
};
|
||
|
||
BranchRiver.prototype.adjustSize = function () {
|
||
var width = this.map.width;
|
||
var height = this.map.height;
|
||
this.baseCtx.canvas.width = width;
|
||
this.baseCtx.canvas.height = height;
|
||
this.animateCtx.canvas.width = width;
|
||
this.animateCtx.canvas.height = height;
|
||
this.topCtx.canvas.width = width;
|
||
this.topCtx.canvas.height = height;
|
||
resolutionScale(this.baseCtx);
|
||
resolutionScale(this.animateCtx);
|
||
resolutionScale(this.topCtx);
|
||
};
|
||
|
||
BranchRiver.prototype.start = function () {
|
||
var self = this;
|
||
self.stop();
|
||
self.adjustSize();
|
||
self.addLine();
|
||
if (self.options.isShowBaseLine) {
|
||
self.render();
|
||
}
|
||
|
||
// (function drawFrame() {
|
||
// self.timer = setTimeout(function () {
|
||
// if (self.animationId) {
|
||
// cancelAnimationFrame(self.animationId);
|
||
// }
|
||
// self.animationId = requestAnimationFrame(drawFrame);
|
||
// self.animate();
|
||
// }, 60);
|
||
// })();
|
||
(function drawFrame() {
|
||
if (self.animationId) {
|
||
cancelAnimationFrame(drawFrame);
|
||
}
|
||
self.animationId = requestAnimationFrame(drawFrame);
|
||
self.animate();
|
||
})();
|
||
|
||
// self.drawStation(this.topCtx, this.map);
|
||
};
|
||
|
||
BranchRiver.prototype.stop = function () {
|
||
var self = this;
|
||
if (self.animationId) {
|
||
cancelAnimationFrame(self.animationId);
|
||
}
|
||
if (self.timer) {
|
||
clearTimeout(self.timer);
|
||
}
|
||
};
|
||
|
||
BranchRiver.prototype.addLine = function () {
|
||
var options = this.options;
|
||
this.runlines = [];
|
||
var roadLines = this.roadLines = [],
|
||
dataset = this.options.data;
|
||
|
||
dataset.forEach(function (line, i) {
|
||
var color = options.colors[line.type];
|
||
// var lineWidth = (i == 0 ? options.renderLineWidth[0] : options.renderLineWidth[1]);
|
||
var lineWidth = options.renderLineWidth[line.type];
|
||
// var baseLineWidth = (i == 0 ? options.renderLineWidth[0] : 0);
|
||
var baseLineWidth = i == 0 ? 1 : 0;
|
||
roadLines.push(new Line({
|
||
type: line.type,
|
||
points: line.list,
|
||
color: color || '#a5e7f0',
|
||
lineWidth: lineWidth || 1,
|
||
baseLineWidth: baseLineWidth
|
||
}));
|
||
});
|
||
};
|
||
|
||
// BranchRiver.prototype.drawStation = function (context, map) {
|
||
// context.clearRect(0, 0, map.width, map.height);
|
||
// var options = this.options;
|
||
// var stations = options.stations;
|
||
// stations.forEach(function (station, i) {
|
||
// var _screePoint = map.toScreen(station.point);
|
||
// context.beginPath();
|
||
// context.arc(_screePoint.x, _screePoint.y, 5, 0, Math.PI * 2);
|
||
// context.fillStyle = 'red';
|
||
// context.fill();
|
||
// });
|
||
// };
|
||
|
||
function Line(options) {
|
||
this.type = options.type;
|
||
this.points = options.points || [];
|
||
this.age = options.age || 0;
|
||
this.maxAge = options.maxAge || 0;
|
||
this.color = options.color || '#ffff00';
|
||
this.grap = options.grap || 10;
|
||
this.lineWidth = options.lineWidth || 1;
|
||
this.baseLineWidth = options.baseLineWidth || 0;
|
||
this.running = false; //是否正在运动
|
||
this.finished = false; //是否已经完成第一次运动
|
||
this.currentpoint = this.points[0];
|
||
this.tempPoints = [0];
|
||
}
|
||
|
||
Line.prototype.getPointList = function (map) {
|
||
var path = this.path = [],
|
||
points = this.points;
|
||
if (points && points.length > 0) {
|
||
points.forEach(function (p) {
|
||
var _screePoint = map.toScreen(p);
|
||
// if (_screePoint.x < 0 || _screePoint.y < 0) {
|
||
// return;
|
||
// }
|
||
path.push({
|
||
pixel: map.toScreen(p)
|
||
});
|
||
});
|
||
this.maxAge = path.length;
|
||
}
|
||
return path;
|
||
};
|
||
|
||
Line.prototype.getStationPointList = function (map, stationList) {
|
||
var stations = this.stations = [];
|
||
if (stationList && stationList.length > 0) {
|
||
stationList.forEach(function (s) {
|
||
stations.push({
|
||
name: s.name,
|
||
grade: s.grade,
|
||
isdraw: false,
|
||
pixel: map.toScreen(s.point)
|
||
});
|
||
});
|
||
}
|
||
return stations;
|
||
};
|
||
|
||
Line.prototype.drawPath = function (context, map, options) {
|
||
if (this.baseLineWidth == 0) return;
|
||
var pointList = this.path || this.getPointList(map);
|
||
context.save();
|
||
context.beginPath();
|
||
context.lineWidth = this.baseLineWidth;
|
||
context.strokeStyle = '#fff'; //this.color;
|
||
// context.strokeStyle = options.lineStyle;
|
||
context.moveTo(pointList[0].pixel.x, pointList[0].pixel.y);
|
||
for (var i = 0, len = pointList.length; i < len; i++) {
|
||
context.lineTo(pointList[i].pixel.x, pointList[i].pixel.y);
|
||
}
|
||
context.stroke();
|
||
context.restore();
|
||
};
|
||
|
||
Line.prototype.drawSingleStation = function (context, map, point) {
|
||
// context.clearRect(0, 0, map.width, map.height);
|
||
// context.beginPath();
|
||
// context.arc(point.pixel.x, point.pixel.y, 5, 0, Math.PI * 2);
|
||
// context.fillStyle = 'red';
|
||
// context.fill();
|
||
// context.closePath();
|
||
|
||
// //绘制文字
|
||
// context.font = '12px Arial';
|
||
// context.textAlign = 'left';
|
||
// context.textBaseline = 'Alphabetic';
|
||
// context.strokeStyle = '#FF0000';
|
||
// // context.strokeText(point.name, point.pixel.x + 5, point.pixel.y);
|
||
// context.fillText(point.name, point.pixel.x + 5, point.pixel.y);
|
||
var _img;
|
||
switch (parseInt(point.grade)) {
|
||
case 1:
|
||
_img = img1;
|
||
break;
|
||
case 2:
|
||
_img = img2;
|
||
break;
|
||
case 3:
|
||
_img = img3;
|
||
break;
|
||
}
|
||
context.save();
|
||
context.translate(point.pixel.x, point.pixel.y);
|
||
// context.drawImage(_img, -12, -12, 24, 24);
|
||
context.drawImage(_img, 0, 0, 20, 20);
|
||
context.restore();
|
||
};
|
||
|
||
Line.prototype.drawArrow = function (context, map, options) {
|
||
var pointList = this.path || this.getPointList(map);
|
||
var movePoints = this.movePoints;
|
||
if (movePoints && movePoints.length > 0) {
|
||
var moveLen = movePoints.length;
|
||
for (var i = 0; i < moveLen; i++) {
|
||
if (movePoints[i] >= this.maxAge - 1) {
|
||
movePoints[i] = 0;
|
||
}
|
||
var currentPoint = pointList[movePoints[i]];
|
||
context.beginPath();
|
||
// context.lineWidth = options.animateLineWidth;
|
||
context.lineWidth = options.lineWidth;
|
||
context.strokeStyle = this.color;
|
||
context.moveTo(currentPoint.pixel.x, currentPoint.pixel.y);
|
||
context.lineTo(pointList[movePoints[i] + 1].pixel.x, pointList[movePoints[i] + 1].pixel.y);
|
||
context.stroke();
|
||
|
||
context.save();
|
||
|
||
context.translate(pointList[movePoints[i] + 1].pixel.x, pointList[movePoints[i] + 1].pixel.y);
|
||
//我的箭头本垂直向下，算出直线偏离Y的角，然后旋转 ,rotate是顺时针旋转的，所以加个负号
|
||
var ang = (pointList[movePoints[i] + 1].pixel.x - currentPoint.pixel.x) / (pointList[movePoints[i] + 1].pixel.y - currentPoint.pixel.y);
|
||
ang = Math.atan(ang);
|
||
pointList[movePoints[i] + 1].pixel.y - currentPoint.pixel.y >= 0 ? context.rotate(-ang) : context.rotate(Math.PI - ang); //加个180度，反过来
|
||
context.lineTo(-3, -3);
|
||
context.lineTo(0, 3);
|
||
context.lineTo(3, -3);
|
||
context.lineTo(0, 0);
|
||
context.fillStyle = this.color;
|
||
context.fill(); //箭头是个封闭图形
|
||
context.restore(); //用来恢复Canvas之前保存的状态,否则会影响后续绘制
|
||
|
||
this.movePoints[i]++;
|
||
}
|
||
} else {
|
||
this.random(map);
|
||
}
|
||
};
|
||
|
||
//第一个点从0开始，
|
||
//0
|
||
//0，10
|
||
//0，10，20
|
||
//0，10，20，30
|
||
//0，10，20，30，40
|
||
Line.prototype.draw = function (context, map, options, topCtx) {
|
||
var self = this;
|
||
var pointList = this.path || this.getPointList(map);
|
||
if (this.movePoints == undefined || this.movePoints.length == 0) {
|
||
this.random(map);
|
||
}
|
||
var movePoints = this.movePoints;
|
||
var moveLen = movePoints.length;
|
||
var tempPoints = this.tempPoints;
|
||
var stations = this.stations || this.getStationPointList(map, options.stations);
|
||
if (tempPoints.length <= moveLen) {
|
||
for (var j = 0; j < tempPoints.length; j++) {
|
||
if (tempPoints[j] >= this.maxAge - 1) {
|
||
tempPoints[j] = 0;
|
||
}
|
||
var nowPoint = pointList[tempPoints[j]].pixel;
|
||
var nextPoint = pointList[tempPoints[j] + 1].pixel;
|
||
|
||
context.beginPath();
|
||
context.lineWidth = this.lineWidth;
|
||
context.strokeStyle = this.color;
|
||
context.lineCap = "round";
|
||
context.moveTo(nowPoint.x, nowPoint.y);
|
||
context.lineTo(nextPoint.x, nextPoint.y);
|
||
context.stroke();
|
||
this.tempPoints[j]++;
|
||
//判断当前点是否是站点，如果是则画出站点
|
||
for (var s = 0; s < stations.length; s++) {
|
||
var _point = stations[s];
|
||
if (_point.isdraw == false && _point.pixel.x == nowPoint.x && _point.pixel.y == nowPoint.y) {
|
||
self.drawSingleStation(topCtx, map, _point);
|
||
_point.isdraw = true;
|
||
}
|
||
}
|
||
}
|
||
var index = this.tempPoints[tempPoints.length - 1];
|
||
this.currentpoint = this.points[index];
|
||
if (movePoints.contains(index)) {
|
||
tempPoints.unshift(0);
|
||
}
|
||
} else {
|
||
for (var k = 0; k < moveLen; k++) {
|
||
if (movePoints[k] >= this.maxAge - 1) {
|
||
movePoints[k] = 0;
|
||
this.finished = true;
|
||
}
|
||
var currentPoint = pointList[movePoints[k]];
|
||
context.beginPath();
|
||
// context.lineWidth = options.animateLineWidth;
|
||
context.lineWidth = this.lineWidth;
|
||
context.strokeStyle = this.color;
|
||
context.lineCap = "round";
|
||
context.moveTo(currentPoint.pixel.x, currentPoint.pixel.y);
|
||
context.lineTo(pointList[movePoints[k] + 1].pixel.x, pointList[movePoints[k] + 1].pixel.y);
|
||
context.stroke();
|
||
this.movePoints[k]++;
|
||
}
|
||
}
|
||
this.running = true;
|
||
};
|
||
|
||
Line.prototype.drawCircle = function (context, map, options) {
|
||
var pointList = this.path || this.getPointList(map);
|
||
if (this.movePoints == undefined || this.movePoints.length == 0) {
|
||
this.random(map);
|
||
}
|
||
var movePoints = this.movePoints;
|
||
var moveLen = movePoints.length;
|
||
var tempPoints = this.tempPoints;
|
||
if (tempPoints.length < moveLen) {
|
||
for (var j = 0; j < tempPoints.length; j++) {
|
||
if (tempPoints[j] >= this.maxAge - 1) {
|
||
tempPoints[j] = 0;
|
||
}
|
||
var nowPoint = pointList[tempPoints[j]].pixel;
|
||
var nextPoint = pointList[tempPoints[j] + 1].pixel;
|
||
|
||
context.beginPath();
|
||
context.arc(nowPoint.x, nowPoint.y, this.lineWidth, 0, Math.PI * 2);
|
||
context.fillStyle = this.color;
|
||
context.fill();
|
||
this.tempPoints[j]++;
|
||
}
|
||
var index = this.tempPoints[tempPoints.length - 1];
|
||
if (movePoints.contains(index)) {
|
||
tempPoints.unshift(0);
|
||
}
|
||
} else {
|
||
for (var k = 0; k < moveLen; k++) {
|
||
if (movePoints[k] >= this.maxAge - 1) {
|
||
movePoints[k] = 0;
|
||
this.finished = true;
|
||
}
|
||
var currentPoint = pointList[movePoints[k]].pixel;
|
||
context.beginPath();
|
||
context.arc(currentPoint.x, currentPoint.y, this.lineWidth, 0, Math.PI * 2);
|
||
context.fillStyle = this.color;
|
||
context.fill();
|
||
this.movePoints[k]++;
|
||
}
|
||
}
|
||
this.running = true;
|
||
};
|
||
|
||
Line.prototype.random = function (map) {
|
||
var pointList = this.path || this.getPointList(map);
|
||
var arr = [],
|
||
gap = this.grap; //间隔
|
||
if (gap > pointList.length) {
|
||
this.grap = Math.floor(pointList.length / 2);
|
||
}
|
||
var maxNum = Math.floor(pointList.length / gap);
|
||
|
||
while (arr.length < maxNum) {
|
||
for (var i = 0; i < pointList.length; i += gap) {
|
||
if (arr.length === 0) {
|
||
//如果数组长度为0则直接添加到arr数组
|
||
arr.push(i);
|
||
} else {
|
||
if (arr.indexOf(i) == -1) {
|
||
arr.push(i);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// this.movePoints = [0];
|
||
this.movePoints = arr;
|
||
};
|
||
|
||
//声明----如果有此 contains 直接用最好
|
||
Array.prototype.contains = function (needle) {
|
||
for (var i in this) {
|
||
if (this[i] == needle) return true;
|
||
}
|
||
return false;
|
||
};
|
||
|
||
return BranchRiver;
|
||
|
||
})));
|