"use strict";
var __emptyPoint = null,
__emptyContext = null;
const ColorRefTable = [
['aliceblue','#f0f8ff'], ['antiquewhite','#faebd7'], ['aqua','#00ffff'],
['aquamarine','#7fffd4'], ['azure','#f0ffff'], ['beige','#f5f5dc'],
['bisque','#ffe4c4'], ['black','#000000'], ['blanchedalmond','#ffebcd'],
['blue','#0000ff'], ['blueviolet','#8a2be2'], ['brown','#a52a2a'],
['burlywood','#deb887'], ['cadetblue','#5f9ea0'], ['chartreuse','#7fff00'],
['chocolate','#d2691e'], ['coral','#ff7f50'], ['cornflowerblue'],
['cornsilk','#fff8dc'], ['crimson','#dc143c'], ['cyan','#00ffff'],
['darkblue','#00008b'], ['darkcyan','#008b8b'], ['darkgoldenrod','#b8860b'],
['darkgray','#a9a9a9'], ['darkgreen','#006400'], ['darkgrey','#a9a9a9'],
['darkkhaki','#bdb76b'], ['darkmagenta','#8b008b'], ['firebrick','#b22222'],
['darkolivegreen','#556b2f'], ['darkorange','#ff8c00'], ['darkorchid','#9932cc'],
['darkred','#8b0000'], ['darksalmon','#e9967a'], ['darkseagreen','#8fbc8f'],
['darkslateblue','#483d8b'], ['darkslategray','#2f4f4f'], ['darkslategrey','#2f4f4f'],
['darkturquoise','#00ced1'], ['darkviolet','#9400d3'], ['deeppink','#ff1493'],
['deepskyblue','#00bfff'], ['dimgray','#696969'], ['dimgrey','#696969'],
['dodgerblue','#1e90ff'], ['floralwhite','#fffaf0'], ['forestgreen','#228b22'],
['fuchsia','#ff00ff'], ['gainsboro','#dcdcdc'], ['ghostwhite','#f8f8ff'],
['gold','#ffd700'], ['goldenrod','#daa520'], ['gray','#808080'],
['green','#008000'], ['greenyellow','#adff2f'], ['grey','#808080'],
['honeydew','#f0fff0'], ['hotpink','#ff69b4'], ['indianred','#cd5c5c'],
['indigo','#4b0082'], ['ivory','#fffff0'], ['khaki','#f0e68c'],
['lavender','#e6e6fa'], ['lavenderblush','#fff0f5'], ['lawngreen','#7cfc00'],
['lemonchiffon','#fffacd'], ['lightblue','#add8e6'], ['lightcoral','#f08080'],
['lightcyan','#e0ffff'], ['lightgoldenrodyellow','#fafad2'], ['lightgray','#d3d3d3'],
['lightgreen','#90ee90'], ['lightgrey','#d3d3d3'], ['lightpink','#ffb6c1'],
['lightsalmon','#ffa07a'], ['lightseagreen','#20b2aa'], ['lightskyblue','#87cefa'],
['lightslategray','#778899'], ['lightslategrey','#778899'], ['lightsteelblue','#b0c4de'],
['lightyellow','#ffffe0'], ['lime','#00ff00'], ['limegreen','#32cd32'],
['linen','#faf0e6'], ['magenta','#ff00ff'], ['maroon','#800000'],
['mediumaquamarine','#66cdaa'], ['mediumblue','#0000cd'], ['mediumorchid','#ba55d3'],
['mediumpurple','#9370db'], ['mediumseagreen','#3cb371'], ['mediumslateblue','#7b68ee'],
['mediumspringgreen','#00fa9a'], ['mediumturquoise','#48d1cc'], ['mediumvioletred','#c71585'],
['midnightblue','#191970'], ['mintcream','#f5fffa'], ['mistyrose','#ffe4e1'],
['moccasin','#ffe4b5'], ['navajowhite','#ffdead'], ['navy','#000080'],
['oldlace','#fdf5e6'], ['olive','#808000'], ['olivedrab','#6b8e23'],
['orange','#ffa500'], ['orangered','#ff4500'], ['orchid','#da70d6'],
['palegoldenrod','#eee8aa'], ['palegreen','#98fb98'], ['paleturquoise','#afeeee'],
['palevioletred','#db7093'], ['papayawhip','#ffefd5'], ['peachpuff','#ffdab9'],
['peru','#cd853f'], ['pink','#ffc0cb'], ['plum','#dda0dd'],
['powderblue','#b0e0e6'], ['purple','#800080'], ['red','#ff0000'],
['rosybrown','#bc8f8f'], ['royalblue','#4169e1'], ['saddlebrown','#8b4513'],
['salmon','#fa8072'], ['sandybrown','#f4a460'], ['seagreen','#2e8b57'],
['seashell','#fff5ee'], ['sienna','#a0522d'], ['silver','#c0c0c0'],
['skyblue','#87ceeb'], ['slateblue','#6a5acd'], ['slategray','#708090'],
['slategrey','#708090'], ['snow','#fffafa'], ['springgreen','#00ff7f'],
['steelblue','#4682b4'], ['tan','#d2b48c'], ['teal','#008080'],
['thistle','#d8bfd8'], ['tomato','#ff6347'], ['turquoise','#40e0d0'],
['violet','#ee82ee'], ['wheat','#f5deb3'], ['white','#ffffff'],
['whitesmoke','#f5f5f5'], ['yellow','#ffff00'], ['yellowgreen','#9acd32']
],
UTILS = {
toAngle(v){
return v / 180 * Math.PI;
},
emptyArray(arr){
return !Array.isArray(arr) || arr.length === 0;
},
isObject(obj){
return obj !== null && typeof obj === "object" && Array.isArray(obj) === false;
},
isNumber(num){
return typeof num === "number" && isNaN(num) === false;
},
//获取最后一个点后面的字符
getFileType(string){
let type = "", str = string.split('').reverse().join('');
for(let k = 0, len = str.length; k < len; k++){
if(str[k] === ".") break;
type += str[k];
}
return type.split('').reverse().join('');
},
//删除 string 所有的空格
deleteSpaceAll(str){
const len = str.length;
var result = '';
for(let i = 0; i < len; i++){
if(str[i] !== '') result += str[i]
}
return result
},
//删除 string 两边空格
removeSpaceSides(string){
return string.replace(/(^\s*)|(\s*$)/g, "");
},
//返回 num 与 num1 之间的随机数
random(num, num1){
if(num < num1) return Math.random() * (num1 - num) + num;
else if(num > num1) return Math.random() * (num - num1) + num1;
else return num;
},
//生成 UUID
generateUUID: function (){
const _lut = [];
for ( let i = 0; i < 256; i ++ ) {
_lut[ i ] = ( i < 16 ? '0' : '' ) + ( i ).toString( 16 );
}
return function (){
const d0 = Math.random() * 0xffffffff | 0;
const d1 = Math.random() * 0xffffffff | 0;
const d2 = Math.random() * 0xffffffff | 0;
const d3 = Math.random() * 0xffffffff | 0;
const uuid = _lut[ d0 & 0xff ] + _lut[ d0 >> 8 & 0xff ] + _lut[ d0 >> 16 & 0xff ] + _lut[ d0 >> 24 & 0xff ] + '-' +
_lut[ d1 & 0xff ] + _lut[ d1 >> 8 & 0xff ] + '-' + _lut[ d1 >> 16 & 0x0f | 0x40 ] + _lut[ d1 >> 24 & 0xff ] + '-' +
_lut[ d2 & 0x3f | 0x80 ] + _lut[ d2 >> 8 & 0xff ] + '-' + _lut[ d2 >> 16 & 0xff ] + _lut[ d2 >> 24 & 0xff ] +
_lut[ d3 & 0xff ] + _lut[ d3 >> 8 & 0xff ] + _lut[ d3 >> 16 & 0xff ] + _lut[ d3 >> 24 & 0xff ];
return uuid.toLowerCase(); //toLowerCase() 这里展平连接的字符串以节省堆内存空间
}
}(),
//欧几里得距离(两点的直线距离)
distance(x, y, x1, y1){
return Math.sqrt(Math.pow(x - x1, 2) + Math.pow(y - y1, 2));
},
downloadFile(blob, fileName){
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
},
loadFileJSON(callback){
const input = document.createElement("input");
input.type = "file";
input.accept = ".json";
input.onchange = a => {
if(a.target.files.length === 0) return;
const fr = new FileReader();
fr.onloadend = b => callback(b.target.result);
fr.readAsText(a.target.files[0]); //fr.readAsDataURL(a.target.files[0]);
}
input.click();
},
get emptyPoint(){
if(__emptyPoint === null) __emptyPoint = new Point();
return __emptyPoint;
},
get emptyContext(){
if(__emptyContext === null) __emptyContext = document.createElement("canvas").getContext('2d')
return __emptyContext;
},
}
/** Ajax
parameter:
option = {
url: 可选, 默认 ''
method: 可选, post 或 get请求， 默认 post
asy: 可选, 是否异步执行, 默认 true
success: 可选, 成功回调, 默认 null
error: 可选, 超时或失败调用, 默认 null
change: 可选, 请求状态改变时调用, 默认 null
data: 可选, 如果定义则在初始化时自动执行.send(data)方法
}
demo:
const data = `email=${email}&password=${password}`,
//默认 post 请求:
ajax = new Ajax({
url: './login',
data: data,
success: mes => console.log(mes),
});
//get 请求:
ajax.method = "get";
ajax.send(data);
*/
class Ajax{
constructor(option = {}){
this.url = option.url || "";
this.method = option.method || "post";
this.asy = typeof option.asy === "boolean" ? option.asy : true;
this.success = option.success || null;
this.error = option.error || null;
this.change = option.change || null;
//init XML
this.xhr = new XMLHttpRequest();
this.xhr.onerror = this.xhr.ontimeout = option.error || null;
this.xhr.onreadystatechange = event => {
if(event.target.readyState === 4 && event.target.status === 200){
if(this.success !== null) this.success(event.target.responseText, event);
}
else if(this.change !== null) this.change(event);
}
if(option.data) this.send(option.data);
}
send(data = ""){
if(this.method === "get"){
this.xhr.open(this.method, this.url+"?"+data, this.asy);
this.xhr.send();
}
else if(this.method === "post"){
this.xhr.open(this.method, this.url, this.asy);
this.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
this.xhr.send(data);
}
}
}
/* IndexedDB 本地数据库
parameter:
name: String; //需要打开的数据库名称(如果不存在则会新建一个) 必须
done: Function(IndexedDB); //链接数据库成功时的回调 默认 null
version: Number; //数据库版本(高版本数据库将覆盖低版本的数据库) 默认 1
attribute:
database: IndexedDB; //链接完成的数据库对象
transaction: IDBTransaction; //事务管理(读和写)
objectStore: IDBObjectStore; //当前的事务
method:
set(data, key, callback) //添加或更新
get(key, callback) //获取
delete(key, callback) //删除
traverse(callback) //遍历
getAll(callback) //获取全部
clear(callback) //清理所以数据
close() //关闭数据库链接
readOnly:
static:
indexedDB: Object;
demo:
new IndexedDB('TEST', db => {
conosle.log(db);
});
*/
class IndexedDB{
static indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
get objectStore(){ //每个事务只能使用一次, 所以每次都需要重新创建
return this.database.transaction(this.name, 'readwrite').objectStore(this.name);
}
constructor(name, done = null, version = 1){
if(IndexedDB.indexedDB === undefined) return console.error("IndexedDB: 不支持IndexedDB");
if(typeof name !== 'string') return console.warn('IndexedDB: 参数错误');
this.name = name;
this.database = null;
const request = IndexedDB.indexedDB.open(name, version);
request.onupgradeneeded = (e)=>{ //数据库不存在 或 版本号不同时 触发
if(!this.database) this.database = e.target.result;
if(this.database.objectStoreNames.contains(name) === false) this.database.createObjectStore(name);
}
request.onsuccess = (e)=>{
this.database = e.target.result;
if(typeof done === 'function') done(this);
}
request.onerror = (e)=>{
console.error(e);
}
}
close(){
return this.database.close();
}
clear(callback){
this.objectStore.clear().onsuccess = callback;
}
traverse(callback){
this.objectStore.openCursor().onsuccess = callback;
}
set(data, key = 0, callback){
this.objectStore.put(data, key).onsuccess = callback;
}
get(key = 0, callback){
this.objectStore.get(key).onsuccess = callback;
}
del(key = 0, callback){
this.objectStore.delete(key).onsuccess = callback;
}
getAll(callback){
this.objectStore.getAll().onsuccess = callback;
}
}
/* TreeStruct 树结构基类
attribute:
parent: TreeStruct;
children: Array[TreeStruct];
method:
add(v: TreeStruct): v; //v添加到自己的子集
remove(v: TreeStruct): v; //删除v, 前提v必须是自己的子集
export(): Array[Object]; //TreeStruct 转为 可导出的结构, 包括其所有的后代
getPath(v: TreeStruct): Array[TreeStruct]; //获取自己到v的路径
traverse(callback: Function): undefined; //迭代自己的每一个后代, 包括自己
callback(value: TreeStruct); //如返回 "continue" 则不在迭代其后代(不是结束迭代, 而是只结束当前节点的后代);
traverseUp(callback): undefined; //向上遍历每一个父, 包括自己
callback(value: TreeStruct); //如返回 "break" 立即停止遍历;
static:
import(arr: Array[Object]): TreeStruct; //.export() 返回的 arr 转为 TreeStruct
*/
class TreeStruct{
static import(arr){
//json = JSON.parse(json);
const len = arr.length;
for(let k = 0, v; k < len; k++){
v = Object.assign(new TreeStruct(), arr[k]);
v.parent = arr[arr[k].parent] || null;
if(v.parent !== null) v.parent.add(v);
arr[k] = v;
}
return arr[0];
}
constructor(){
this.parent = null;
this.children = [];
}
getPath(v){
var path;
const pathA = [];
this.traverseUp(tar => {
if(v === tar){
path = pathA;
return "break";
}
pathA.push(tar);
});
if(path) return path;
const pathB = [];
v.traverseUp(tar => {
if(this === tar){
path = pathB.reverse();
return "break";
}
else{
let i = pathA.indexOf(tar);
if(i !== -1){
pathA.splice(i);
pathA.push(tar);
path = pathA.concat(pathB.reverse());
return "break";
}
}
pathB.push(tar);
});
return path;
}
add(v){
v.parent = this;
if(this.children.includes(v) === false) this.children.push(v);
return v;
}
remove(v){
const i = this.children.indexOf(v);
if(i !== -1) this.children.splice(i, 1);
v.parent = null;
return v;
}
traverse(callback, key = 0){
if(callback(this, key) !== "continue"){
for(let k = 0, len = this.children.length; k < len; k++){
this.children[k].traverse(callback, k);
}
}
}
traverseUp(callback){
var par = this.parent;
while(par !== null){
if(callback(par) === "break") return;
par = par.parent;
}
}
export(){
const result = [], arr = [];
var obj = null;
this.traverse(v => {
obj = Object.assign({}, v);
obj.parent = arr.indexOf(v.parent);
delete obj.children;
result.push(obj);
arr.push(v);
});
return result; //JSON.stringify(result);
}
}
Object.defineProperties(TreeStruct.prototype, {
isTreeStruct: {
configurable: false,
enumerable: false,
writable: false,
value: true,
}
});
/* Point
parameter:
x = 0, y = 0;
attribute
x, y: Number;
method:
set(x, y): this;
angle(): Number;
copy(point): this;
clone(): Point;
distance(point): Number; //获取欧几里得距离
distanceMHD(point): Number; //获取曼哈顿距离
distanceCompare(point): Number; //获取用于比较的距离(相对于.distance() 效率更高)
equals(point): Bool; //是否恒等
reverse(): this; //取反值
rotate(origin: Object{x,y}, angle): this; //旋转点
normalize(): this; //归一
*/
class Point{
constructor(x = 0, y = 0){
this.x = x;
this.y = y;
}
set(x = 0, y = 0){
this.x = x;
this.y = y;
return this;
}
angle(){
return Math.atan2(this.y, this.x);
}
copy(point){
return Object.assign(this, point);
}
clone(){
return Object.assign(new this.constructor(), this);
}
distance(point){
return Math.sqrt(Math.pow(point.x - this.x, 2) + Math.pow(point.y - this.y, 2));
}
distanceMHD(point){
return Math.abs(this.x - point.x) + Math.abs(this.y - point.y);
}
distanceCompare(point){
return Math.pow(this.x - point.x, 2) + Math.pow(this.y - point.y, 2);
}
equals(point){
return point.x === this.x && point.y === this.y;
}
reverse(){
this.x = -this.x;
this.y = -this.y;
return this;
}
rotate(origin, angle){
const c = Math.cos(angle), s = Math.sin(angle),
x = this.x - origin.x, y = this.y - origin.y;
this.x = x * c - y * s + origin.x;
this.y = x * s + y * c + origin.y;
return this;
}
normalize(){
const len = 1 / (Math.sqrt(this.x * this.x + this.y * this.y) || 1);
this.x *= len;
this.y *= len;
return this;
}
/* add(point){
this.x += point.x;
this.y += point.y;
return this;
}
sub(point){
this.x -= point.x;
this.y -= point.y;
return this;
}
multiply(point){
this.x *= point.x;
this.y *= point.y;
return this;
}
divide(point){
this.x /= point.x;
this.y /= point.y;
return this;
} */
}
Object.defineProperties(Point.prototype, {
isPoint: {
configurable: false,
enumerable: false,
writable: false,
value: true,
}
});
/* Line
parameter: x, y, x1, y1: Number;
attribute: x, y, x1, y1: Number;
method:
set(x, y, x1, y1): this;
containsPoint(x, y): Bool; //点是否在线上
intersectPoint(line: Line, point: Point): Point; //如果不相交则返回null, 否则返回交点Point
isIntersect(line): Bool; //this与line是否相交
*/
class Line{
constructor(x = 0, y = 0, x1 = 0, y1 = 0){
this.x = x;
this.y = y;
this.x1 = x1;
this.y1 = y1;
}
set(x = 0, y = 0, x1 = 0, y1 = 0){
this.x = x;
this.y = y;
this.x1 = x1;
this.y1 = y1;
return this;
}
containsPoint(x, y){
return (x - this.x) * (x - this.x1) <= 0 && (y - this.y) * (y - this.y1) <= 0;
}
intersectPoint(line, point){
//解线性方程组, 求线段交点
//如果分母为0则平行或共线, 不相交
var denominator = (this.y1 - this.y) * (line.x1 - line.x) - (this.x - this.x1) * (line.y - line.y1);
if(denominator === 0) return null;
//线段所在直线的交点坐标 (x , y)
const x = ((this.x1 - this.x) * (line.x1 - line.x) * (line.y - this.y)
+ (this.y1 - this.y) * (line.x1 - line.x) * this.x
- (line.y1 - line.y) * (this.x1 - this.x) * line.x) / denominator;
const y = -((this.y1 - this.y) * (line.y1 - line.y) * (line.x - this.x)
+ (this.x1 - this.x) * (line.y1 - line.y) * this.y
- (line.x1 - line.x) * (this.y1 - this.y) * line.y) / denominator;
//判断交点是否在两条线段上
if(this.containsPoint(x, y) && line.containsPoint(x, y)){
point.x = x;
point.y = y;
return point;
}
return null;
}
isIntersect(line){
//快速排斥：
//两个线段为对角线组成的矩形，如果这两个矩形没有重叠的部分，那么两条线段是不可能出现重叠的
//这里的确如此，这一步是判定两矩形是否相交
//1.线段ab的低点低于cd的最高点（可能重合）
//2.cd的最左端小于ab的最右端（可能重合）
//3.cd的最低点低于ab的最高点（加上条件1，两线段在竖直方向上重合）
//4.ab的最左端小于cd的最右端（加上条件2，两直线在水平方向上重合）
//综上4个条件，两条线段组成的矩形是重合的
//特别要注意一个矩形含于另一个矩形之内的情况
if(!(Math.min(this.x,this.x1)<=Math.max(line.x,line.x1) && Math.min(line.y,line.y1)<=Math.max(this.y,this.y1) && Math.min(line.x,line.x1)<=Math.max(this.x,this.x1) && Math.min(this.y,this.y1)<=Math.max(line.y,line.y1))) return false;
//跨立实验：
//如果两条线段相交，那么必须跨立，就是以一条线段为标准，另一条线段的两端点一定在这条线段的两段
//也就是说a b两点在线段cd的两端，c d两点在线段ab的两端
var u=(line.x-this.x)*(this.y1-this.y)-(this.x1-this.x)*(line.y-this.y),
v = (line.x1-this.x)*(this.y1-this.y)-(this.x1-this.x)*(line.y1-this.y),
w = (this.x-line.x)*(line.y1-line.y)-(line.x1-line.x)*(this.y-line.y),
z = (this.x1-line.x)*(line.y1-line.y)-(line.x1-line.x)*(this.y1-line.y);
return u*v <= 0.00000001 && w*z <= 0.00000001;
}
}
/* ShapeRect (一般2d矩形的原点在左上, 此矩形类的原点在中间)
parameter:
width = 0, height = 0
attribute:
width, height: Number; //矩形的宽高
position: Point; //位置(是旋转和缩放的中心点)
rotation: Number; //旋转(绕 Z 轴旋转的弧度)
scale: Point; //缩放
method:
setFromBox(box): this; //Box 转为 ShapeRect
compute(): undefined; //计算出矩形
applyCanvas(context): undefined; //矩形应用到画布的上下文中
demo:
const canvasRect = new ShapeRect(100, 150); console.log(canvasRect);
const canvas = document.createElement("canvas");
canvas.width = WORLD.width;
canvas.height = WORLD.height;
canvas.style = `
position: absolute;
z-index: 9999;
background: rgb(127,127,127);
`;
document.body.appendChild(canvas);
canvasRect.position.set(300, 300);
canvasRect.rotation = UTILS.toAngle(45);
canvasRect.scale.set(1.5, 1.5);
canvasRect.compute();
const context = canvas.getContext("2d");
canvasRect.applyCanvas(context);
context.strokeStyle = "red";
context.stroke();
*/
class ShapeRect{
#dots = [];
constructor(width = 0, height = 0){
this.width = width;
this.height = height;
this.position = new Point();
this.rotation = 0;
this.scale = new Point(1, 1);
}
setFromBox(box){
this.width = box.w;
this.height = box.h;
this.position.set(box.cx, box.cy);
return this;
}
compute(){
//scale
const width = this.width * this.scale.x,
height = this.height * this.scale.y,
//position
minX = this.position.x - width / 2,
minY = this.position.y - height / 2,
maxX = minX + width,
maxY = minY + height,
//rotation
point = UTILS.emptyPoint;
this.#dots.length = 0;
point.set(minX, minY).rotate(this.position, this.rotation);
this.#dots.push(point.x, point.y);
point.set(maxX, minY).rotate(this.position, this.rotation);
this.#dots.push(point.x, point.y);
point.set(maxX, maxY).rotate(this.position, this.rotation);
this.#dots.push(point.x, point.y);
point.set(minX, maxY).rotate(this.position, this.rotation);
this.#dots.push(point.x, point.y);
}
applyCanvas(context){
context.beginPath();
context.moveTo(this.#dots[0], this.#dots[1]);
for(let k = 2, len = this.#dots.length; k < len; k += 2){
context.lineTo(this.#dots[k], this.#dots[k + 1]);
}
context.closePath();
}
}
/* Box 矩形
parameter:
x = 0, y = 0, w = 0, h = 0;
attribute:
x,y: Number; 位置
w,h: Number; 大小
只读
mx, my: Number; //
method:
set(x, y, w, h): this;
pos(x, y): this; //设置位置
size(w, h): this; //设置大小
setFromShapeRect(shapeRect): this; //ShapeRect 转为 Box (忽略 ShapeRect 的旋转和缩放)
setFromCircle(circle, inner: Bool): this; //
toArray(array: Array, index: Integer): this;
copy(box): this; //复制
clone(): Box; //克隆
center(box): this; //设置位置在box居中
distance(x, y): Number; //左上角原点 与 x,y 的直线距离
isEmpty(): Boolean; //.w.h是否小于等于零
maxX(): Number; //返回 max x(this.x+this.w);
maxY(): Number; //返回 max y(this.y+this.h);
expand(box): undefined; //扩容; 把box合并到this
equals(box): Boolean; //this与box是否恒等
intersectsBox(box): Boolean; //box与this是否相交(box在this内部也会返回true)
containsPoint(x, y): Boolean; //x,y点是否在this内
containsBox(box): Boolean; //box是否在this内(只是相交返回fasle)
computeOverflow(b: Box, r: Box): undefined; //this相对b超出的部分赋值到r; r的size小于或等于0的话说明完全超出
*/
class Box{
get mx(){
return this.x + this.w;
}
get my(){
return this.y + this.h;
}
get cx(){
return this.w / 2 + this.x;
}
get cy(){
return this.h / 2 + this.y;
}
constructor(x = 0, y = 0, w = 0, h = 0){
//this.set(x, y, w, h);
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
set(x, y, w, h){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
return this;
}
pos(x, y){
this.x = x;
this.y = y;
return this;
}
size(w, h){
this.w = w;
this.h = h;
return this;
}
setFromShapeRect(shapeRect){
this.width = shapeRect.width;
this.height = shapeRect.height;
this.x = shapeRect.position.x - this.width / 2;
this.y = shapeRect.position.y - this.height / 2;
return this;
}
setFromCircle(circle, inner = true){
if(inner === true){
this.x = Math.sin(-135 / 180 * Math.PI) * circle.r + circle.x;
this.y = Math.cos(-135 / 180 * Math.PI) * circle.r + circle.y;
this.w = this.h = Math.sin(135 / 180 * Math.PI) * circle.r + circle.x - this.x;
}
else{
this.x = circle.x - circle.r;
this.y = circle.y - circle.r;
this.w = this.h = circle.r * 2;
}
return this;
}
setFromPolygon(polygon, inner = true){
if(inner === true){
console.warn('Box: 暂不支持第二个参数为true');
}
else{
const len = polygon.path.length;
let x = Infinity, y = Infinity, mx = 0, my = 0;
for(let k = 0, v; k < len; k+=2){
v = polygon.path[k];
if(v < x) x = v;
else if(v > mx) mx = v;
v = polygon.path[k+1];
if(v < y) y = v;
else if(v > my) my = v;
}
this.set(x, y, mx - x, my - y);
}
return this;
}
toArray(array, index){
array[index] = this.x;
array[index+1] = this.y;
array[index+2] = this.w;
array[index+3] = this.h;
return this;
}
copy(box){
/* this.x = box.x;
this.y = box.y;
this.w = box.w;
this.h = box.h; */
return Object.assign(this, box); //this.set(box.x, box.y, box.w, box.h);
}
clone(){
//return new this.constructor().copy(this);
return Object.assign(new this.constructor(), this);
}
center(box){
this.x = (box.w - this.w) / 2 + box.x;
this.y = (box.h - this.h) / 2 + box.y;
return this;
}
distance(x, y){
return Math.sqrt(Math.pow(this.x - x, 2) + Math.pow(this.y - y, 2));
}
isEmpty(){
return this.w <= 0 || this.h <= 0;
}
maxX(){
return this.x + this.w;
}
maxY(){
return this.y + this.h;
}
equals(box){
return this.x === box.x && this.w === box.w && this.y === box.y && this.h === box.h;
}
expand(box){
var v = Math.min(this.x, box.x);
this.w = Math.max(this.x + this.w - v, box.x + box.w - v);
this.x = v;
v = Math.min(this.y, box.y);
this.h = Math.max(this.y + this.h - v, box.y + box.h - v);
this.y = v;
}
intersectsBox(box){
return box.x + box.w < this.x || box.x > this.x + this.w || box.y + box.h < this.y || box.y > this.y + this.h ? false : true;
}
containsPoint(x, y){
return x < this.x || x > this.x + this.w || y < this.y || y > this.y + this.h ? false : true;
}
containsBox(box){
return this.x <= box.x && box.x + box.w <= this.x + this.w && this.y <= box.y && box.y + box.h <= this.y + this.h;
}
computeOverflow(p, r){
r["copy"](this);
if(this["x"] < p["x"]){
r["x"] = p["x"];
r["w"] -= p["x"] - this["x"];
}
if(this["y"] < p["y"]){
r["y"] = p["y"];
r["h"] -= p["y"] - this["y"];
}
var m = p["x"] + p["w"];
if(r["x"] + r["w"] > m) r["w"] = m - r["x"];
m = p["y"] + p["h"];
if(r["y"] + r["h"] > m) r["h"] = m - r["y"];
}
}
Object.defineProperties(Box.prototype, {
isBox: {
configurable: false,
enumerable: false,
writable: false,
value: true,
},
});
/* Circle 圆形
parameter:
attribute:
x,y: Number; 中心点
r: Number; 半径
//只读
r2: Number; //返回直径 r*2
method:
set(x, y, r): this;
pos(x, y): this;
copy(circle: Circle): this;
clone(): Circle;
distance(x, y): Number;
equals(circle: Circle): Bool;
containsPoint(x, y): Bool;
intersectsCircle(circle: Circle): Bool;
intersectsBox(box: Box): Bool;
setFromBox(box, inner = true): this;
*/
class Circle{
get r2(){
return this.r * 2;
}
constructor(x = 0, y = 0, r = -1){
//this.set(0, 0, -1);
this.x = x;
this.y = y;
this.r = r;
}
set(x, y, r){
this.x = x;
this.y = y;
this.r = r;
return this;
}
setFromBox(box, world = true, inner = true){
this.x = box.w / 2 + (world === true ? box.x : 0);
this.y = box.h / 2 + (world === true ? box.y : 0);
this.r = inner === true ? Math.min(box.w, box.h) / 2 : UTILS.distance(0, 0, box.w, box.h) / 2;
return this;
}
toArray(array, index){
array[index] = this.x;
array[index+1] = this.y;
array[index+2] = this.r;
return this;
}
pos(x, y){
this.x = x;
this.y = y;
return this;
}
copy(circle){
this.r = circle.r;
this.x = circle.x;
this.y = circle.y;
return this;
}
clone(){
return new this.constructor().copy(this);
}
distance(x, y){
return Math.sqrt(Math.pow(this.x - x, 2) + Math.pow(this.y - y, 2));
}
equals(circle){
return circle.x === this.x && circle.y === this.y && circle.r === this.r;
}
containsPoint(x, y){
return (Math.pow(x - this.x, 2) + Math.pow(y - this.y, 2) <= Math.pow(this.r, 2));
}
intersectsCircle(circle){
return (Math.pow(circle.x - this.x, 2) + Math.pow(circle.y - this.y, 2) <= Math.pow(circle.r + this.r, 2));
}
intersectsBox(box){
return (Math.pow(Math.max(box.x, Math.min(box.x + box.w, this.x)) - this.x, 2) + Math.pow(Math.max(box.y, Math.min(box.y + box.h, this.y)) - this.y, 2) <= Math.pow(this.r, 2));
}
}
Object.defineProperties(Circle.prototype, {
isCircle: {
configurable: false,
enumerable: false,
writable: false,
value: true,
}
});
/* Polygon 多边形
parameter:
path: Array[x, y];
attribute:
//只读属性
path: Array[x, y];
method:
add(x, y): this; //x,y添加至path;
containsPoint(x, y): Bool; //x,y是否在多边形的内部(注意: 在路径上也返回 true)
*/
class Polygon{
#position = null;
#path2D = null;
get path(){
return this.#position;
}
constructor(path = []){
this.#position = path;
this.#path2D = new Path2D();
var len = path.length;
if(len >= 2){
if(len % 2 !== 0){
len -= 1;
path.splice(len, 1);
}
const con = this.#path2D;
con.moveTo(path[0], path[1]);
for(let k = 2; k < len; k+=2) con.lineTo(path[k], path[k+1]);
}
}
add(x, y){
this.#position.push(x, y);
this.#path2D.lineTo(x, y);
return this;
}
containsPoint(x, y){
return UTILS.emptyContext.isPointInPath(this.#path2D, x, y);
}
isInPolygon(checkPoint, polygonPoints) {
var counter = 0;
var i;
var xinters;
var p1, p2;
var pointCount = polygonPoints.length;
p1 = polygonPoints[0];
for (i = 1; i <= pointCount; i++) {
p2 = polygonPoints[i % pointCount];
if (
checkPoint[0] > Math.min(p1[0], p2[0]) &&
checkPoint[0] <= Math.max(p1[0], p2[0])
) {
if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
if (p1[0] != p2[0]) {
xinters =
(checkPoint[0] - p1[0]) *
(p2[1] - p1[1]) /
(p2[0] - p1[0]) +
p1[1];
if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
counter++;
}
}
}
}
p1 = p2;
}
if (counter % 2 == 0) {
return false;
} else {
return true;
}
}
containsPolygon(polygon){
const path = polygon.path, len = path.length;
for(let k = 0; k < len; k += 2){
if(this.containsPoint(path[k], path[k+1]) === false) return false;
}
return true;
}
toPoints(){
const path = this.path, len = path.length, result = [];
for(let k = 0; k < len; k += 2) result.push(new Point(path[k], path[k+1]));
return result;
}
toLines(){
const path = this.path, len = path.length, result = [];
for(let k = 0, x = NaN, y; k < len; k += 2){
if(isNaN(x)){
x = path[k];
y = path[k+1];
continue;
}
const line = new Line(x, y, path[k], path[k+1]);
x = line.x1;
y = line.y1;
result.push(line);
}
return result;
}
merge(polygon){
const linesA = this.toLines(), linesB = polygon.toLines(), nodes = [], newLines = [],
pointA = new Point(), pointB = new Point(),
forEachNodes = (pathA, pathB, funcA = null, funcB = null) => {
for(let k = 0, lenA = pathA.length, lenB = pathB.length; k < lenA; k++){
if(funcA !== null) funcA(pathA[k]);
for(let i = 0; i < lenB; i++){
if(funcB !== null) funcB(pathB[i], pathA[k]);
}
}
}
if(this.containsPolygon(polygon)){console.log('this -> polygon');
forEachNodes(linesA, linesB, lineA => newLines.push(lineA), (lineB, lineA) => {
if(lineA.intersectPoint(lineB, pointA) === pointA) newLines.push(pointA.clone());
});
return newLines;
}
//收集所有的交点 (保存至 line)
forEachNodes(linesA, linesB, lineA => lineA.nodes = [], (lineB, lineA) => {
if(lineB.nodes === undefined) lineB.nodes = [];
if(lineA.intersectPoint(lineB, pointA) === pointA){
const node = {
lineA: lineA,
lineB: lineB,
point: pointA.clone(),
disA: pointA.distanceCompare(pointB.set(lineA.x, lineA.y)),
disB: pointA.distanceCompare(pointB.set(lineB.x, lineB.y)),
}
lineA.nodes.push(node);
lineB.nodes.push(node);
nodes.push(node);
}
});
//交点以原点为目标排序
for(let k = 0, sotr = function (a,b){return a.disA - b.disA;}, countA = linesA.length; k < countA; k++) linesA[k].nodes.sort(sotr);
for(let k = 0, sotr = function (a,b){return a.disB - b.disB;}, countB = linesB.length; k < countB; k++) linesB[k].nodes.sort(sotr);
var _loopTypeA, _loopTypeB;
const result_loop = {
lines: null,
loopType: '',
line: null,
count: 0,
indexed: 0,
},
//遍历某条线
loop = (lines, index, loopType) => {
const length = lines.length, indexed = lines.length, model = lines === linesA ? polygon : this;
var line, i = 1;
while(true){
if(loopType === 'next') index = index === length - 1 ? 0 : index + 1;
else if(loopType === 'back') index = index === 0 ? length - 1 : index - 1;
line = lines[index];
result_loop.count = line.nodes.length;
if(result_loop.count !== 0){
result_loop.lines = lines;
result_loop.loopType = loopType;
result_loop.line = line;
result_loop.indexed = index;
if(loopType === 'next') addLine(line, model);
return result_loop;
}
addLine(line, model);
if(indexed === i++) break;
}
},
//更新或创建交点的索引
setNodeIndex = (lines, index, loopType) => {
const line = lines[index], count = line.nodes.length;
if(loopType === undefined) loopType = lines === linesA ? _loopTypeA : _loopTypeB;
if(loopType === undefined) return;
if(line.nodeIndex === undefined){
line.nodeIndex = loopType === 'next' ? 0 : count - 1;
line.nodeState = count === 1 ? 'end' : 'start';
}
else{
if(line.nodeState === 'end' || line.nodeState === ''){
line.nodeState = '';
return;
}
if(loopType === 'next'){
line.nodeIndex += 1;
if(line.nodeIndex === count - 1) line.nodeState = 'end';
else line.nodeState = 'run';
}
else if(loopType === 'back'){
line.nodeIndex -= 1;
if(line.nodeIndex === 0) line.nodeState = 'end';
else line.nodeState = 'run';
}
}
},
//只有在跳线的时候才执行此方法, 如果跳线的话: 某条线上的交点必然在两端;
getLoopType = (lines, index, nodePoint) => {
const line = lines[index], lineNext = lines[index === lines.length - 1 ? 0 : index + 1],
model = lines === linesA ? polygon : this,
isLineBack = newLines.includes(line) === false && model.containsPoint(line.x, line.y) === false,
isLineNext = newLines.includes(lineNext) === false && model.containsPoint(lineNext.x, lineNext.y) === false;
if(isLineBack && isLineNext){
const len = line.nodes.length;
if(len >= 2){
if(line.nodes[len - 1].point.equals(nodePoint)) return 'next';
else if(line.nodes[0].point.equals(nodePoint)) return 'back';
}
else console.warn('路径复杂', line);
}
else if(isLineNext){
return 'next';
}
else if(isLineBack){
return 'back';
}
return '';
},
//添加线至新的形状数组
addLine = (line, model) => {
//if(newLines.includes(line) === false && model.containsPoint(line.x, line.y) === false) newLines.push(line);
if(line.nodes.length === 0) newLines.push(line);
else if(model.containsPoint(line.x, line.y) === false) newLines.push(line);
},
//处理拥有交点的线
computeNodes = v => {
if(v === undefined || v.count === 0) return;
setNodeIndex(v.lines, v.indexed, v.loopType);
//添加交点
const node = v.line.nodes[v.line.nodeIndex];
if(newLines.includes(node.point) === false) newLines.push(node.point);
else return;
var lines = v.lines === linesA ? linesB : linesA,
line = lines === linesA ? node.lineA : node.lineB,
index = lines.indexOf(line);
setNodeIndex(lines, index);
//选择交点状态
var nodeState = line.nodeState !== undefined ? line.nodeState : v.line.nodeState;
if((v.count <= 2 && line.nodes.length > 2) || (v.count > 2 && line.nodes.length <= 2)){
if(line.nodeState === 'start'){
const backLine = v.loopType === 'next' ? v.lines[v.indexed === 0 ? v.lines.length-1 : v.indexed-1] : v.lines[v.indexed === v.lines.length-1 ? 0 : v.indexed+1];
if(newLines.includes(backLine) && backLine.nodes.length === 0){
nodeState = 'run';
}
}
else if(line.nodeState === 'end'){
const nextLine = v.loopType === 'next' ? v.lines[v.indexed === v.lines.length-1 ? 0 : v.indexed+1] : v.lines[v.indexed === 0 ? v.lines.length-1 : v.indexed-1];
const model = v.lines === linesA ? polygon : this;
if(model.containsPoint(nextLine.x, nextLine.y) === false && nextLine.nodes.length === 0){
nodeState = 'run';
}
}
}
switch(nodeState){
//不跳线
case 'run':
if(v.loopType === 'back') addLine(v.line, v.lines === linesA ? polygon : this);
return computeNodes(loop(v.lines, v.indexed, v.loopType));
//跳线
case 'start':
case 'end':
const loopType = getLoopType(lines, index, node.point);
if(loopType !== ''){
if(lines === linesA) _loopTypeA = loopType;
else _loopTypeB = loopType;
if(loopType === 'back') addLine(line, v.lines === linesA ? this : polygon);
return computeNodes(loop(lines, index, loopType));
}
break;
}
}
//获取介入点
var startLine = null;
for(let k = 0, len = nodes.length, node; k < len; k++){
node = nodes[k];
if(node.lineA.nodes.length !== 0){
startLine = node.lineA;
if(node.lineA.nodes.length === 1 && node.lineB.nodes.length > 1){
startLine = node.lineB.nodes[0].lineB;
result_loop.lines = linesB;
result_loop.loopType = _loopTypeB = 'next';
}
else{
result_loop.lines = linesA;
result_loop.loopType = _loopTypeA = 'next';
}
result_loop.line = startLine;
result_loop.count = startLine.nodes.length;
result_loop.indexed = result_loop.lines.indexOf(startLine);
break;
}
}
if(startLine === null){
console.warn('Polygon: 找不到介入点, 终止了合并');
return newLines;
}
computeNodes(result_loop);
return newLines;
}
}
/* RGBColor
parameter:
r, g, b
method:
set(r, g, b: Number): this; //rgb: 0 - 255; 第一个参数可以为 css color
setFormHex(hex: Number): this; //
setFormHSV(h, s, v: Number): this; //h:0-360; s,v:0-100; 颜色, 明度, 暗度
setFormString(str: String): Number; //str: 英文|css color; 返回的是透明度 (如果为 rgba 则返回a; 否则总是返回1)
copy(v: RGBColor): this;
clone(): RGBColor;
getHex(): Number;
getHexString(): String;
getHSV(result: Object{h, s, v}): result; //result: 默认是一个新的Object
getRGBA(alpha: Number): String; //alpha: 0 - 1; 默认 1
getStyle() //.getRGBA()别名
stringToColor(str: String): String; //str 转为 css color; 如果str不是color格式则返回 ""
*/
class RGBColor{
constructor(r = 255, g = 255, b = 255){
this.r = r;
this.g = g;
this.b = b;
}
copy(v){
this.r = v.r;
this.g = v.g;
this.b = v.b;
return this;
}
clone(){
return new this.constructor().copy(this);
}
set(r, g, b){
if(typeof r !== "string"){
this.r = r || 255;
this.g = g || 255;
this.b = b || 255;
}
else this.setFormString(r);
return this;
}
setFormHex(hex){
hex = Math.floor( hex );
this.r = hex >> 16 & 255;
this.g = hex >> 8 & 255;
this.b = hex & 255;
return this;
}
setFormHSV(h, s, v){
h = h >= 360 ? 0 : h;
var s=s/100;
var v=v/100;
var h1=Math.floor(h/60) % 6;
var f=h/60-h1;
var p=v*(1-s);
var q=v*(1-f*s);
var t=v*(1-(1-f)*s);
var r,g,b;
switch(h1){
case 0:
r=v;
g=t;
b=p;
break;
case 1:
r=q;
g=v;
b=p;
break;
case 2:
r=p;
g=v;
b=t;
break;
case 3:
r=p;
g=q;
b=v;
break;
case 4:
r=t;
g=p;
b=v;
break;
case 5:
r=v;
g=p;
b=q;
break;
}
this.r = Math.round(r*255);
this.g = Math.round(g*255);
this.b = Math.round(b*255);
return this;
}
setFormString(color){
if(typeof color !== "string") return 1;
var _color = this.stringToColor(color);
if(_color[0] === "#"){
const len = _color.length;
if(len === 4){
_color = _color.slice(1);
this.setFormHex(parseInt("0x"+_color + "" + _color));
}
else if(len === 7) this.setFormHex(parseInt("0x"+_color.slice(1)));
}
else if(_color[0] === "r" && _color[1] === "g" && _color[2] === "b"){
const arr = [];
for(let k = 0, len = _color.length, v = "", is = false; k < len; k++){
if(is === true){
if(_color[k] === "," || _color[k] === ")"){
arr.push(parseFloat(v));
v = "";
}
else v += _color[k];
}
else if(_color[k] === "(") is = true;
}
this.set(arr[0], arr[1], arr[2]);
return arr[3] === undefined ? 1 : arr[3];
}
return 1;
}
getHex(){
return Math.max( 0, Math.min( 255, this.r ) ) << 16 ^ Math.max( 0, Math.min( 255, this.g ) ) << 8 ^ Math.max( 0, Math.min( 255, this.b ) ) << 0;
}
getHexString(){
return '#' + ( '000000' + this.getHex().toString( 16 ) ).slice( - 6 );
}
getHSV(result){
result = result || {}
var r=this.r/255;
var g=this.g/255;
var b=this.b/255;
var h,s,v;
var min=Math.min(r,g,b);
var max=v=Math.max(r,g,b);
var l=(min+max)/2;
var difference = max-min;
if(max==min){
h=0;
}else{
switch(max){
case r: h=(g-b)/difference+(g < b ? 6 : 0);break;
case g: h=2.0+(b-r)/difference;break;
case b: h=4.0+(r-g)/difference;break;
}
h=Math.round(h*60);
}
if(max==0){
s=0;
}else{
s=1-min/max;
}
s=Math.round(s*100);
v=Math.round(v*100);
result.h = h;
result.s = s;
result.v = v;
return result;
}
getStyle(){
return this.getRGBA(1);
}
getRGBA(alpha){
alpha = typeof alpha === 'number' ? alpha : 1;
return 'rgba('+this.r+','+this.g+','+this.b+','+alpha+')';
}
stringToColor(str){
var _color = "";
for(let k = 0, len = str.length; k < len; k++){
if(str[k] === " ") continue;
_color += str[k];
}
if(_color[0] === "#" || (_color[0] === "r" && _color[1] === "g" && _color[2] === "b")) return _color;
else{
for(let k = 0, len = ColorRefTable.length; k < len; k++){
str = ColorRefTable[k];
if(str[0] === _color) return str[1];
}
}
return "";
}
}
Object.defineProperties(RGBColor.prototype, {
isRGBColor: {
configurable: false,
enumerable: false,
writable: false,
value: true,
}
});
/* Timer 定时器
parameter:
func: Function; //定时器运行时的回调; 默认 null, 如果定义构造器将自动调用一次.restart()方法
speed: Number; //延迟多少毫秒执行一次 func; 默认 3000;
step: Integer; //执行多少次: 延迟speed毫秒执行一次 func; 默认 Infinity;
attribute:
func, speed, step; //这些属性可以随时更改;
//只读属性
readyState: String; //定时器状态; 可能值: '', 'start', 'running', 'done'; ''表示定时器从未启动
number: Number; //运行的次数
method:
start(func, speed): this; //启动定时器 (如果定时器正在运行则什么都不会做)
restart(): undefined; //重启定时器
stop(): undefined; //停止定时器
demo:
//每 3000 毫秒 打印一次 timer.number, 10次后停止
new Timer(timer => {
console.log(timer.number);
if(timer.number === 10) timer.stop();
}, 3000);
*/
class Timer{
#restart = -1;
#speed = 0;
#isRun = false;
#i = 0;
#readyState = ''; //start|running
get number(){
return this.#i;
}
get readyState(){
return this.#i >= this.step ? 'done' : this.#readyState;
}
get running(){
return this.#isRun;
}
constructor(func = null, speed = 3000, step = Infinity){
this.func = func;
this.speed = speed;
this.step = step;
//this.onDone = null;
if(typeof this.func === "function") this.restart();
}
start(func, time){
if(typeof func === 'function') this.func = func;
if(UTILS.isNumber(time) === true) this.speed = time;
this.restart();
return this;
}
restart(){
if(this.#isRun === false){
setTimeout(this._loop, this.speed);
this.#isRun = true;
this.#restart = -1;
this.#i = 0;
this.#readyState = 'start';
}
else{
this.#restart = Date.now();
this.#speed = this.speed;
}
}
stop(){
if(this.#isRun === true){
this.#restart = -1;
this.#i = this.step;
}
}
_loop = () => {
//重启计时器
if(this.#restart !== -1){
let gone = Date.now() - this.#restart;
this.#restart = -1;
if(gone >= this.#speed) gone = this.speed;
else{
if(this.#speed === this.speed) gone = this.#speed - gone;
else gone = (this.#speed - gone) / this.#speed * this.speed;
}
setTimeout(this._loop, gone);
this.#i = 1;
if(this.func !== null) this.func(this);
}
//正在运行
else if(this.#i < this.step){
setTimeout(this._loop, this.speed);
this.#i++;
if(this.#readyState !== 'running') this.#readyState = 'running';
if(this.func !== null) this.func(this);
}
//完成
else this.#isRun = false;
}
}
/* SeekPath A*寻路
parameter:
option: Object{
angle: Number, //8 || 16
timeout: Number, //单位为毫秒
size: Number, //每格的宽高
lenX, lenY: Number, //长度
disables: Array[0||1],
heights: Array[Number],
path: Array[], //存放寻路结果 默认创建一个空数组
}
attribute:
size: Number; //每个索引的大小
lenX: Number; //最大长度x (设置此属性时, 你需要重新.initMap(heights);)
lenY: Number; //最大长度y (设置此属性时, 你需要重新.initMap(heights);)
//此属性已废弃 range: Box; //本次的搜索范围, 默认: 0,0,lenX,lenY
angle: Number; //8四方向 或 16八方向 默认 16
timeout: Number; //超时毫秒 默认 500
mapRange: Box; //地图box
//此属性已废弃(run函数不在检测相邻的高) maxHeight: Number; //相邻可走的最大高 默认 6
//只读属性
success: Bool; //只读; 本次搜索是否成功找到终点; (如果为false说明.run()返回的是 距终点最近的路径; 超时也会被判定为false)
path: Array[x, y, z]; //存放.run()返回的路径
map: Map; //地图的缓存数据
method:
initMap(heights: Array[Number]): undefiend; //初始化类时自动调用一次; heights:如果你的场景存在高请定义此参数
run(x, y, x1, y1: Number): Array[x, y, z]; //参数索引坐标
getDots(x, y, a, r): Array[ix, iy]; //获取周围的点 x,y, a:8|16, r:存放结果数组
getLegalPoints(ix, iy, count): Array[x, y, z]; //获取 ix, iy 周围 合法的, 相邻的 count 个点
demo:
const sp = new SeekPath({
angle: 16,
timeout: 500,
//maxHeight: 6,
size: 10,
lenX: 1000,
lenY: 1000,
}),
path = sp.run(0, 0, 1000, 1000);
console.log(sp);
*/
class SeekPath{
static _open = []
static _dots = [] //.run() .getLegalPoints()
static dots4 = []; //._check()
static _sort = function (a, b){return a["f"] - b["f"];}
#map = null;
#path = null;
#success = true;
#halfX = 50;
#halfY = 50;
#size = 10;
#lenX = 10;
#lenY = 10;
constructor(option = {}){
this.angle = (option.angle === 8 || option.angle === 16) ? option.angle : 16; //8四方向 或 16八方向
this.timeout = option.timeout || 500; //超时毫秒
//this.maxHeight = option.maxHeight || 6;
this.mapRange = new Box();
this.size = option.size || 10;
this.lenX = option.lenX || 10;
this.lenY = option.lenY || 10;
this.#path = Array.isArray(option.path) ? option.path : [];
this.initMap(option.disable, option.height);
option = undefined
}
//this.#map[x][y] = Object{height: 此点的高,默认0, is: 此点是否可走,默认1(disable)};
get map(){
return this.#map;
}
//this.#path = Array[x,y,z]
get path(){
return this.#path;
}
get success(){
return this.#success;
}
get size(){
return this.#size;
}
set size(v){
this.#size = v;
v = v / 2;
this.#halfX = v * this.#lenX;
this.#halfY = v * this.#lenY;
}
get lenX(){
return this.#lenX;
}
set lenX(v){
this.#lenX = v;
v = this.#size / 2;
this.#halfX = v * this.#lenX;
this.#halfY = v * this.#lenY;
}
get lenY(){
return this.#lenY;
}
set lenY(v){
this.#lenY = v;
v = this.#size / 2;
this.#halfX = v * this.#lenX;
this.#halfY = v * this.#lenY;
}
toScene(n, v){ //n = "x|y"
//n = n === "y" ? "lenY" : "lenX";
if(n === "y" || n === "z") return v * this.#size - this.#halfY;
return v * this.#size - this.#halfX;
}
toIndex(n, v){
//n = n === "y" ? "lenY" : "lenX";
if(n === "y" || n === "z") return Math.round((this.#halfY + v) / this.#size);
return Math.round((this.#halfX + v) / this.#size);
}
initMap(disable, height){
disable = Array.isArray(disable) === true ? disable : null;
height = Array.isArray(height) === true ? height : null;
const lenX = this.lenX, lenY = this.lenY;
var getHeight = (ix, iy) => {
if(height === null) return 0;
ix = height[ix * lenY + iy];
if(ix === undefined) return 0;
return ix;
},
getDisable = (ix, iy) => {
if(disable === null) return 1;
ix = disable[ix * lenY + iy];
if(ix === undefined) return 0;
return ix;
},
map = []//new Map();
for(let x = 0, y, m; x < lenX; x++){
m = []//new Map();
for(y = 0; y < lenY; y++) m[y] = {x:x, y:y, height:getHeight(x, y), is:getDisable(x, y), g:0, h:0, f:0, p:null, id:""}//m.set(y, {x:x, y:y, height:getHeight(x, y), g:0, h:0, f:0, p:null, id:""});
map[x] = m;//map.set(x, m);
}
this.#map = map;
this._id = -1;
this._updateID();
this.mapRange.set(0, 0, this.#lenX-1, this.#lenY-1);
map = disable = height = getHeight = undefined;
}
getLegalPoints(ix, iy, count, result = []){
const _dots = SeekPath._dots;
result.length = 0;
result[0] = this.#map[ix][iy];
count += 1;
while(result.length < count){
for(let k = 0, i, n, d, len = result.length; k < len; k++){
n = result[k];
this.getDots(n.x, n.y, this.angle, _dots);
for(i = 0; i < this.angle; i += 2){
d = this.#map[_dots[i]][_dots[i+1]];
if(d.is === 1 && this.mapRange.containsPoint(d.x, d.y) && !result.includes(d)){
if(Math.abs(n.x - d.x) + Math.abs(n.y - d.y) === 2 && this._check(n, d)){
result.push(d);
}
}
}
}
}
result.splice(0, 1);
return result;
}
getLinePoints(now, next, count, result = []){
if(count === 1) return result[0] = next;
if(count % 2 === 0) count += 1;
const len = Math.floor(count / 2),
nowPoint = UTILS.emptyPoint,
angle90 = UTILS.toAngle(90);
var i, ix, iy, n, nn = next;
nowPoint.set(now.x, now.y).rotate(next, angle90); //now 以 next 为原点顺时针旋转 90 度
var disX = nowPoint.x - next.x,
disY = nowPoint.y - next.y;
for(i = 0; i < len; i++){
ix = disX + disX * i + next.x;
iy = disY + disY * i + next.y;
n = this.#map[ix][iy];
if(n.is === 1) nn = n;
result[len-1-i] = nn;
}
result[len] = next;
nn = next
nowPoint.set(now.x, now.y).rotate(next, -angle90);
disX = nowPoint.x - next.x;
disY = nowPoint.y - next.y;
for(i = 0; i < len; i++){
ix = disX + disX * i + next.x;
iy = disY + disY * i + next.y;
n = this.#map[ix][iy];
if(n.is === 1) nn = n;
result[len+1+i] = nn;
}
return result;
}
getDots(x, y, a, r = []){ //获取周围的点 x,y, a:8|16, r:存放结果数组
r.length = 0;
const x_1 = x-1, x1 = x+1, y_1 = y-1, y1 = y+1;
if(a === 16) r.push(x_1, y_1, x, y_1, x1, y_1, x_1, y, x1, y, x_1, y1, x, y1, x1, y1);
else r.push(x, y_1, x, y1, x_1, y, x1, y);
}
_updateID(){ //更新标记
this._id++;
this._openID = "o_"+this._id;
this._closeID = "c_"+this._id;
}
_check(dotA, dotB){ //检测 a 是否能到 b
//获取 dotB 周围的4个点 并 遍历这4个点
this.getDots(dotB.x, dotB.y, 8, SeekPath.dots4);
for(let k = 0, x, y; k < 8; k += 2){
x = SeekPath.dots4[k];
y = SeekPath.dots4[k+1];
if(this.mapRange.containsPoint(x, y) === false) continue;
//找出 dotA 与 dotB 相交的两个点:
if(Math.abs(dotA.x - x) + Math.abs(dotA.y - y) === 1){
//如果其中一个交点是不可走的则 dotA 到 dotB 不可走, 既返回 false
if(this.#map[x][y].is === 0) return false;
}
}
return true;
}
run(x, y, x1, y1, path = this.#path){
path.length = 0;
if(this.#map === null || this.mapRange.containsPoint(x, y) === false) return path;
var _n = this.#map[x][y];
if(_n.is === 0) return path;
const _sort = SeekPath._sort,
_open = SeekPath._open,
_dots = SeekPath._dots,
time = Date.now();
//var isDot = true,
var suc = _n, k, mhd, g, h, f, _d;
_n.g = 0;
_n.h = _n.h = Math.abs(x1 - x) * 10 + Math.abs(y1 - y) * 10;
_n.f = _n.h;
_n.p = null;
this._updateID();
_n.id = this._openID;
_open.push(_n);
while(_open.length !== 0){
if(Date.now() - time > this.timeout) break;
_open.sort(_sort);
_n = _open.shift();
if(_n.x === x1 && _n.y === y1){
suc = _n;
break;
}
if(suc.h > _n.h) suc = _n;
_n.id = this._closeID;
this.getDots(_n.x, _n.y, this.angle, _dots);
for(k = 0; k < this.angle; k += 2){
_d = this.#map[_dots[k]][_dots[k+1]];
if(_d.id === this._closeID || _d.is === 0 || this.mapRange.containsPoint(_d.x, _d.y) === false) continue;
mhd = Math["abs"](_n["x"] - _d.x) + Math["abs"](_n["y"] - _d.y);
g = _n["g"] + (mhd === 1 ? 10 : 14);
h = Math["abs"](x1 - _d.x) * 10 + Math["abs"](y1 - _d.y) * 10;
f = g + h;
if(_d.id !== this._openID){
//如果是斜角和8方向:
if(mhd !== 1 && this.angle === 16){
if(this._check(_n, _d)){
_d.g = g;
_d.h = h;
_d.f = f;
_d.p = _n;
_d.id = this._openID;
_open.push(_d);
}
}else{
_d.g = g;
_d.h = h;
_d.f = f;
_d.p = _n;
_d.id = this._openID;
_open.push(_d);
}
}
else if(g < _d.g){
_d.g = g;
_d.f = g + _d.h;
_d.p = _n;
}
}
}
this.#success = suc === _n;
while(suc !== null){
path.unshift(suc);
//path.unshift(this.toScene("x", suc["x"]), suc["height"], this.toScene("y", suc["y"]));
suc = suc["p"];
}
_open.length = _dots.length = 0;
return path;
}
}
/* RunningList
如果触发过程中删除(回调函数中删除正在遍历的数组), 不仅 len 没有变(遍历前定义的len没有变, 真实的len随之减少), 而且还会漏掉一个key;
*/
class RunningList{
/* static getProxy(runName){
return new Proxy(new RunningList(runName), {
get(tar, key){
},
set(tar, key, val){
}
});
} */
constructor(runName = 'update'){
this._running = false;
this._list = [];
this._delList = [];
this._runName = runName;
}
get length(){
return this._list.length;
}
add(v){
if(!this._list.includes(v)) this._list.push(v);
}
clear(){
this._list.length = 0;
this._delList.length = 0;
}
push(...v){
v.forEach(_v => this._list.push(_v));
}
splice(v){
if(this._running === true){
if(!this._delList.includes(v)) this._delList.push(v);
}
else{
const i = this._list.indexOf(v);
if(i !== -1) this._list.splice(i, 1);
}
}
update(){
var k, len = this._list.length;
this._running = true;
if(this._runName !== ''){
for(k = 0; k < len; k++) this._list[k][this._runName]();
}else{
for(k = 0; k < len; k++) this._list[k]();
}
this._running = false;
var i;
len = this._delList.length;
for(k = 0; k < len; k++){
//this.splice(this._delList[k]);
i = this._list.indexOf(this._delList[k]);
if(i !== -1) this._list.splice(i, 1);
}
this._delList.length = 0;
}
}
/* TweenValue (从 原点 以规定的时间到达 终点)
parameter: origin, end, time, onUpdate, onEnd;
attribute:
origin: Object; //原点(起点)
end: Object; //终点
time: Number; //origin 到 end 花费的时间
onUpdate: Function; //更新回调; 一个回调参数 origin; 默认null;
onEnd: Function; //结束回调; 没有回调参数; 默认null; (如果返回的是"restart"将不从队列删除, 你可以在onEnd中更新.end不间断的继续补间)
method:
reset(origin, end: Object): undefined; //更换 .origin, .end; 它会清除其它对象的缓存属性
reverse(): undefined; //this.end 复制 this.origin 的原始值
update(): undefined; //Tween 通过此方法统一更新 TweenValue
demo:
//init Tween:
const tween = new Tween(),
animate = function (){
requestAnimationFrame(animate);
tween.update();
}
//init TweenValue:
const v1 = new Tween.Value({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v));
animate();
tween.start(v1);
*/
class TweenValue{
constructor(origin = {}, end = {}, time = 500, onUpdate = null, onEnd = null, onStart = null){
this.origin = origin;
this.end = end;
this.time = time;
this.onUpdate = onUpdate;
this.onEnd = onEnd;
this.onStart = onStart;
//以下属性不能直接设置
this._r = null;
this._t = 0;
this._v = Object.create(null);
}
_start(){
var v = "";
for(v in this.origin) this._v[v] = this.origin[v];
this._t = Date.now();
//this.update();
}
reset(origin, end){
this.origin = origin;
this.end = end;
this._v = Object.create(null);
}
reverse(){
var n = "";
for(n in this.origin) this.end[n] = this._v[n];
}
update(){
if(this["_r"] !== null){
var ted = Date["now"]() - this["_t"];
if(ted >= this["time"]){
for(ted in this["origin"]) this["origin"][ted] = this["end"][ted];
if(this["onEnd"] !== null){
if(this["onEnd"](this) === "restart"){
if(this["onUpdate"] !== null) this["onUpdate"](this["origin"]);
this["_start"]();
}
else this["_r"]["stop"](this);
}
else this["_r"]["stop"](this);
}
else{
ted = ted / this["time"];
let n = "";
for(n in this["origin"]) this["origin"][n] = ted * (this["end"][n] - this["_v"][n]) + this["_v"][n];
if(this["onUpdate"] !== null) this["onUpdate"](this["origin"]);
}
}
}
}
Object.defineProperties(TweenValue.prototype, {
isTweenValue: {
configurable: false,
enumerable: false,
writable: false,
value: true,
}
});
/* TweenAlone (相对于 TweenValue 此类可以独立补间, 不需要 Tween)
demo:
const v1 = new TweenAlone({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v)),
animate = function (){
requestAnimationFrame(animate);
v1.update();
}
animate();
v1.start();
*/
class TweenAlone extends TweenValue{
constructor(origin, end, time, onUpdate, onEnd, onStart){
super(origin, end, time, onUpdate, onEnd, onStart);
}
start(){
if(this.onStart !== null) this.onStart();
this._r = this;
this._start();
}
stop(){
this._r = null;
}
}
/* Tween 动画补间 (TweenValue 的root, 可以管理多个TweenValue)
parameter:
attribute:
method:
start(value: TweenValue): undefined;
stop(value: TweenValue): undefined;
static:
Value: TweenValue;
demo:
//init Tween:
const tween = new Tween(),
animate = function (){
requestAnimationFrame(animate);
tween.update();
}
//init TweenValue:
const v2 = new Tween.Value({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v), v => {
v2.reverse(); //v2.end 复制起始值
return "restart"; //返回"restart"表示不删除队列, 需要继续补间
});
animate();
tween.start(v2);
*/
class Tween extends RunningList{
static Value = TweenValue;
constructor(){
super();
}
start(value){
if(value.onStart !== null) value.onStart();
if(value._r === null) this.push(value);
value._r = this;
value._start(this);
}
stop(value){
if(value._r !== null) this.splice(value);
value._r = null;
}
}
/* TweenTarget 朝着轴插值(有效的跟踪动态目标, 注意此类需要配合 RunningList 类使用, 因为此类在任何情况下都没有阻止你调用.update()方法)
parameter:
v1 = {x: 0},
v2 = {x: 100},
distance = 1, //每次移动的距离
onUpdate = null, //
onEnd = null
attribute:
v1: Object; //起点
v2: Object; //终点
onUpdate: Function; //
onEnd: Function; //
method:
update(): undefined; //一般在动画循环里执行此方法
updateAxis(): undefined; //更新v1至v2的方向轴 (初始化时构造器自动调用一次)
setDistance(distance: Number): undefined; //设置每次移动的距离 (初始化时构造器自动调用一次)
demo:
const ttc = new TweenTarget({x:0, y:0}, {x:100, y:100}, 10),
//计时器模拟动画循环函数, 每秒执行一次.update()
timer = new Timer(() => {
ttc.update();
console.log('update: ', ttc.v1);
}, 1000, Infinity);
ttc.onEnd = v => {
timer.stop();
console.log('end: ', v);
}
timer.start();
console.log(ttc);
*/
class TweenTarget{
#distance = 1;
#distancePow2 = 1;
#axis = {};
constructor(v1 = {x: 0}, v2 = {x: 100}, distance, onUpdate = null, onEnd = null){
this.v1 = v1;
this.v2 = v2;
this.onUpdate = onUpdate;
this.onEnd = onEnd;
this.setDistance(distance);
this.updateAxis();
}
setDistance(v = 1){
this.#distance = v;
this.#distancePow2 = Math.pow(v, 2);
}
updateAxis(){
var n, v, len = 0;
for(n in this.v1){
v = this.v2[n] - this.v1[n];
len += v * v;
this.#axis[n] = v;
}
len = Math.sqrt(len);
if(len !== 0){
for(n in this.v1) this.#axis[n] *= 1 / len;
}
}
update(){
var n, len = 0;
for(n in this.v1) len += Math.pow(this.v1[n] - this.v2[n], 2);
if(len > this.#distancePow2){
for(n in this.v1) this.v1[n] += this.#axis[n] * this.#distance;
if(this.onUpdate !== null) this.onUpdate(this.v1);
}
else{
for(n in this.v1) this.v1[n] = this.v2[n];
if(this.onEnd !== null) this.onEnd(this.v1);
}
}
}
/* EventDispatcher 自定义事件管理器
parameter:
attribute:
method:
clearEvents(eventName): undefined; //清除eventName列表, 如果 eventName 未定义清除所有事件
customEvents(eventName, eventParam): this; //创建自定义事件 eventParam 可选 默认{}
getParam(eventName): eventParam;
trigger(eventName, callback): undefined; //触发 (callback: 可选)
register(eventName, callback): undefined; //
deleteEvent(eventName, callback): undefined; //
demo:
const eventDispatcher = new EventDispatcher();
eventDispatcher.customEvents("test", {name: "test"});
eventDispatcher.register("test", eventParam => {
console.log(eventParam) //Object{name: "test"}
});
eventDispatcher.trigger("test");
*/
class EventDispatcher{
constructor(){
this._eventsList = {};
this.__eventsList = [];
this.__trigger = "";
}
clearEvents(eventName){
//if(this.__trigger === eventName) return console.warn("EventDispatcher: 清除事件失败");
if(this._eventsList[eventName] !== undefined) this._eventsList[eventName].func = []
else this._eventsList = {}
}
customEvents(eventName, eventParam = {}){
//if(typeof eventName !== "string") return console.warn("EventDispatcher: 注册自定义事件失败");
if(this._eventsList[eventName] !== undefined) return console.warn("EventDispatcher: "+eventName+" 已存在");
//eventParam = eventParam || {}
//if(eventParam.type === undefined) eventParam.type = eventName;
this._eventsList[eventName] = {func: [], param: eventParam}
return this;
}
getParam(eventName){
return this._eventsList[eventName]["param"];
}
trigger(eventName, callback){
//if(this._eventsList[eventName] === undefined) return;
const obj = this._eventsList[eventName];
var k, len = obj.func.length;
if(len !== 0){
if(typeof callback === "function") callback(obj["param"]); //更新参数(eventParam)
//触发过程(如果触发过程中删除事件, 不仅 len 没有变, 而且还会漏掉一个key, 所以在触发过程中删除的事件要特殊处理)
this.__trigger = eventName;
for(k = 0; k < len; k++) obj["func"][k](obj["param"]);
this.__trigger = "";
//触发过程结束
//删除在触发过程中要删除的事件
len = this.__eventsList.length;
for(k = 0; k < len; k++) this.deleteEvent(eventName, this.__eventsList[k]);
this.__eventsList.length = 0;
}
}
register(eventName, callback){
if(this._eventsList[eventName] === undefined) return console.warn("EventDispatcher: "+eventName+" 不存在");
const obj = this._eventsList[eventName];
//if(obj.func.includes(callback) === false) obj.func.push(callback);
//else console.warn("EventDispatcher: 回调函数重复");
obj.func.push(callback);
}
deleteEvent(eventName, callback){
if(this._eventsList[eventName] === undefined) return console.warn("EventDispatcher: "+eventName+" 不存在");
if(this.__trigger === eventName) this.__eventsList.push(callback);
else{
const obj = this._eventsList[eventName], i = obj.func.indexOf(callback);
if(i !== -1) obj.func.splice(i, 1);
}
}
}
export {
UTILS,
ColorRefTable,
Ajax,
IndexedDB,
TreeStruct,
Point,
Line,
Box,
Circle,
Polygon,
RGBColor,
Timer,
SeekPath,
RunningList,
TweenValue,
TweenAlone,
Tween,
TweenTarget,
EventDispatcher,
ShapeRect,
}
