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;
|
|||
|
|
|
|||
|
|
})));
|