js画布封装之测试旋转

 

依赖:

"use strict";

var __emptyPoint = null, __emptyPointA = 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",
    "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 = {

    get time(){
        return Date.now();
    },

    get isMobile(){
        return /Android|webOS|iPhone|iPod|BlackBerry|SymbianOS|Windows Phone|iPad/i.test(navigator.userAgent);
    },

    get emptyPoint(){
        if(__emptyPoint === null) __emptyPoint = new Point();
        return __emptyPoint;
    },

    get emptyPointA(){
        if(__emptyPointA === null) __emptyPointA = new Point();
        return __emptyPointA;
    },

    get emptyContext(){
        if(__emptyContext === null) __emptyContext = document.createElement("canvas").getContext('2d')
        return __emptyContext;
    },

    get colorTable(){
        return ColorRefTable;
    },
    
    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;

    },

    //获取最后一个点后面的字符(不包含点)
    getExtension(fileName){
        /* let type = "", str = fileName.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(''); */
        return fileName.substring(fileName.lastIndexOf(".")+1);
    },
    get getFileType(){
        console.warn("现在用 getExtension 替代 getFileType");
        return this.getExtension;
    },

    getFileName(fileName){
        return fileName.substring(0, fileName.lastIndexOf("."));
    },

    //删除 string 所有的空格
    deleteSpaceAll(str){
        const len = str.length;
        var result = '';
        for(let i = 0; i < len; i++){
            if(str[i] !== ' ') result += str[i]
        }

        return result
    },

    //str 是否全是中文
    isChains(str){
        return !(/[^\u4E00-\u9FA5]/.test(str));
    },

    //删除 string 两边空格
    removeSpaceSides(string){

        return string.replace(/(^\s*)|(\s*$)/g, "");

    },

    //var str = "abcd[123]efg"; UTILS.replaceText([..."a{123}b], "{", "}", (str: "123") => {return "-"}) //["a", "-", "b"]
    replaceText(strs, s, e, f){
        for(let i = 0, si = -1, str = ""; i < strs.length; i++){
            if(typeof strs[i] !== "string"){
                si = -1;
                str = "";
                continue;
            }
    
            if(si === -1){
                if(strs[i] === s) si = i;
                continue;
            }
    
            if(strs[i] === e){
                strs[i] = f(str);
                i = i-si;
                strs.splice(si, i <= 0 ? 1 : i);
                return this.replaceText(strs, s, e, f);
            }
            
            str += strs[i];
        }
    
        return strs;
    },

    //返回 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));

    },

    getSameScale(oldSize, newSize){
        if(oldSize.width < oldSize.height && newSize.width < newSize.height){
            return newSize.width / oldSize.width;
        }
        if(oldSize.width > oldSize.height && newSize.width > newSize.height){
            return newSize.height / oldSize.height;
        }
        if(oldSize.width / newSize.width < oldSize.height / newSize.height){
            return newSize.height / oldSize.height;
        }
        const aspect = oldSize.width / oldSize.height;
        return aspect < 1 ? aspect * newSize.width / oldSize.width : newSize.width / oldSize.width;
    },

    /* 把 target 以相等的比例缩放至 result 大小
        target, result: Object{width, height}; //也可以是img元素
    */
    setSizeToSameScale(target, result = {width: 100, height: 100}){
        const scale = this.getSameScale(target, result);
        result.width = target.width * scale;
        result.height = target.height * scale;
        return result;
    },

    //小数保留 count 位
    floatKeep(float, count = 3){
        count = Math.pow(10, count);
        return Math.ceil(float * count) / count;
    },

}




/* AnimateLoop 动画循环
parameter:
    loopStep: Number; //默认 1000 / 60 (每秒运行60次)
    onupdate: Function(); //更新回调, 默认 null
    onUpdateFPS: Function(fps); //如果定义此参数就在每帧计算并传递fps值, 数值越高越好, 默认 null

attributes:
    onupdate: Func();

    //只读:
    delta: Number;    //延迟
    running: Bool;     //是否正在运行

method:
    play(onupdate: Func): this; //onupdate 可选 (如果动画循环正在运行那么此方法什么都不会做)
    stop(): this;
    update(): undefined; //使用前必须已定义.onupdate 属性 (如果动画循环正在运行那么此方法什么都不会做)

demo: 
    const animateLoop = new AnimateLoop(
        () => console.log(animateLoop.delta), 
        fps => console.log(fps)
    );
    animateLoop.play();
*/
class AnimateLoop{

    #nowTime = 0;
    #oldTime = 0;
    #id = -1;

    get running(){
        return this.#id !== -1;
    }

    get delta(){
        return this.#nowTime - this.#oldTime;
    }
    
    constructor(onupdate = null, onUpdateFPS = null, loopStep = 1000 / 60){
        if(typeof onUpdateFPS !== "function"){
            const animate = () => {
                this.#nowTime = UTILS.time;
                this.#id = requestAnimationFrame(animate);
                if(this.#nowTime - this.#oldTime >= loopStep){
                    this.onupdate();
                    this.#oldTime = this.#nowTime;
                }
            }

            this._animate = animate;
        } else {
            //更新fps
            let old = UTILS.time, frames = 0;
            const updateFPS = () => {
                frames++;
                if (this.#nowTime >= old + 1000){
                    onUpdateFPS(Math.floor((frames * 1000) / (this.#nowTime - old)));
                    old = this.#nowTime;
                    frames = 0;
                }
            },

            //动画循环
            animate = () => {
                this.#nowTime = UTILS.time;
                this.#id = requestAnimationFrame(animate);
                updateFPS();
                if(this.#nowTime - this.#oldTime >= loopStep){
                    this.onupdate();
                    this.#oldTime = this.#nowTime;
                }
            }

            this._animate = animate;
        }
        
        this.onupdate = onupdate;
    }

    stop(){
        if(this.#id !== -1){
            cancelAnimationFrame(this.#id);
            this.#id = -1;
            this.#oldTime = this.#nowTime;
        }
        return this;
    }

    play(onupdate){
        if(typeof onupdate === "function") this.onupdate = onupdate;
        if(this.onupdate !== null && this.#id === -1){
            this.#id = requestAnimationFrame(this._animate);
            this.#oldTime = UTILS.time;
        }
        return this;
    }

    update(){
        if(this.#id === -1){
            this.onupdate();
        }
    }

}




/* TweenCache
parameter:
    origin, end: Object{Number...}, 
    time: Number, //origin 到 end 花费的毫秒时间
    onend: Function //

demo:
    const tweenCache = new TweenCache({x:-50}, {x:100}, null, 3000);
    const animateLoop = new AnimateLoop(() => tweenCache.update());

    tweenCache.onend = () => {
        animateLoop.stop();
        tweenCache.reset();
    }

    animateLoop.play();
    tweenCache.start();
*/
class TweenCache{

    #t = 0;
    #v = {};
    #o = {};
    
    constructor(origin, end, time, onend){
        this.origin = origin;
        this.end = end;
        this.time = time;
        this.onend = onend;

        for(let v in origin){
            this.#v[v] = end[v] - origin[v];
            this.#o[v] = origin[v];
        }
    }

    start(){
        this.#t = UTILS.time;
    }

    update(){
        var ted = UTILS.time - this.#t;

        if(ted < this.time){

            ted = ted / this.time; 
            for(let n in this.origin) this.origin[n] = ted * this.#v[n] + this.#o[n];

        } else {
        
            for(ted in this.origin) this.origin[ted] = this.end[ted];
            if(typeof this.onend === "function") this.onend();

        }

    }
    
}




/* TweenTarget
parameter:    
    v1 = {x: 0}, 
    v2 = {x: 100}, 
    distance = 1,    //每次移动的距离
    onend = null    //

attribute:
    v1: Object;             //起点
    v2: Object;             //终点
    onend: Function;         //

method:
    update(): undefined;                        //一般在动画循环里执行此方法
    updateAxis(): undefined;                     //更新v1至v2的方向轴 (初始化时构造器自动调用一次)
    setDistance(distance: Number): undefined;     //设置每次移动的距离 (初始化时构造器自动调用一次)
*/
class TweenTarget{

    #distance = 1;
    #distancePow2 = 1;
    #axis = {};
    get axis(){return this.#axis;}
    get distance(){return this.#distance;}

    constructor(v1 = {x: 0}, v2 = {x: 100}, distance, onend = null){
        this.v1 = v1;
        this.v2 = v2;
        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;
            }
            
        }

        else{

            for(n in this.v1){
                this.v1[n] = this.v2[n];
            }

            if(this.onend) this.onend();

        }
    }

}




/* SecurityDoor 安检门
作用: 有时候我们要给一个功能加一个启禁用锁, 就比如用一个.enable属性表示此功能是否启用, 
a, b是两个使用此功能的人; a 需要把此功能禁用(.enable = false), 
过了一会b也要禁用此功能(.enable = false), 又过了一会a又要在次启用此功能,
此时a让此功能启用了(.enable = true), 很显然这违背了b, 对于b来说此功能还在禁用状态,
实际并非如b所想, 所以当多个人使用此功能时一个.enable满足不了它们;
或许还有其它解决方法就比如让所有使用此功能的人(a,b)加一个属性表示自己是否可以使用此功能,
但我更希望用一个专门的数组去装载它们, 而不是在某个使用者身上都添加一个属性;

parameter:
    list: Array[];

attribute:
    list: Array; //私有, 默认 null
    empty: Bool; //只读, 列表是否为空

method:
    clear()
    equals(v)
    add(v)
    remove(v)
*/
class SecurityDoor{

    #list = null;
    
    get empty(){
        return this.#list === null;
    }

    constructor(list, onchange){
        if(UTILS.emptyArray(list) === false) this.#list = list;
        this._onchange = typeof onchange === "function" ? onchange : null;
    }

    add(sign){
        if(this.#list !== null){
            if(this.#list.includes(sign) === false) this.#list.push(sign);
        }
        else{
            this.#list = [sign];
            if(this._onchange !== null) this._onchange(false);
        }
    }
    
    clear(){
        this.#list = null;
    }

    equals(sign){
        return this.#list !== null && this.#list.includes(sign);
    }

    remove(sign){
        if(this.#list !== null){
            sign = this.#list.indexOf(sign);
            if(sign !== -1){
                if(this.#list.length > 1) this.#list.splice(sign, 1);
                else{
                    this.#list = null;
                    if(this._onchange !== null) this._onchange(true);
                }
            }
        }
    }

}




/* RunningList

*/
class RunningList{

    #runName = "";
    #running = false;
    #list = [];
    #disabls = [];
    get list(){
        return this.#list;
    }

    constructor(runName = 'update'){
        this.#runName = runName;
    }

    clear(){
        this.#list.length = 0;
        this.#disabls.length = 0;
    }

    add(v){
        if(this.#list.includes(v) === false) this.#list.push(v);
        else{
            const i = this.#disabls.indexOf(v);
            if(i !== -1) this.#disabls.splice(i, 1);
        }
    }

    remove(v){
        if(this.#running) this.#disabls.push(v);
        else{
            const i = this.#list.indexOf(v);
            if(i !== -1) this.#list.splice(i, 1);
        }
    }

    update(){
        var len = this.#list.length;
        if(len === 0) return;
        
        var k;
        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.#disabls.length;
        for(k = 0; k < len; k++){
            i = this.#list.indexOf(this.#disabls[k]);
            if(i !== -1) this.#list.splice(i, 1);
        }
        this.#disabls.length = 0;
    }

}




/** 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 = event => {
            if(this.error !== null) this.error(event);
        }

        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:
    appendChild(v: TreeStruct): v;         //v添加到自己的子集
    removeChild(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.appendChild(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;
        
    }

    appendChild(v){
        v.parent = this;
        if(this.children.includes(v) === false) this.children.push(v);
        
        return v;
    }

    removeChild(v){
        const i = this.children.indexOf(v);
        if(i !== -1) this.children.splice(i, 1);
        v.parent = null;

        return v;
    }

    traverse(callback){

        if(callback(this) !== "continue"){

            for(let k = 0, len = this.children.length; k < len; k++){

                this.children[k].traverse(callback);
    
            }

        }

    }

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

    }

}




/* Point
parameter: 
    x = 0, y = 0;

attribute
    x, y: Number;

method:
    set(x, y): this;
    angle(origin): 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;                    //归一
    isClockwise(startPoint): Bool;        //startPoint 到自己是否是顺时针旋转
*/
class Point{

    get isPoint(){return true;}

    constructor(x = 0, y = 0){
        this.x = x;
        this.y = y;
    }

    set(x = 0, y = 0){
        this.x = x;
        this.y = y;

        return this;
    }

    radian(origin){

        return Math.atan2(this.y - origin.y, this.x - origin.x);

    }

    copy(point){
        
        this.x = point.x;
        this.y = point.y;
        return this;
        //return Object.assign(this, point);

    }
    
    clone(){

        return new this.constructor().copy(this);
        //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, radian){
        const c = Math.cos(radian), s = Math.sin(radian), 
        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;
    }

    isClockwise(startPoint){

        return this.x * startPoint.y - this.y * startPoint.x < 0;

    }

    floatKeep(count = 3){
        count = Math.pow(10, count);
        this.x = Math.ceil(this.x * count) / count;
        this.y = Math.ceil(this.y * count) / count;
    }

/*     add(point){
        this.x += point.x;
        this.y += point.y;
        return this;
    }

    addScalar(v){
        this.x += v;
        this.y += v;
        return this;
    }

    sub(point){
        this.x -= point.x;
        this.y -= point.y;
        return this;
    }

    subScalar(v){
        this.x -= v;
        this.y -= v;
        return this;
    }

    multiply(point){
        this.x *= point.x;
        this.y *= point.y;
        return this;
    }

    multiplyScalar(v){
        this.x *= v;
        this.y *= v;
        return this;
    }

    divide(point){
        this.x /= point.x;
        this.y /= point.y;
        return this;
    }
    
    divideScalar(v){
        this.x /= v;
        this.y /= v;
        return this;
    } */

}




/* Line
parameter: x, y, x1, y1: Number;
attribute: x, y, x1, y1: Number;
method:
    set(x, y, x1, y1): this;                    
    copy(line): this;
    clone(): Line;
    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;
    }

    copy(line){
        this.x = line.x;
        this.y = line.y;
        this.x1 = line.x1;
        this.y1 = line.y1;
        return this;
        //return Object.assign(this, line);
    }
    
    clone(){
        return new this.constructor().copy(this);
        //return Object.assign(new this.constructor(), 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;
    }

}




/* 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; //设置大小
    setFromRotate(rotate: Rotate): this;        //根据 rotate 旋转自己
    setFromShapeRect(shapeRect): this;            //ShapeRect 转为 Box (忽略 ShapeRect 的旋转和缩放)
    setFromCircle(circle, inner: Bool): this;    //
    setFromPolygon(polygon, inner = true): this;//
    toArray(array: Array, index: Integer): this;
    copy(box): this;                             //复制
    clone(): Box;                                  //克隆
    center(box): this;                            //设置位置在box居中
    distance(x, y): Number;                     //左上角原点 与 x,y 的直线距离
    distanceFromPoint(x,y, isMax: Bool): Number;//返回点 x,y 距自己四个角的 最大或最小(isMax) 距离
    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;
    }

    posSub(box){
        this.x -= box.x;
        this.y -= box.y;
        return this;
    }

    posSubScalar(v){
        this.x -= v;
        this.y -= v;
        return this;
    }
    
    size(w, h){
        this.w = w;
        this.h = h;
        return this;
    }

    sizeMultiply(box){
        this.w *= box.w;
        this.h *= box.h;
        return this;
    }

    sizeMultiplyScalar(v){
        this.w *= v;
        this.h *= v;
        
        return this;
    }

    setFromRotate(rotate){
        var minX = this.x, minY = this.y, maxX = 0, maxY = 0;
        const point = UTILS.emptyPoint,
        run = function (){
            if(point.x < minX) minX = point.x;
            else if(point.x > maxX) maxX = point.x;
            if(point.y < minY) minY = point.y;
            else if(point.y > maxY) maxY = point.y;
        }

        point.set(this.x, this.y).rotate(rotate.origin, rotate.radian); run();
        point.set(this.mx, this.y).rotate(rotate.origin, rotate.radian); run();
        point.set(this.mx, this.my).rotate(rotate.origin, rotate.radian); run();
        point.set(this.x, this.my).rotate(rotate.origin, rotate.radian); run();

        this.x = minX;
        this.y = minY;
        this.w = maxX - minX;
        this.h = maxY - minY;

        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 this;
        //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));
    } */

    distanceFromPoint(x, y, isMax = true){
        x -= this.x; y -= this.y;
        const cx = this.w / 2 < x ? (isMax === true ? 0 : this.w) : (isMax === true ? this.w : 0), 
        cy = this.h / 2 < y ? (isMax === true ? 0 : this.h) : (isMax === true ? this.h : 0);
        return Math.sqrt(Math.pow(x - cx, 2) + Math.pow(y - cy, 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"];
    }

}




/* 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;
    expand(circle: Circle): undefined;                     //扩容; 把circle合并到this
    containsPoint(point: Point): 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;
    }

    setFromPoint(point){
        this.x = point.x;
        this.y = point.y;
        return this;
    }

    setFromBox(box, inner = true){
        this.x = box.w / 2 + box.x;
        this.y = box.h / 2 + box.y;

        if(inner === true) this.r = Math.min(box.w, box.h) / 2;
        else this.r = Math.sqrt(box.w + box.h);

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

    }

    expand(circle){

    }

    equals(circle){

        return circle.x === this.x && circle.y === this.y && circle.r === this.r;

    }

    containsPoint(point){

        return (Math.pow(point.x - this.x, 2) + Math.pow(point.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));
    
    }

}




/* 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{

    get isRGBColor(){return true;}

    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 = UTILS.isNumber(r) ? r : 255;
            this.g = UTILS.isNumber(g) ? g : 255;
            this.b = UTILS.isNumber(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 = 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;

        return UTILS.colorTable[_color] || "";
    }

}




/* Timer 定时器

parameter:
    func: Function; //定时器运行时的回调; 默认 null, 如果定义构造器将自动调用一次.restart()方法
    speed: Number; //延迟多少毫秒执行一次 func; 默认 3000;
    step: Integer; //执行多少次: 延迟speed毫秒执行一次 func; 默认 Infinity;
    
attribute:
    func, speed, step;    //这些属性可以随时更改;

method:
    start(func, speed): this;    //启动定时器 (如果定时器正在运行则什么都不会做)
    stop(): undefined;            //停止定时器

demo:
    //每 3000 毫秒 打印一次 timer.number
    new Timer(timer => {
        console.log(timer.number);
    }, 3000);

*/
class Timer{

    #i = 0;
    #id = -1;

    get running(){
        return this.#id !== -1;
    }

    constructor(func = null, speed = 3000, step = Infinity, isStart = true){
        this.func = func;
        this.speed = speed;
        this.step = step;
        this.onend = null;
        
        const animate = () => {
            this.#i++;
            this.func(this);
            if(this.#id !== -1){
                if(this.#i < this.step) this.#id = setTimeout(animate, this.speed); 
                else{
                    this.#id = -1;
                    if(this.onend !== null) this.onend(this);
                }
            }
        }

        this._animate = animate;
        if(isStart === true && typeof this.func === "function"){
            this.#id = setTimeout(this._animate, this.speed);
            this.#i = 0;
        }
    }

    restart(){
        if(this.#id !== -1) clearTimeout(this.#id);
        this.#id = setTimeout(this._animate, this.speed);
        this.#i = 0;
    }

    start(func, speed){
        if(this.#id === -1){
            if(typeof func === 'function') this.func = func;
            if(UTILS.isNumber(speed) === true) this.speed = speed;
            this.#id = setTimeout(this._animate, this.speed);
            this.#i = 0;
        }
    }

    stop(){
        if(this.#id !== -1){
            clearTimeout(this.#id);
            this.#id = -1;
        }
    }

}




/* 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[node];    //存放.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, result = []): Array[node];    //获取 ix, iy 周围 合法的, 相邻的 count 个点

demo:
    const sp = new SeekPath({
        angle: 16,
        timeout: 500,
        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;
    }

    getNode(sx, sy){
        sx = this.#map[Math.floor((this.#halfX + sx) / this.#size)];
        if(sx !== undefined) return sx[Math.floor((this.#halfY + sy) / this.#size)];
    }

    node(ix, iy){
        ix = this.#map[ix];
        if(ix !== undefined) return ix[iy];
    }
    
    toScene(n, v){ //n = "x|y"
        //n = n === "y" ? "lenY" : "lenX";
        if(n === "x") return v * this.#size - this.#halfX;
        return v * this.#size - this.#halfY;
    }
    
    toIndex(n, v){
        //n = n === "y" ? "lenY" : "lenX";
        if(n === "x") return Math.floor((this.#halfX + v) / this.#size);
        return Math.floor((this.#halfY + 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 = []){  //不包括 ix, iy
        const sTime = UTILS.time, _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);
                        }
                    }
                }
            }

            if(UTILS.time - sTime >= this.timeout) break;
        }
    
        result.splice(0, 1);
        return result;
    }

    getLinePoints(now, next, count, result = []){ //不包括 now 
        if(count % 2 !== 0) count += 1;

        const len = count / 2, angle90 = 90/180*Math.PI;

        var i, ix, iy, n, nn = next, is = false;

        UTILS.emptyPoint.set(now.x, now.y).rotate(next, angle90);
        var disX = UTILS.emptyPoint.x - next.x, 
        disY = UTILS.emptyPoint.y - next.y;
        
        for(i = 0; i < len; i++){
            if(is){
                result[len-1-i] = nn;
                continue;
            }
            ix = disX + disX * i + next.x;
            iy = disY + disY * i + next.y;

            n = this.#map[ix][iy];
            if(n.is === 1) nn = n;
            else is = true;
            result[len-1-i] = nn;
        }

        //result[len] = next;
        is = false;
        nn = next;

        UTILS.emptyPoint.set(now.x, now.y).rotate(next, -angle90);
        disX = UTILS.emptyPoint.x - next.x, 
        disY = UTILS.emptyPoint.y - next.y;

        for(i = 0; i < len; i++){
            if(is){
                result[len+i] = nn;
                continue;
            }
            ix = disX + disX * i + next.x;
            iy = disY + disY * i + next.y;

            n = this.#map[ix][iy];
            if(n.is === 1) nn = n;
            else is = true;
            result[len+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);
    }

    getDisMHD(nodeA, nodeB){
        return Math.abs(nodeA.x - nodeB.x) + Math.abs(nodeA.y - nodeB.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); //0为起始点,length-1为结束点
            //path.unshift(this.toScene("x", suc["x"]), suc["height"], this.toScene("y", suc["y"]));
            suc = suc["p"];
        }
        
        _open.length = _dots.length = 0;
        
        return path;
    }

}




/* 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);

    //缓动
    const end = 100;
    var step, left = 0;
    new Timer(timer => {
        step = (end - left) / 10;
        left += step;
        if(Math.ceil(left) === end) timer.stop();
    }, 1000);
*/
class TweenValue{

    constructor(origin = {}, end = {}, time = 500, onEnd = null, onUpdate = 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];
        if(this.onStart !== null) this.onStart(this);
        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"]);
            }

        }

    }

}




/* 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){
        this.add(value);
        value._r = this;
        value._start();
    }

    stop(value){
        this.remove(value);
        value._r = null;
    }

}




/* EventDispatcher 自定义事件管理器
parameter: 
attribute: 

method:
    clearEvents(eventName): undefined;             //清除eventName列表, 如果 eventName 未定义清除所有事件
    customEvents(eventName, eventParam): this;    //创建自定义事件 eventParam 可选 默认 undefined
    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, 
    TweenCache,
    AnimateLoop,
    Ajax, 
    IndexedDB, 
    TreeStruct, 
    Point, 
    Line, 
    Box, 
    Circle, 
    Polygon, 
    RGBColor, 
    Timer, 
    SeekPath, 
    RunningList, 
    TweenValue, 
    Tween, 
    TweenTarget, 
    EventDispatcher, 
    SecurityDoor,
}

 

"use strict";
import {
    UTILS, 
    Box, 
    EventDispatcher,
    Point,
    AnimateLoop,
    TreeStruct,
    Timer,
} from './Utils.js';

/* Touch 事件
touchstart
当用户在触摸平面上放置了一个触点时触发。事件的目标 element 将是触点位置上的那个目标 element

touchend
当一个触点被用户从触摸平面上移除（即用户的一个手指或手写笔离开触摸平面）时触发。当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。
事件的目标 element 与触发 touchstart 事件的目标 element 相同，即使 touchend 事件触发时，触点已经移出了该 element 。
已经被从触摸平面上移除的触点，可以在 changedTouches 属性定义的 TouchList 中找到。

touchmove
当用户在触摸平面上移动触点时触发。事件的目标 element 和触发 touchstart 事件的目标 element 相同，即使当 touchmove 事件触发时，触点已经移出了该 element 。
当触点的半径、旋转角度以及压力大小发生变化时，也将触发此事件。
注意： 不同浏览器上 touchmove 事件的触发频率并不相同。这个触发频率还和硬件设备的性能有关。因此决不能让程序的运作依赖于某个特定的触发频率。

touchcancel
当触点由于某些原因被中断时触发。有几种可能的原因如下（具体的原因根据不同的设备和浏览器有所不同）：
由于某个事件出现而取消了触摸：例如触摸过程被弹窗打断。
触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。
当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch 对象被取消。


TouchEvent.changedTouches
这个 TouchList 对象列出了和这个触摸事件对应的 Touch 对象。
对于 touchstart 事件，这个 TouchList 对象列出在此次事件中新增加的触点。
对于 touchmove 事件，列出和上一次事件相比较，发生了变化的触点。
对于 touchend 事件，changedTouches 是已经从触摸面的离开的触点的集合（也就是说，手指已经离开了屏幕/触摸面）。

TouchEvent.targetTouches
targetTouches 是一个只读的 TouchList 列表，包含仍与触摸面接触的所有触摸点的 Touch 对象。touchstart (en-US)事件触发在哪个element内，它就是当前目标元素。

TouchEvent.touches
一个 TouchList，其会列出所有当前在与触摸表面接触的 Touch 对象，不管触摸点是否已经改变或其目标元素是在处于 touchstart 阶段。

1 event.changedTouches 上一次的触点列表 
1 event.targetTouches 某个元素的当前触点列表 
1 event.touches 屏幕上所有的当前触点列表 
5 touches： Array[Object{
    clientX, clientY
    pageX, pageY
    screenX, screenY
    radiusX, radiusY 
    force
    identifier
    rotationAngle
    target
}]

*/

const ElementUtils = {

    getRect(elem){
        return elem.getBoundingClientRect();
    },

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

    createCanvas(w = 1, h = 1, className = ""){
        const canvas = document.createElement("canvas");
        canvas.width = w;
        canvas.height = h;
        canvas.className = className;
        return canvas;
    },

    createContext(w = 1, h = 1, alpha = true){
        const canvas = document.createElement("canvas"),
        context = canvas.getContext("2d", {alpha: alpha});
        canvas.width = w;
        canvas.height = h;
        return context;
    },

    createElem(tagName, className = "", textContent = ""){
        const elem = document.createElement(tagName);
        elem.className = className;
        elem.textContent = textContent;
        return elem;
    },

    createInput(type, className = ""){
        const input = document.createElement("input");
        input.type = type;
        input.className = className;
        return input;
    },

    appendChilds(parentElem, ...nodes){
        const msgContainer = document.createDocumentFragment();
        for(let k = 0, len = nodes.length; k < len; k++) msgContainer.appendChild(nodes[k]);
        parentElem.appendChild(msgContainer);
    },

    removeChild(elem){
        if(elem.parentElement) elem.parentElement.removeChild(elem);
    },

    rotate(elem, a, o = "center"){
        elem.style.transformOrigin = o;
        elem.style.transform = `rotate(${a}deg)`;
    },

    bindButton(elem, callback, ondown = null){
        var timeout = 0;

        const param = {offsetX: 0, offsetY: 0},

        onUp = event => {
            elem.removeEventListener('pointerup', onUp);
            if(Date.now() - timeout < 300) callback(event, param);
        },

        onDown = event => {
            timeout = Date.now();
            param.offsetX = event.offsetX;
            param.offsetY = event.offsetY;
            if(ondown !== null) ondown(event, param);
            elem.removeEventListener('pointerup', onUp);
            elem.addEventListener('pointerup', onUp);
        }

        elem.addEventListener('pointerdown', onDown);

        return function (){
            elem.removeEventListener('pointerup', onUp);
            elem.removeEventListener('pointerdown', onDown);
        }
    },

    bindMobileButton(elem, callback, ondown = null){
        var timeout = 0, rect;

        const param = {offsetX: 0, offsetY: 0},
        
        onUp = event => {
            event.preventDefault();
            if(Date.now() - timeout < 300) callback(event, param);
        },

        onDown = event => {
            event.preventDefault();
            timeout = Date.now();
            rect = elem.getBoundingClientRect();
            param.offsetX = event.targetTouches[0].pageX - rect.x;
            param.offsetY = event.targetTouches[0].pageY - rect.y;
            if(ondown !== null) ondown(event, param);
        }

        elem.addEventListener('touchend', onUp);
        elem.addEventListener('touchstart', onDown);

        return function (){
            elem.removeEventListener('touchend', onUp);
            elem.removeEventListener('touchstart', onDown);
        }
    },

}


function gradientColor(gradient, colors, close = false){
    if(UTILS.emptyArray(colors)) return;
    const len = colors.length;
    if(close === false){
        for(let k = 0, _len = len - 1; k < len; k++) gradient.addColorStop(k / _len, colors[k]);
    }else{
        for(let k = 0; k < len; k++) gradient.addColorStop(k / len, colors[k]);
        gradient.addColorStop(1, colors[0]);
    }
}

function gradientColorSymme(gradient, colors){
    if(Array.isArray(colors) === true){

        const len = Math.round(colors.length/2), count = len * 2;
        
        for(let k = 0; k < len; k++){
            gradient.addColorStop(k / count, colors[k]);
        }

        for(let k = len, i = len; k >= 0; k--, i++){
            gradient.addColorStop(i / count, colors[k]);
        }
        
    }
}

/* CanvasElementEvent domElement 绑定 移动 或 桌面 down, move, up 事件 (使两端的事件触发逻辑和参数保持一致)
parameter: null
attributes: null
method: 
    initEvent(domElement, list, box): function;
    initEventMobile(domElement, list, box): function;
        domElement: HTMLCanvasElement
        list: Array[CanvasEventTarget]
        box: Box
        function: 删除绑定的事件
*/
class CanvasElementEvent{

    constructor(){

    }

    initEvent(domElement, list, box){
        const ondown = event => {
            const sTime = UTILS.time;
            
            let i, ci, len = list.length;
            //为什么不用event.offsetX, 而是 rect, 用rect是为了鼠标即使移出了目标dom的范围其参数值也是有效的
            const targets = [], rect = domElement.getBoundingClientRect(),
            _offsetX = event.pageX - rect.x,
            _offsetY = event.pageY - rect.y,
            offsetX = _offsetX + box.x, 
            offsetY = _offsetY + box.y;
            
            for(i = 0; i < len; i++){
                ci = list[i];
                if(ci.visible === false) continue;
                if(ci.position === ""){
                    if(ci.box.containsPoint(offsetX, offsetY) === false) continue;
                } else if(ci.position === "fixed"){
                    if(ci.box.containsPoint(_offsetX, _offsetY) === false) continue;
                }
                if(targets.length === 0) targets[0] = ci;
                else{
                    if(ci.index === targets[0].index) targets.push(ci);
                    else if(ci.index > targets[0].index){
                        targets.length = 0;
                        targets[0] = ci;
                    }
                }
            }
            
            len = targets.length;

            if(len !== 0){
                
                const info = {targets: targets, target: null, offsetX: offsetX, offsetY: offsetY, delta: 0},
                
                onmove = event => {
                    info.offsetX = event.pageX - rect.x + box.x, 
                    info.offsetY = event.pageY - rect.y + box.y;
                    info.delta = UTILS.time - sTime;
                    for(i = 0; i < len; i++){
                        info.target = targets[i];
                        targets[i].trigger("move", info, event);
                    }
                },
        
                onup = event => {
                    domElement.releasePointerCapture(event.pointerId);
                    domElement.removeEventListener("pointerup", onup);
                    domElement.removeEventListener("pointermove", onmove);
                    info.delta = UTILS.time - sTime;
                    for(i = 0; i < len; i++){
                        info.target = targets[i];
                        targets[i].trigger("up", info, event);
                    }
                }

                domElement.setPointerCapture(event.pointerId);
                domElement.addEventListener("pointerup", onup);
                domElement.addEventListener("pointermove", onmove);
                for(i = 0; i < len; i++){
                    info.target = targets[i];
                    targets[i].trigger("down", info, event);
                }

            }
            
        }

        domElement.addEventListener("pointerdown", ondown);
        return function (){
            domElement.removeEventListener("pointerdown", ondown);
        }
    }

    initEventMobile(domElement, list, box){

        const ondown = event => {
            const sTime = UTILS.time;
            event.preventDefault();
            let i, ci, len = list.length;

            const targets = [], rect = domElement.getBoundingClientRect(),
            _offsetX = event.targetTouches[0].pageX - rect.x,
            _offsetY = event.targetTouches[0].pageY - rect.y,
            offsetX = _offsetX + box.x, 
            offsetY = _offsetY + box.y;

            for(i = 0; i < len; i++){
                ci = list[i];
                if(ci.visible === false) continue;
                if(ci.position === ""){
                    if(ci.box.containsPoint(offsetX, offsetY) === false) continue;
                } else if(ci.position === "fixed"){
                    if(ci.box.containsPoint(_offsetX, _offsetY) === false) continue;
                }
                if(targets.length === 0) targets[0] = ci;
                else{
                    if(ci.index === targets[0].index) targets.push(ci);
                    else if(ci.index > targets[0].index){
                        targets.length = 0;
                        targets[0] = ci;
                    }
                }
            }
            
            len = targets.length;

            if(len !== 0){

                const info = {targets: targets, target: null, offsetX: offsetX, offsetY: offsetY, delta: 0},
                
                onmove = event => {
                    info.offsetX = event.targetTouches[0].pageX - rect.x + box.x;
                    info.offsetY = event.targetTouches[0].pageY - rect.y + box.y;
                    info.delta = UTILS.time - sTime;
                    for(i = 0; i < len; i++){
                        info.target = targets[i];
                        targets[i].trigger("move", event);
                    }
                },
        
                onup = event => {
                    domElement.removeEventListener("touchmove", onmove);
                    domElement.removeEventListener("touchend", onup);
                    domElement.removeEventListener("touchcancel", onup);
                    info.delta = UTILS.time - sTime;
                    for(i = 0; i < len; i++){
                        info.target = targets[i];
                        targets[i].trigger("up", info, event)
                    }
                }

                domElement.addEventListener("touchcancel", onup);
                domElement.addEventListener("touchend", onup);
                domElement.addEventListener("touchmove", onmove);
                for(i = 0; i < len; i++){
                    info.target = targets[i];
                    targets[i].trigger("down", info, event);
                }

            }
            
        }

        domElement.addEventListener("touchstart", ondown);
        return function (){
            domElement.removeEventListener("touchstart", ondown);
        }

    }

}


/* CanvasEvent 支持 移动 和 桌面 端
parameter: 
    canvasImageRender: CanvasImageDraw;

method: 
    initEvent(domElement, list, box): Function;
    initEventMobile(domElement, list, box): Function;

demo:
    const cid = new CanvasImageDraw({openEvent: true, width: 100, height: 100});
    const button = new CanvasTextView("BUTTON", {padding: 4, margin: 0, isDisable: true});
    cid.append(button).render();
    
    button.addEventListener("up", (info, event) => {
        if(info.delta < 300) console.log("up", info, event);
    });
    button.addEventListener("down", (info, event) => console.log("down", info, event));
*/
class CanvasEvent extends CanvasElementEvent{

    constructor(canvasImageRender){
        super();

        if(UTILS.isMobile){
            this.exitEventFunc = this.initEventMobile(canvasImageRender.domElement, canvasImageRender.list, canvasImageRender.box);
        }else{
            this.exitEventFunc = this.initEvent(canvasImageRender.domElement, canvasImageRender.list, canvasImageRender.box);
        }

    }

}


/* CanvasPath2D CanvasImage.path2D
parameter: 
    drawType = "stroke", drawStyle = null, drawBefore = false 

attributes:
    drawBefore: Bool;     //是否在 CanvasImage 之前绘制
    drawType: String;    //填充路径或描绘路径 可能值: 默认 stroke | fill
    drawStyle: Object;    //canvas.context的属性

method:
    line(line: Line): undefined;         //注意: 参数属性值都是相对于CanvasImage的位置, 参数为引用, 既当参数的属性发生改变时下一次绘制也会生效
    path(path2D: Path2D): undefined;    //

demo:
    const test = new CanvasImageCustom().size(100, 100).pos(100, 100).rect().fill("#664466");
    test.path2D = new CanvasPath2D("stroke", {strokeStyle: "blue", lineWidth: 4});

    const path2D = new Path2D();
    path2D.roundRect(12, 12, 40, 40, 10); //圆角矩形
    test.path2D.path(path2D);

    //test.path2D.line(new Line(4, 4, 4, 150000));

*/
class CanvasPath2D{

    static emptySVGMatrix = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix();
    static resetSVGMatrix(svgMatrix = CanvasPath2D.emptySVGMatrix){
        svgMatrix.a = svgMatrix.d = 1;
        svgMatrix.b = svgMatrix.c = 
        svgMatrix.e = svgMatrix.f = 0;
    }

    #pathType = "";
    get pathType(){
        return this.#pathType;
    }

    #value = null;
    get value(){
        return this.#value;
    }

    constructor(drawType = "stroke", drawStyle = {strokeStyle: "#ffffff"}, drawBefore = false){
        this.drawBefore = drawBefore;
        this.drawType = drawType;
        this.drawStyle = drawStyle;
    }

    reset(){
        this.#pathType = "";
        this.#value = null;
    }

    line(line){
        this.#pathType = "line";
        this.#value = line;
    }

    path(path2D){
        this.#pathType = "path2D";
        this.#value = path2D;
    }

    _draw(con, x, y, w, h){
        con.save();
        con.beginPath();
        con.rect(x, y, w, h);
        con.clip();
        con.translate(x, y);
        switch(this.pathType){
            case "line": 
            con.beginPath();
            con.moveTo(this.value.x, this.value.y);
            con.lineTo(this.value.x1, this.value.y1);
            if(this.drawStyle === null) con.stroke();
            else{
                con.save();
                let n = "";
                for(n in this.drawStyle){
                    if(this.drawStyle[n] !== con[n]) con[n] = this.drawStyle[n];
                }
                con.stroke();
                con.restore();
            }
            break;

            case "path2D": 
            if(this.drawStyle === null) con[this.drawType](this.value);
            else{
                let n = "";
                for(n in this.drawStyle){
                    if(this.drawStyle[n] !== con[n]) con[n] = this.drawStyle[n];
                }
                con[this.drawType](this.value);
            }
            break;
        }
        con.restore();
    }

}


/* CanvasImageDraw
parameter: 
    option = {
        drawType           //默认 3 
        alpha             //默认 true
        className        //默认 ""
        openEvent        //默认 false, 是否启用dom事件(如果为true使ci绑定的事件将生效)
        width, height: Number || objcet: HTMLCanvasElement, CanvasImageCustom
    }

attribute:
    domElement: HTMLCanvasElement;
    context: CanvasRenderingContext2D;
    list: Array[CanvasImage]
    drawType: Number; //怎么去绘制列表, 默认 3
        0: 纯净模式(遍历列表: context.drawImage(CI.image, CI.x, CI.y))
        1: 应用CIR内置属性
        2: 应用CI内置属性
        3: 1 + 2
    
method:
    append(...ci: CanvasImage): this;        //追加多个ci到列表
    size(w, h: Number): this;                //设置box和canvas的宽高
    render(parentElem: HTMLElement): this;    //重绘所有的 CanvasImage 并把 canvas 添加至dom树
    redraw(): undefined;                     //重绘所有的 CanvasImage
    redrawCI(ci: CanvasImage): undefined;    //重绘一个 CanvasImage
    exit(): undefined;                        //不在使用此类应调用此方法清除相关缓存并从dom树删除画布;
    sortCIIndex(): undefined;                //所有ci按其 index 属性值从小到大排序一次(视图的层级, 可以绑定 "beforeDraw" 事件, 达到自动更新)

    sortCIPosEquals(list, option): this; //平铺排序(假设list里的所有CanvasImage的大小都一样)
        list: Array[CanvasImage]; //默认 this.list
        option: Object{
            disX, disY: Number,        //CanvasImage 之间的间距,默认 0
            sx, sy: Number,            //开始位置, 默认 0
            size: Object{w,h},        //如果定义就计算并在其上设置所占的宽高 (x,y 为option.sx.sy)
            lenX: Number,            //x轴最多排多少个 默认 1
        }

    sortCIPos(list, option): this; //平铺排序 (此排序相对于 .sortCIPosEquals() 较慢)
        list: Array[CanvasImage]; //默认 this.list
        option: Object{
            disX, disY: Number,        //CanvasImage 之间的间距,默认 0
            sx, sy: Number,            //开始位置, 默认 0
            size: Object{w,h},        //如果定义就计算并在其上设置所占的宽高 (x,y 为option.sx.sy)
            lineHeight: String,        //可能值: top, middle, bottom; 默认 top
        }

    initEventDispatcher(): this; //初始化自定义事件 (如果不需要这些事件可以不用初始化)
        支持的事件名:
        beforeDraw: eventParam{target: CanvasImageDraw}
        afterDraw: eventParam{target: CanvasImageDraw}
        boxX: eventParam{target: CanvasImageDraw}
        boxY: eventParam{target: CanvasImageDraw}
        size: eventParam{target: CanvasImageDraw}
        exit: eventParam{target: CanvasImageDraw}
        append: eventParam{target: Array[CanvasImage]}
        add: eventParam{target: CanvasImage}
        remove: eventParam{target: CanvasImage}
    
    createCircleDiffusion(t, mr, fillStyle): Function; //点击画布时播放向外扩散的圆
        t: Number;             //扩散至最大半径的时间, 默认200
        mr: Number;         //扩散圆的最大半径, 默认25
        fillStyle: String;    //填充扩散圆的主要颜色; 默认"rgba(0,244,255,0.5)"
        Function            //返回值, 用于退出此程序的函数

demo:
    //用 new Image() 加载20万个图片直接崩了 (用canvas就稍微有点卡)
    //如果用 CanvasImageCustom 去绘制形状或文字一样会崩

    const cir = new CanvasImageDraw({width: 600, height: 300}),
    cis = new CanvasImageScroll(cir, {scrollSize: 4});
    cir.domElement.style = `
        background: rgb(127,127,127);
    `;
    
    const img = new CanvasImage().loadImage(`${RootDir}examples/img/Stuffs/1.png`, () => {
        const option = {
            disX: 10, disY: 10,        //CanvasImage 之间的间距,默认 0
            sx: 0, sy: 0,            //开始位置, 默认 0
            size: {},            //如果定义就在其上设置结束时的矩形 
            lineHeight: "",        //可能值: top, middle, bottom; 默认 top
            lenX: Math.floor(cir.box.w / 50),
        }

        //测试排序
        for(let i = 0; i < 20; i++){
            console.time("test");
            //cir.sortCIPos(null, option);
            cir.sortCIPosEquals(null, option);
            console.timeEnd("test");
        }

        cir.render();
        console.log(cir, cis, option.size);
    });

    for(let i = 0; i < 200000; i++){
        const ci = new CanvasImage(img);
        cis.bindScroll(ci); //cis 能够监听此ci
        cis.changeCIAdd(ci); //cis 初始化此ci
        cir.list[i] = ci; //cir 能够绘制此ci
    }
*/
class CanvasImageDraw{
    
    static arrSort = function (a, b){return a["index"] - b["index"];}
    static paramCon = {alpha: true}
    
    static defaultStyles = {
        filter: "none",
        globalAlpha: 1,
        globalCompositeOperation: "source-over",
        imageSmoothingEnabled: false, //是否启用平滑处理图像
        miterLimit: 10,
        font: "12px SimSun, Songti SC",
        textAlign: "left",
        textBaseline: "top",
        lineCap: "butt",
        lineJoin: "miter",
        lineDashOffset: 0,
        lineWidth: 1,
        shadowColor: "rgba(0, 0, 0, 0)",
        shadowBlur: 0,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        fillStyle: "#ffffff",
        strokeStyle: "#666666",
    }

    static setDefaultStyles(context){
        const styles = CanvasImageDraw.defaultStyles;
        for(let k in styles){
            if(context[k] !== styles[k]) context[k] = styles[k];
        }
    }

    static getContext(canvas, className, alpha = true){
        if(CanvasImageDraw.isCanvas(canvas) === false) canvas = document.createElement("canvas");
        CanvasImageDraw.paramCon.alpha = alpha;
        const context = canvas.getContext("2d", CanvasImageDraw.paramCon);

        if(typeof className === "string") canvas.className = className;
        //if(typeof id === "string") canvas.setAttribute('id', id);
        
        return context;
    }

    static isCanvasImage(img){ //OffscreenCanvas: ImageBitmap;

        return ImageBitmap["prototype"]["isPrototypeOf"](img) || 
        HTMLImageElement["prototype"]["isPrototypeOf"](img) || 
        HTMLCanvasElement["prototype"]["isPrototypeOf"](img) || 
        CanvasRenderingContext2D["prototype"]["isPrototypeOf"](img) || 
        HTMLVideoElement["prototype"]["isPrototypeOf"](img);
        
    }

    static isCanvas(canvas){
        return HTMLCanvasElement["prototype"]["isPrototypeOf"](canvas);
    }

    #cded = null;

    #eventDispatcher = null;
    get eventDispatcher(){return this.#eventDispatcher;}
    
    #pointEV = new Point();
    #boxV = new Box();
    #box = null;
    get box(){return this.#box;}
    
    constructor(option = {}){
        this.list = [];
        this.drawType = option.drawType === undefined ? 3 : option.drawType;
        
        if(UTILS.isObject(option.object) === false){
            
            this.#box = new Box();
            this.context = CanvasImageDraw.getContext(null, option.className, option.alpha);
            this.domElement = this.context.canvas;
            this.size(option.width, option.height);

        } else {

            if(CanvasImageDraw.isCanvas(option.object) === true){
                this.#box = new Box();
                this.context = CanvasImageDraw.getContext(option.object, option.className, option.alpha);
                this.domElement = this.context.canvas;
                this.size(option.object.width, option.object.height);
            }
    
            else if(CanvasImageCustom.prototype.isPrototypeOf(option.object) === true){
                this.#box = option.object.box;
                this.context = option.object.context;
                this.domElement = option.object.image;
            }

            else{
                this.#box = new Box();
                this.context = CanvasImageDraw.getContext(null, option.className, option.alpha);
                this.domElement = this.context.canvas;
                this.size(option.width, option.height);
            }

        }

        if(option.openEvent === true) this.#cded = new CanvasEvent(this);
    }

    createCircleDiffusion(t = 200, mr = 25, fillStyle = "rgba(0,244,255,0.5)"){
        var x = 0, y = 0, st = 0, r = 0;
        const PI2 = Math.PI*2, context = this.context, oldFillStyle = context.fillStyle, 
        colors = [
            "rgba(0,0,0,0)", 
            fillStyle,
            "rgba(0,0,0,0)",
        ],
        
        animateLoop = new AnimateLoop(() => {
            if(r <= mr){
                this.redraw();
                r = (UTILS.time - st) / t * mr;
                context.beginPath();
                context.arc(x, y, r, 0, PI2);
                const radialGradient = context.createRadialGradient(x, y, 0, x, y, r);
                gradientColorSymme(radialGradient, colors);
                context.fillStyle = radialGradient;
                context.fill();
            }
            else onstop();
        }),

        onstop = () => {
            context.fillStyle = oldFillStyle;
            animateLoop.stop();
            this.redraw();
        },

        ondown = event => {
            x = event.offsetX;
            y = event.offsetY;
            st = UTILS.time;
            r = 0;
            animateLoop.play();
        }
        
        this.domElement.addEventListener("pointerdown", ondown);
        return function (){
            onstop();
            this.domElement.removeEventListener("pointerdown", ondown);
        }
    }

    initEventDispatcher(){
        this.#eventDispatcher = new EventDispatcher();
        const eventParam = {target: this}
        this.#eventDispatcher.
        customEvents("beforeDraw", eventParam)
        .customEvents("afterDraw", eventParam)
        .customEvents("beforeDrawTarget", eventParam)
        .customEvents("afterDrawTarget", eventParam)
        .customEvents("boxX", eventParam)
        .customEvents("boxY", eventParam)
        .customEvents("size", eventParam)
        .customEvents("exit", eventParam)
        .customEvents("append", eventParam)
        .customEvents("add", eventParam)
        .customEvents("remove", eventParam);

        let _x = this.#box.x, _y = this.#box.y;
        Object.defineProperties(this.#box, {

            x: {
                get: () => {return _x;},
                set: v => {
                    if(v !== _x && isNaN(v) === false){
                        _x = v;
                        this.#eventDispatcher.trigger("boxX");
                    }
                }
            },

            y: {
                get: () => {return _y;},
                set: v => {
                    if(v !== _y && isNaN(v) === false){
                        _y = v;
                        this.#eventDispatcher.trigger("boxY");
                    }
                }
            },

        });

        return this;
    }

    sortCIIndex(){
        this.list.sort(CanvasImageDraw.arrSort);
    }

    sortCIPosEquals(list, option = {}){
        if(Array.isArray(list) === false) list = this.list;
        if(list.length === 0) return;

        const lenX = option.lenX || 1, 
        disX = option.disX || 0,
        disY = option.disY || 0,
        x = option.sx || 0, y = option.sy || 0, 
        w = list[0].w, h = list[0].h;

        for(let i = 0, ix, iy; i < list.length; i++){
            ix = i % lenX;
            iy = Math.floor(i / lenX);
            list[i].box.pos(ix * w + ix * disX + x, iy * h + iy * disY + y);
        }

        if(option.size !== undefined){
            option.size.w = w * lenX + disX * lenX - disX + x;
            const lenY = Math.ceil(list.length / lenX);
            option.size.h = h * lenY + disY * lenY - disY + y;
        }
        
        return this;
    }

    sortCIPos(list, option = {}){
        if(Array.isArray(list) === false) list = this.list;
        const len = list.length;
        if(len === 0) return;

        const mw = option.width || this.box.w,
        indexs = option.lineHeight === "middle" || option.lineHeight === "bottom" ? [] : null, //[sIndex, length, mHeight]
        sx = option.sx || 0,
        sy = option.sy || 0,
        disX = option.disX || 0,
        disY = option.disY || 0,
        rect = option.size || null;
        if(rect !== null){
            rect.w = list[0].box.mx;
            rect.h = list[0].box.my;
        }

        var y = sy, x = sx, w = 0, h = list[0].h;
        for(let i = 0; i < len; i++){
            if(indexs !== null && indexs.length % 3 === 0) indexs.push(i);
            w = list[i].w;
            if(x + w + disX > mw){
                if(indexs !== null) indexs.push(i, h, i);
                x = w + sx + disX;
                y += h + disY;
                h = list[i].h;
                list[i].box.pos(sx, y);
            } else {
                list[i].box.pos(x, y);
                x += w + disX;
                h = Math.max(list[i].h, h);
                if(rect !== null){
                    rect.w = Math.max(list[i].box.mx, rect.w);
                    rect.h = Math.max(list[i].box.my, rect.h);
                }
            }
        }

        if(indexs !== null){
            if(indexs.length % 3 === 1) indexs.push(len, h);
            switch(option.lineHeight){
                case "middle": 
                for(let i = 0; i < indexs.length; i += 3){
                    for(let k = indexs[i]; k < indexs[i + 1]; k++) list[k].box.y += (indexs[i + 2] - list[k].h) / 2;
                }
                break;
                case "bottom": 
                for(let i = 0; i < indexs.length; i += 3){
                    for(let k = indexs[i]; k < indexs[i + 1]; k++) list[k].box.y += indexs[i + 2] - list[k].h;
                }
                break;
            }
        }
        
        if(rect !== null){
            rect.w -= sx;
            rect.h -= sx;
        }

        return this;
    }

    size(w, h){
        switch(typeof w) {
            case "number": 
            this.box.size(w, h);
            break;
            case "object": 
            this.box.size(w.width||w.w||this.box.w, w.height||w.h||this.box.h);
            break;
        }

        this.domElement.width = this.box.w;
        this.domElement.height = this.box.h;
        CanvasImageDraw.setDefaultStyles(this.context);

        if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("size");

        return this;
    }

    render(parentElem = document.body){
        this.redraw();
        if(this.domElement.parentElement === null) parentElem.appendChild(this.domElement);
        return this;
    }

    exit(){
        if(this.domElement.parentElement) this.domElement.parentElement.removeChild(this.domElement);

        if(this.#cded !== null){
            if(typeof this.#cded.exitEventFunc === "function") this.#cded.exitEventFunc();
            this.#cded = null;
        }

        if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("exit", param => param.value = ca);
        
        this.list.length = 0;
    }

    append(...cis){
        const len = this.list.length;
        for(let i = 0; i < cis.length; i++) this.list[i + len] = cis[i];
        if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("append", param => param.target = cis);
        return this;
    }

    add(ci){
        if(this.list.includes(ci) === false){
            this.list.push(ci);
            if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("add", param => param.target = ci);
        }
        return ci;
    }

    remove(ci){
        const i = this.list.indexOf(ci);
        if(i !== -1){
            this.list.splice(i, 1);
            if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("remove", param => param.target = ci);
        }
        return ci;
    }

    isDraw(ca){
        switch(ca.position){
            case "fixed": 
            if(this.#boxV.equals(this.box) === false) this.#boxV.set(0, 0, this.box.w, this.box.h);
            return ca["visible"] === true && ca["image"] !== null && this.#boxV["intersectsBox"](ca["box"]);

            default: 
            return ca["visible"] === true && ca["image"] !== null && this["box"]["intersectsBox"](ca["box"]);
        }
    }

    redraw(){
        this['context']['clearRect'](0, 0, this['box']['w'], this['box']['h']);
        switch(this.drawType){
            case 0: 
            for(let k = 0, ci; k < this.list.length; k++){
                ci = this.list[k];
                if(ci["image"] !== null && this["box"]["intersectsBox"](ci["box"])) this.context.drawImage(ci.image, ci.x, ci.y);
            }
            return;

            case 1: 
            if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("beforeDraw");
            for(let k = 0, ci; k < this.list.length; k++){
                ci = this.list[k];
                if(ci["image"] !== null && this["box"]["intersectsBox"](ci["box"])) this.context.drawImage(ci.image, ci.x, ci.y);
            }
            if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("beforeDraw");
            return;

            case 2: 
            for(let k = 0, ci; k < this.list.length; k++){
                ci = this.list[k];
                if(this.isDraw(ci) === true) this._draw(ci);
            }
            return;

            case 3: 
            if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("beforeDraw");
            for(let k = 0, ci; k < this.list.length; k++){
                ci = this.list[k];
                if(this.isDraw(ci) === true) this._draw(ci);
            }
            if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("afterDraw");
            return;
        }
    }

    redrawCI(ci){
        if(this.isDraw(ci) === true){
            this['context']['clearRect'](ci.box.x, ci.box.y, ci.box.w, ci.box.h);
            this._draw(ci);
        }
    }

    redrawTarget(box){
        if(CanvasImage["prototype"]["isPrototypeOf"](box) === true) box = box.box;

        const _list = [], list = [], len = this.list.length;

        for(let k = 0, tar, i = 0, c = 0, _c = 0, a = _list, b = list, loop = false; k < len; k++){
            tar = this["list"][k];
            
            if(this.isDraw(tar) === false) continue;

            if(box["intersectsBox"](tar["box"]) === true){
                tar["__overlap"] = true;
                box["expand"](tar["box"]);
                loop = true;

                while(loop === true){
                    b["length"] = 0;
                    loop = false;
                    c = _c;

                    for(i = 0; i < c; i++){
                        tar = a[i];

                        if(box["intersectsBox"](tar["box"]) === true){
                            tar["__overlap"] = true;
                            box["expand"](tar["box"]);
                            loop = true; _c--;
                        }

                        else b.push(tar);
                        
                    }

                    a = a === _list ? list : _list;
                    b = b === _list ? list : _list;

                }
                
            }

            else{
                _c++;
                a["push"](tar);
                tar["__overlap"] = false;
            }
        }

        this['context']['clearRect'](0, 0, this['box']['w'], this['box']['h']);
        if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("beforeDraw");
        for(let k = 0, ci; k < this.list.length; k++){
            ci = this.list[k];
            if(ci["__overlap"] === true) this._draw(ci);
        }
        if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("afterDraw");
    }

    _draw(ca){
        const con = this.context;
        ca.trigger("beforeDraw", con, ca.position === "fixed" ? this.#pointEV.set(0, 0) : this.#pointEV.set(this.#box.x, this.#box.y));
        
        const x = ca.x - this.#pointEV.x, y = ca.y - this.#pointEV.y;
        if(ca.opacity !== con.globalAlpha) con.globalAlpha = ca.opacity;
        
        if(ca.path2D !== null && ca.path2D.drawBefore === true) ca.path2D._draw(con, x, y, ca.w, ca.h);

        if(ca.w === ca.width && ca.h === ca.height) con.drawImage(ca.image, x, y);
        else con.drawImage(ca.image, x, y, ca.w, ca.h);

        if(ca.path2D !== null && ca.path2D.drawBefore === false) ca.path2D._draw(con, x, y, ca.w, ca.h);
        
        ca.trigger("afterDraw", con, this.#pointEV);
    }

}


/* CanvasImageScroll 画布滚动条(CanvasImageDraw.box.xy的控制器)
parameter:
    cid: CanvasImageDraw, 
    option: Object{
        scrollVisible    //滚动条的显示; 可能值: 默认"visible" || "" || "auto"; //注意: auto 只支持移动端由事件驱动视图的显示
        scrollSize        //滚动条的宽或高; 默认 10; (如果想隐藏滚动条最好 scrollVisible: "", 而不是把此属性设为0)

        scrollEventType    //可能的值: "default", "touch" || ""; 默认 根据自己所处的环境自动选择创建
        inertia            //是否启用移动端滚动轴的惯性; 默认 true;
        inertiaLife        //移动端滚动轴惯性生命(阻力强度); 0 - 1; 默认 0.04;

        domElement:     //dom事件绑定的目标; 默认 cid.domElement
        fillStyle
        strokeStyle
    }

attribute:
    enable: Bool;        //是否启用; 默认 true

    //只读:
    maxSize: Point;        //最大宽高
    cursorX: Number;    //相对于视口宽的滚动条的 left (CanvasImageDraw.box.w)
    cursorY: Number;    
    scrollLeft: Number;    //相对于最大宽的滚动条的 left (CanvasImageDraw.box.x)
    scrollTop: Number;

method: 
    unbindScroll(ci): undefined;    //ci不在使用调用(ci 如果用 CanvasImageDraw.remove 方法从列表中删除的或 CanvasImageDraw 不在使用则无需调用)
    unbindEvent(): undefined;         //如果不在使用调用
    resetMaxSizeX(): undefined;        //重新计算最大边界x
    resetMaxSizeX(): undefined;     //重新计算最大边界y

demo:
    手动添加(指不用 CanvasImageDraw 给的方法加入到其队列):
    const cid = new CanvasImageDraw();
    const cis = new CanvasImageScroll();

    //Array.push
    cid.list.push(ci);
    cis.bindScroll(ci);
    cis.changeCIAdd(ci);

    //Array.splice
    ci = cid.list.splice(0, 1)[0];
    cis.unbindScroll(ci);
    cis.changeCIDel(ci);

    这样做也可以顺利更新最大边界与游标
*/
class CanvasImageScroll{

    #cid = null;
    #maxSize = new Point();
    get maxSize(){return this.#maxSize;}
    get cursorX(){return this.#cid.box.x/this.#maxSize.x*this.#cid.box.w;}
    get cursorY(){return this.#cid.box.y/this.#maxSize.y*this.#cid.box.h;}
    get scrollLeft(){return this.#cid.box.x;}
    get scrollTop(){return this.#cid.box.y;}

    constructor(cid, option = {}){
        if(!cid.eventDispatcher) cid.initEventDispatcher();

        this.#cid = cid;
        this.scrollSize = UTILS.isNumber(option.scrollSize) ? option.scrollSize : 10;
        this.fillStyle = option.fillStyle || "#ffffff";
        this.strokeStyle = option.strokeStyle || "#666666";
        this.enable = true;

        switch(option.scrollVisible){
            case "auto": 
            case "": 
            this.scrollVisible = option.scrollVisible;
            break;

            case "visible": 
            default: 
            this.scrollVisible = "visible";
            break;
        }

        switch(option.scrollEventType){
            case "touch": 
            this.__unbindEvent = this.createScrollEventMobile(option.domElement || cid.domElement, option.inertia, option.inertiaLife);
            break;

            case "default": 
            this.__unbindEvent = this.createScrollEventPC(option.domElement || cid.domElement);
            break;

            default: 
            if(UTILS.isMobile) this.__unbindEvent = this.createScrollEventMobile(option.domElement || cid.domElement, option.inertia, option.inertiaLife);
            else this.__unbindEvent = this.createScrollEventPC(option.domElement || cid.domElement);
            break;
        }
        
        const cirED = cid.eventDispatcher;
        cirED.register("boxX", () => this.changeCursorX());
        cirED.register("boxY", () => this.changeCursorY());

        cirED.register("append", event => {
            const list = event.target;
            var x = 0, y = 0;
            for(let k = 0, len = list.length, ci, m; k < len; k++){
                ci = list[k];
                this.bindScroll(ci);
                if(ci.visible === true){
                    m = ci.box.mx;
                    if(m > x) x = m;
                    m = ci.box.my;
                    if(m > y) y = m;
                }
            }
            if(x > this.#maxSize.x){
                this.#maxSize.x = x;
                this.changeCursorX();
            }
            if(y > this.#maxSize.y){
                this.#maxSize.y = y;
                this.changeCursorY();
            }
        });

        cirED.register("add", event => {
            this.bindScroll(event.target);
            this.changeCIAdd(event.target);
        });

        cirED.register("remove", event => {
            this.unbindScroll(event.target);
            this.changeCIDel(event.target);
        });

        if(this.scrollVisible === "visible"){
            cirED.register("afterDraw", () => {
                this.drawScrollX();
                this.drawScrollY();
            });
        }

        if(cid.list.length !== 0) this.bindScrolls();
    }

    changeCursorX(){
        if(this.#cid.box.x < 0 || this.#cid.box.w >= this.#maxSize.x) this.#cid.box.x = 0;
        else if(this.#cid.box.mx > this.#maxSize.x) this.#cid.box.x = this.#maxSize.x - this.#cid.box.w;
    }

    changeCursorY(){
        if(this.#cid.box.y < 0 || this.#cid.box.h >= this.#maxSize.y) this.#cid.box.y = 0;
        else if(this.#cid.box.my > this.#maxSize.y) this.#cid.box.y = this.#maxSize.y - this.#cid.box.h;
    }

    changeCIAdd(ci){
        if(ci.visible === false) return;
        var v = ci.box.mx;
        if(v > this.#maxSize.x){
            this.#maxSize.x = v;
            this.changeCursorX();
        }
        v = ci.box.my;
        if(v > this.#maxSize.y){
            this.#maxSize.y = v;
            this.changeCursorY();
        }
    }

    changeCIDel(ci){
        if(ci.visible === false) return;
        if(ci.box.mx >= this.#maxSize.x){
            this.resetMaxSizeX();
            this.changeCursorX();
        }
        if(ci.box.my >= this.#maxSize.y){
            this.resetMaxSizeY();
            this.changeCursorY();
        }
    }

    createScrollEventPC(domElement){
        var dPos = -1, rect;

        const box = this.#cid.box, cursorBox = new Box(),

        al_draw = new Timer(() => this.#cid.redraw(), 1000/30, 1, false),
        
        setTop = top => {
            box.y = top / box.h * this.#maxSize.y;
            if(al_draw.running === false) this.#cid.redraw();
            al_draw.start();
        },

        setLeft = left => {
            box.x = left / box.w * this.#maxSize.x;
            if(al_draw.running === false) this.#cid.redraw();
            al_draw.start();
        },
        
        onMoveTop = event => {
            if(this.enable === false) return onUpTop();
            setTop(event.clientY - rect.y - dPos);
        },

        onMoveLeft = event => {
            if(this.enable === false) return onUpLeft();
            setLeft(event.clientX - rect.x - dPos);
        },

        onUpTop = () => {
            document.body.removeEventListener('pointermove', onMoveTop);
            document.body.removeEventListener('pointerup', onUpTop);
        },

        onUpLeft = () => {
            document.body.removeEventListener('pointermove', onMoveLeft);
            document.body.removeEventListener('pointerup', onUpLeft);
        },

        ondown = event => {
            onUpTop();
            onUpLeft();
            if(this.enable === false) return;
            rect = domElement.getBoundingClientRect();
            cursorBox.set(
                this.cursorX, 
                this.#cid.box.h - this.scrollSize, 
                this.#maxSize.x <= this.#cid.box.w ? this.#cid.box.w : this.#cid.box.w / this.#maxSize.x * this.#cid.box.w, 
                this.scrollSize
            );
            if(cursorBox.w < 10) cursorBox.w = 10;
            if(cursorBox.containsPoint(event.offsetX, event.offsetY)){
                document.body.addEventListener("pointermove", onMoveLeft);
                document.body.addEventListener("pointerup", onUpLeft);
                dPos = event.offsetX - this.cursorX;
            } else {
                cursorBox.set(
                    this.#cid.box.w - this.scrollSize, 
                    this.cursorY, 
                    this.scrollSize, 
                    this.#maxSize.y <= this.#cid.box.h ? this.#cid.box.h : this.#cid.box.h / this.#maxSize.y * this.#cid.box.h
                );
                if(cursorBox.h < 10) cursorBox.h = 10;
                if(cursorBox.containsPoint(event.offsetX, event.offsetY)){
                    document.body.addEventListener("pointermove", onMoveTop);
                    document.body.addEventListener("pointerup", onUpTop);
                    dPos = event.offsetY - this.cursorY;
                }
            }
        },

        onwheel = event => {
            if(this.enable === false) return;
            if(this.#maxSize.y > box.h){
                dPos = 50 / this.#maxSize.y * box.h;
                setTop(this.cursorY + (event.wheelDelta === 120 ? -dPos : dPos));
            } else if(this.#maxSize.x > box.w){
                dPos = 50 / this.#maxSize.x * box.w;
                setLeft(this.cursorX + (event.wheelDelta === 120 ? -dPos : dPos));
            }
        }

        domElement.addEventListener("pointerdown", ondown);
        domElement.addEventListener("mousewheel", onwheel);

        return function (){
            onUpTop();
            onUpLeft();
            domElement.removeEventListener("pointerdown", ondown);
            domElement.removeEventListener("mousewheel", onwheel);
        }
    }

    createScrollEventMobile(domElement, inertia = true, inertiaLife = 0.04){
        var sTime = 0, dis = "", sx = 0, sy = 0; 
        const box = this.#cid.box,
        al_draw = new Timer(() => this.#cid.redraw(), 1000/30, 1, false);

        if(inertia === true){
            inertiaLife = 1 - inertiaLife;
            var inertiaAnimate = new AnimateLoop(null, null, 1000/30),
            step = 1, aniamteRun = false, stepA = "", stepB = "", _sx = 0, _sy = 0,
        
            inertiaTop = speed => {
                if(Math.abs(speed) < 0.7) return;
                stepA = speed < 0 ? "-top" : "top";
                if(aniamteRun && stepA === stepB) step += 0.3;
                else{
                    step = 1;
                    stepB = stepA;
                }
                inertiaAnimate.play(() => {
                    speed *= inertiaLife;
                    box.y += step * 20 * speed;
                    this.#cid.redraw();
                    if(Math.abs(speed) < 0.001 || box.y <= 0 || box.my >= this.#maxSize.y) inertiaAnimate.stop();
                    else {
                        if(this.scrollVisible === "auto"){
                            if(this.#maxSize.x > this.#cid.box.w) this.drawScrollX();
                            if(this.#maxSize.y > this.#cid.box.h) this.drawScrollY();
                        }
                    }
                });
            },

            inertiaLeft = speed => {
                if(Math.abs(speed) < 0.7) return;
                stepA = speed < 0 ? "-left" : "left";
                if(aniamteRun && stepA === stepB) step += 0.3;
                else{
                    step = 1;
                    stepB = stepA;
                }
                inertiaAnimate.play(() => {
                    speed *= inertiaLife;
                    box.x += step * 20 * speed;
                    this.#cid.redraw();
                    if(Math.abs(speed) < 0.001 || box.x <= 0 || box.mx >= this.#maxSize.x) inertiaAnimate.stop();
                    else {
                        if(this.scrollVisible === "auto"){
                            if(this.#maxSize.x > this.#cid.box.w) this.drawScrollX();
                            if(this.#maxSize.y > this.#cid.box.h) this.drawScrollY();
                        }
                    }
                });
            }
        }
        
        const update = event => {
            if(dis === "x") box.x = sx - event.targetTouches[0].pageX;
            else if(dis === "y") box.y = sy - event.targetTouches[0].pageY;
            if(al_draw.running === false) this.#cid.redraw();
            al_draw.start();
            if(this.scrollVisible === "auto"){
                if(this.#maxSize.x > this.#cid.box.w) this.drawScrollX();
                if(this.#maxSize.y > this.#cid.box.h) this.drawScrollY();
            }
        },
        
        onup = () => {
            if(inertia === true){
                if(dis === "x") inertiaLeft((box.x - _sx) / (UTILS.time - sTime));
                else if(dis === "y") inertiaTop((box.y - _sy) / (UTILS.time - sTime));
                else this.#cid.redraw();
            }
            else this.#cid.redraw();
        },

        onmove = event => {
            if(this.enable === false) return;
            if(dis !== "") return update(event);
            if(UTILS.time - sTime < 60) return;
            
            if(Math.abs(event.targetTouches[0].pageX - sx) > Math.abs(event.targetTouches[0].pageY - sy) && this.#maxSize.x > box.w){
                sx = event.targetTouches[0].pageX + box.x;
                dis = "x";
            } else if(this.#maxSize.y > box.h){
                sy = event.targetTouches[0].pageY + box.y;
                dis = "y";
            }
            
            if(inertia === true){
                sTime = UTILS.time;
                _sx = box.x;
                _sy = box.y;
            }
        },
        
        ondown = event => {
            event.preventDefault();
            if(this.enable === false) return;
            if(this.#maxSize.x <= box.w && this.#maxSize.y <= box.h) return;
            sx = event.targetTouches[0].pageX;
            sy = event.targetTouches[0].pageY;
            sTime = UTILS.time;
            dis = "";
            if(inertia === true){
                aniamteRun = inertiaAnimate.running;
                inertiaAnimate.stop();
            }

            if(this.scrollVisible === "auto"){
                if(this.#maxSize.x > this.#cid.box.w) this.drawScrollX();
                if(this.#maxSize.y > this.#cid.box.h) this.drawScrollY();
            }
        }

        domElement.addEventListener("touchend", onup);
        domElement.addEventListener("touchmove", onmove);
        domElement.addEventListener("touchstart", ondown);

        return function (){
            domElement.removeEventListener("touchend", onup);
            domElement.removeEventListener("touchmove", onmove);
            domElement.removeEventListener("touchstart", ondown);
        }
    }

    unbindEvent(){
        if(typeof this.__unbindEvent === "function"){
            this.__unbindEvent();
            delete this.__unbindEvent;
        }
    }

    resetMaxSizeX(){
        var v = 0;
        for(let k = 0, len = this.#cid.list.length, ci, m; k < len; k++){
            ci = this.#cid.list[k];
            if(ci.visible === true){
                m = ci.box.mx;
                if(m > v) v = m;
            }
        }
        if(v !== this.#maxSize.x){
            this.#maxSize.x = v;
            this.changeCursorX();
        }
    }

    resetMaxSizeY(){
        var v = 0;
        const list = this.#cid.list, len = list.length;
        for(let k = 0, len = this.#cid.list.length, ci, m; k < len; k++){
            ci = this.#cid.list[k];
            if(ci.visible === true){
                m = ci.box.my;
                if(m > v) v = m;
            }
        }
        if(v !== this.#maxSize.y){
            this.#maxSize.y = v;
            this.changeCursorY();
        }
    }

    unbindScroll(ci){
        var x = ci.box.x;
        delete ci.box.x;
        ci.box.x = x;

        x = ci.box.y;
        delete ci.box.y;
        ci.box.y = x;

        x = ci.box.w;
        delete ci.box.w;
        ci.box.w = x;

        x = ci.box.h;
        delete ci.box.h;
        ci.box.h = x;

        x = ci.visible;
        delete ci.visible;
        ci.visible = x;
    }
    
    bindScroll(ci){
        const box = ci.box;
        var _visible = typeof ci.visible === "boolean" ? ci.visible : true, 
        _x = box.x, _y = box.y, _w = box.w, _h = box.h, nm, om;

        const writeBoxX = () => {
            if(nm > this.#maxSize.x){
                this.#maxSize.x = nm;
                this.changeCursorX();
            } else if(nm < this.#maxSize.x){
                if(om >= this.#maxSize.x) this.resetMaxSizeX();
            }
        },

        writeBoxY = () => {
            if(nm > this.#maxSize.y){
                this.#maxSize.y = nm;
                this.changeCursorY();
            } else if(nm < this.#maxSize.y){
                if(om >= this.#maxSize.y) this.resetMaxSizeY();
            }
        };

        Object.defineProperties(box, {

            x: {
                get: () => {return _x;},
                set: v => {
                    if(_visible){
                        om = _x+_w;
                        _x = v;
                        nm = v+_w;
                        writeBoxX();
                    }else{
                        _x = v;
                    }
                }
            },

            y: {
                get: () => {return _y;},
                set: v => {
                    if(_visible){
                        om = _y+_h;
                        _y = v;
                        nm = v+_h;
                        writeBoxY();
                    }else{
                        _y = v;
                    }
                }
            },

            w: {
                get: () => {return _w;},
                set: v => {
                    if(_visible){
                        om = _w+_x;
                        _w = v;
                        nm = v+_x;
                        writeBoxX();
                    }else{
                        _w = v;
                    }
                }
            },

            h: {
                get: () => {return _h;},
                set: v => {
                    if(_visible){
                        om = _h+_y;
                        _h = v;
                        nm = v+_y;
                        writeBoxY();
                    }else{
                        _h = v;
                    }
                }
            },

        });

        Object.defineProperties(ci, {

            visible: {
                get: () => {return _visible;},
                set: v => {
                    if(v === true){
                        _visible = true;
                        this.changeCIAdd(ci);
                    }
                    else if(v === false){
                        this.changeCIDel(ci);
                        _visible = false;
                    }
                }
            },

        });
    }

    drawScrollX(){
        const x = this.cursorX, 
        y = this.#cid.box.h - this.scrollSize, 
        w = this.#maxSize.x <= this.#cid.box.w ? this.#cid.box.w : this.#cid.box.w / this.#maxSize.x * this.#cid.box.w,
        h = this.scrollSize,
        con = this.#cid.context, fillStyle = con.fillStyle, strokeStyle = con.strokeStyle;
        if(fillStyle !== this.fillStyle) con.fillStyle = this.fillStyle;
        if(strokeStyle !== this.strokeStyle) con.strokeStyle = this.strokeStyle;
        con.fillRect(x,y,w,h >= 10 ? h : 10);
        con.strokeRect(x,y,w,h);
        if(fillStyle !== con.fillStyle) con.fillStyle = fillStyle;
        if(strokeStyle !== con.strokeStyle) con.strokeStyle = strokeStyle;
    }

    drawScrollY(){
        const x = this.#cid.box.w - this.scrollSize,
        y = this.cursorY,
        w = this.scrollSize,
        h = this.#maxSize.y <= this.#cid.box.h ? this.#cid.box.h : this.#cid.box.h / this.#maxSize.y * this.#cid.box.h,
        con = this.#cid.context, fillStyle = con.fillStyle, strokeStyle = con.strokeStyle;
        if(fillStyle !== this.fillStyle) con.fillStyle = this.fillStyle;
        if(strokeStyle !== this.strokeStyle) con.strokeStyle = this.strokeStyle;
        con.fillRect(x,y,w,h >= 10 ? h : 10);
        con.strokeRect(x,y,w,h);
        if(fillStyle !== con.fillStyle) con.fillStyle = fillStyle;
        if(strokeStyle !== con.strokeStyle) con.strokeStyle = strokeStyle;
    }

}


/* CanvasEventTarget 
parameter: 
    box: Box;            //默认创建一个新的Box

attribute: 
    box: Box;             //.x.y 相对于画布的位置, .w.h 图像的宽高;
    visible: Boolean;    //默认true; 完全隐藏(既不绘制视图, 也不触发绑定的事件, scroll也忽略此ci)
    index: Integer;     //层级(不必唯一) -Infinity 最底层; Infinity 最上层
    position: String;    //定位 可能值: 默认"", "fixed" (如果为 fixed 其绘制的位置将无视滚动条, 如果存在的话)

method: 
    addEventListener(eventName, callback): undefined;        //添加事件
    removeEventListener(eventName, callback): undefined;    //删除事件
    clearEventListener(eventName): undefined;                //删除 eventName 栏的所有回调, 如果eventName未定义则清空所有回调
    getEventListener(eventName): Array;                        //返回某个事件监听器
    trigger(eventName, info = null, event = null): undefined; //CanvasEvent 使用此方法触发事件回调

eventNames: 
    down(info, event)    //按下
    move(info, event)    //移动(按下触发才有效)
    up(info, event)        //抬起(按下触发才有效)
        info: Object{targets, target, offsetX, offsetY, delta}; //此参数的属性兼容于两端
        event: event; //

    beforeDraw(context, point)     //绘制之前
    afterDraw(context, point)     //绘制之后
        context: CanvasRender2D; //当前绘制画布的上下文
        point: Point;             //CanvasImageDraw.box.xy(滚动条游标的坐标) (如果 .position 为 "fixed", 此对象的值总是 0)
*/
class CanvasEventTarget{

    #eventObject = {
        down: null, //Array[function]
        move: null,
        up: null,
        beforeDraw: null,
        afterDraw: null,
    }

    constructor(box = new Box()){
        this.box = box;
        this.visible = true;
        this.index = 0;
        this.position = "";
    }

    trigger(eventName, info = null, event = null){
        if(this.#eventObject[eventName] !== null){
            const arr = this.#eventObject[eventName];
            for(let i = 0, len = arr.length; i < len; i++) arr[i](info, event);
        }
    }

    addEventListener(eventName, callback){
        if(this.#eventObject[eventName] === undefined || typeof callback !== "function") return;
        if(this.#eventObject[eventName] === null) this.#eventObject[eventName] = [callback];
        else{
            const i = this.#eventObject[eventName].indexOf(callback);
            if(i === -1) this.#eventObject[eventName].push(callback);
            else this.#eventObject[eventName][i] = callback;
        }
    }

    removeEventListener(eventName, callback){
        if(Array.isArray(this.#eventObject[eventName]) === false) return;
        const i = this.#eventObject[eventName].indexOf(callback);
        if(i !== -1) this.#eventObject[eventName].splice(i, 1);
        if(this.#eventObject[eventName].length === 0) this.#eventObject[eventName] = null;
    }

    clearEventListener(eventName){
        if(this.#eventObject[eventName] !== undefined) this.#eventObject[eventName] = null;
        else{
            for(let n in this.#eventObject) this.#eventObject[n] = null;
        }
    }

    getEventListener(eventName){
        return this.#eventObject[eventName];
    }
    
}


/* CanvasImage 
parameter: 
    image (构造器会调用一次 .setImage(image) 来处理 image 参数)

attribute:
    image: CanvasImage;        //目标图像, 默认为null;
    opacity: Float;            //透明度; 值0至1之间; 默认1;
    path2D: CanvasPath2D;    //此属性一般用于动态绘制某个形状
    loadingImage: Bool;     //只读, ci是否正在加载图片或视频
    x,y,w,h: Number;        //只读, 返回 this.box.xywh 属性值
    width, height: Number;    //只读, 返回 image 的宽高; 如果未定义就返回 0
    
method:
    pos(x, y): this;             //设置位置; x 可以是: Number, Object{x,y}
    setImage(image): this;         //设置图像 (image 如果是 CanvasImage 并它正在加载图像时, 则会在它加载完成时自动设置 image);

    loadImage(src, onload): this;    //加载并设置图像 (onload 如果是 CanvasImageDraw 则加载完后自动调用一次 redraw 或 render 方法);
    loadVideo(src, onload, type = "mp4") //与 .loadImage() 类似

    setScaleX(s, x): undefined;    //缩放x(注意: 是设置ci的box属性实现的缩放)
    setScaleY(s, y): undefined;    //缩放y
        s为必须, s小于1为缩小, 大于1放大;
        x默认为0, x是box的局部位置, 如果是居中缩放x应为: this.w/2, 

    createRotate(angle, cx , cy: Number): Object; //旋转(注意: 用 beforeDraw, afterDraw 事件设置ci新的绘制位置实现的旋转)
        angle: 旋转弧度, 默认0
        cx, cy: 旋转中心点(局部), 默认 this.w/2, this.h/2
        Object: {
            set(angle, cx , cy: Number): undefined; //
            offset(cx , cy: Number): undefined;     //更新旋转中心点(局部)
            angle(angle: Number): undefined;         //更新旋转弧度

            bind(): undefined;         //初始化时自动调用一次此方法
            unbind(): undefined;     //解除绑定(如果ci不在使用则不需要调用此方法)
        }

    setPath2DToCircleDiffusion(x,y,option): function; //圆形扩散特效(.path2D 实现的)
        x, y: Number;             //扩散原点 (相对于画布原点,event.offsetX,event.offsetY)
        option: Object{
            cir: CanvasImageDraw;     //必须;
            animateLoop: AnimateLoop;    //默认一个新的 AnimateLoop
            t: Number;                     //持续毫秒时间, 默认 200
            mr: Number;                 //扩散的最大半径, 默认 覆盖整个box: this.box.distanceFromPoint(x, y, true)
            path2D: CanvasPath2D;         //圆的样式, 默认: new CanvasPath2D("fill", {fillStyle: "rgba(255,255,255,0.2)"})
        }

demo:
    //CanvasImageDraw
    const cid = new CanvasImageDraw({width: WORLD.width, height: WORLD.height});

    //图片
    const ciA = cid.add(new CanvasImage()).pos(59, 59).load("view/img/test.png", cid);
    
    //视频
    cid.add(new CanvasImage())
    .loadVideo("view/examples/video/test.mp4", ci => {
        
        //同比例缩放视频
        const newSize = UTILS.setSizeToSameScale(ci.image, {width: 100, height: 100});
        ci.box.size(newSize.width, newSize.height).center(cid.box);

        //播放按钮
        const cic = cid.add(new CanvasImageCustom())
        .size(50, 30).text("PLAY", "#fff")
        .rect(4).stroke("blue");
        cic.box.center(cid.box);

        //动画循环
        const animateLoop = new AnimateLoop(() => cid.redraw());

        //谷歌浏览器必须要用户与文档交互一次才能播放视频 (点击后播放动画)
        cid.addEvent(cic, "up", () => {
            cic.visible = false;
            ci.image.play(); // ci.image 其实是一个 video 元素
            animateLoop.play(); //播放动画
        });
        
        //把 canvas 添加至 dom 树
        cid.render();

    });

    //鼠标位置缩放图片例子: (target: CanvasImage)
    cie.add(target, "wheel", event => {

        const scale = target.scaleX + event.wheelDelta * 0.001,

        //offsetX,offsetY 是鼠标到 element 的距离, 现在把它们转为 target 的局部距离
        localPositionX = event.offsetX - target.x,
        localPositionY = event.offsetY - target.y;

        //x,y缩放至 scale
        target.setScaleX(scale, localPositionX);
        target.setScaleY(scale, localPositionY);

        //重绘画布
        cid.redraw();

    });
*/
class CanvasImage extends CanvasEventTarget{

    #loadingImage = false;
    get loadingImage(){return this.#loadingImage;}
    get x(){return this.box.x;}
    get y(){return this.box.y;}
    get w(){return this.box.w;}
    get h(){return this.box.h;}
    get width(){return this.image === null ? 0 : this.image.width;}
    get height(){return this.image === null ? 0 : this.image.height;}
    get className(){return this.constructor.name;}
    
    constructor(image){
        super();
        this.image = null;
        this.opacity = 1;
        this.path2D = null;
        
        this.setImage(image);
    }

    pos(x, y){
        switch(typeof x) {
            case "number": 
            this.box.x = x;
            this.box.y = y;
            break;

            case "object": 
            this.box.x = x.x || this.box.x;
            this.box.y = x.y || this.box.y;
            break;
        }

        return this;
    }

    setImage(image){
        //如果是image
        if(CanvasImageDraw.isCanvasImage(image)){
            this.box.size(image.width, image.height);
            this.image = image;
        }
        //如果是 CanvasImage
        else if(CanvasImage.prototype.isPrototypeOf(image)){
            if(image.loadingImage){
                if(Array.isArray(image.__setImageList)) image.__setImageList.push(this);
                else image.__setImageList = [this];
            }
            else this.setImage(image.image);
        }
        //忽略此次操作
        else{
            this.box.size(0, 0);
            this.image = null;
        }
        return this;
    }

    setScaleX(s, x = 0){
        const oldVal = this.box.w;
        this.box.w = this.width * s;
        this.box.x += x - this.box.w / oldVal * x;
    }

    setScaleY(s, y = 0){
        const oldVal = this.box.h;
        this.box.h = this.height * s;
        this.box.y += y - this.box.h / oldVal * y;
    }

    loadImage(src, onload){
        this.#loadingImage = true;
        const image = new Image();
        image.onload = () => this._loadSuccess(image, onload);
        image.src = src;
        return this;
    }

    loadVideo(src, onload, type = "mp4"){
        /*    video 加载事件 的顺序
            onloadstart
            ondurationchange
            onloadedmetadata //元数据加载完成包含: 时长，尺寸大小（视频），文本轨道。
            onloadeddata
            onprogress
            oncanplay
            oncanplaythrough

            //控制事件:
            onended //播放结束
            onpause //暂停播放
            onplay //开始播放
        */
        this.#loadingImage = true;
        const video = document.createElement("video"),
        source = document.createElement("source");
        video.appendChild(source);
        source.type = `video/${type}`;

        video.oncanplay = () => {
            //video 的 width, height 属性如果不设的话永远都是0
            video.width = video.videoWidth;
            video.height = video.videoHeight;
            this._loadSuccess(video, onload);
        };

        source.src = src;
        return this;
    }
    
    createRotate(angle = 0, cx = this.w/2, cy = this.h/2){
        const scope = this; var nx, ny;

        function beforeDraw(con, point){
            nx = cx + scope.x - point.x;
            ny = cy + scope.y - point.y;

            con.translate(nx, ny);
            con.rotate(angle);

            //ci 减去translate的nx,ny 和 scroll的point
            point.set(nx + point.x, ny + point.y);

            //在此之后 cid 会这样操作:
            //x = ci.x - point.x
            //y = ci.y - point.y
            //con.drawImage(ci.image, x, y);
            //触发 afterDraw 事件
        }

        function afterDraw(con){
            con.rotate(-angle);
            con.translate(-nx, -ny);
        }

        this.addEventListener("beforeDraw", beforeDraw);
        this.addEventListener("afterDraw", afterDraw);

        return {
            set(x, y, a){
                cx = x;
                cy = y;
                angle = a;
            },

            offset(x, y){
                cx = x;
                cy = y;
            },

            angle(v){
                angle = v;
            },

            bind(){
                scope.addEventListener("beforeDraw", beforeDraw);
                scope.addEventListener("afterDraw", afterDraw);
            },

            unbind(){
                scope.removeEventListener("beforeDraw", beforeDraw);
                scope.removeEventListener("afterDraw", afterDraw);
            }
        }
    }

    setPath2DToCircleDiffusion(x, y, option = {}){
        const pi2 = Math.PI*2, p2d = new Path2D(), oldPath2D = this.path2D;
        this.path2D = option.path2D || new CanvasPath2D("fill", {fillStyle: "rgba(255,255,255,0.2)"});
        this.path2D.path(p2d);
        
        const t = option.t || 200, 
        mr = option.mr || this.box.distanceFromPoint(x, y, true),
        cid = option.cir, animateLoop = option.animateLoop || new AnimateLoop(null, null, 1000 / 30);
        
        var r = 0, 
        st = Date.now();

        x -= this.x;
        y -= this.y;
        
        animateLoop.play(() => {
            if(r <= mr){
                r = (Date.now() - st) / t * mr;
                p2d.arc(x, y, r, 0, pi2, false);
            } else {
                animateLoop.stop();
                this.path2D = oldPath2D;
            }
            
            cid.redraw();
        });

        return () => {
            animateLoop.stop();
            this.path2D = oldPath2D;
        }
    }

    _loadSuccess(image, onload){
        this.setImage(image);
        
        this.#loadingImage = false;
        if(Array.isArray(this.__setImageList)){
            this.__setImageList.forEach(ci => ci.setImage(image));
            delete this.__setImageList;
        }

        if(typeof onload === "function") onload(this);
        else if(CanvasImageDraw.prototype.isPrototypeOf(onload)){
            if(onload.domElement.parentElement !== null) onload.redraw();
            else onload.render();
        }
    }

}


/* CanvasImageCustom
parameter:
    canvas || image || undefined
    value: Path2D || undefined //如果未定义,初始化时创建一个Path2D,如果是其它值则不创建(例如 null,new Path2D())

attribute:
    value: Path2D; //更换新的 value, 类似 context.beginPath();

method:
    //以下是操作 画布 的方法
    cloneCanvas(canvas, dx = 0, dy = 0)
    clear(): this;
    size(w, h: Number): this;
    stroke(color: strokeColor, lineWidth: Number): this;
    fill(color: fillColor): this;
    
    //以下是操作 Path2D 的方法
    line(x, y, x1, y1: Number): this;
    path(arr: Array[x,y], close: Bool): this;
    rect(round, lineWidth: Number): this;
    strokeRect(color: strokeColor, round, lineWidth: Number): this;
    fillRect(color: fillColor, round, lineWidth: Number): this;

    //文字
    setFontSize(fontSize): this;
    getTextWidth(text): Number;
    fillText(text, color, x): this; //填充文字,x 如果未定义则居中显示 (y 默认为居中)
    fillTextWrap(value, option): this; //填充文字或图像,可以自动换行
        value: string || Array[...string]
        option: Object{
            color,         //context.fillStyle, 默认 this.fillStyle
            padding,    //内边距, 可能的值: Number || Object{top,right,bottom,left:Number}, 默认 0
            distance,    //文字之间的间距, 可能的值: Number || Object{x,y:Number}, 默认 0
            width,         //如果定义则内部调用.size(w, h)方法
            height,        //必须定义width才有效, 默认 text排序后占的高
            ePos: Object{x, y}, //如果定义就在其上设置结束时的位置
        }
    
demo:
    const cic = new CanvasImageCustom(null, null).size(100, 100);
    const cid = new CanvasImageDraw({object: cic}).render();
    cic.fillTextWrap("abcdefg");
*/
class CanvasImageCustom extends CanvasImage{

    constructor(canvas, value){
        super(canvas);
        this.value = value === undefined ? new Path2D() : null;
        this.fillStyle = CanvasImageDraw.defaultStyles.fillStyle;
        this.strokeStyle = CanvasImageDraw.defaultStyles.strokeStyle;
        this.lineWidth = CanvasImageDraw.defaultStyles.lineWidth;
        this.fontSize = parseFloat(CanvasImageDraw.defaultStyles.font);
    }

    cloneCanvas(canvas, dx = 0, dy = 0){
        if(CanvasImageDraw.isCanvas(canvas) === false){
            canvas = document.createElement("canvas");
            canvas.width = this.width;
            canvas.height = this.height;
        }
    
        canvas.getContext("2d").drawImage(this.image, dx, dy);
    
        return canvas;
    }

    setImage(image){
        if(CanvasImageDraw.isCanvas(image)){ //image 如果是画布
            super.setImage(image);
            this.context = CanvasImageDraw.getContext(image);
            this.size(image.width, image.height);
        }else{
            if(CanvasImageDraw.isCanvasImage(image)){ //image 如果是图像
                this.context = CanvasImageDraw.getContext();
                super.setImage(this.context.canvas);
                this.size(image.width, image.height);
                this.context.drawImage(image, 0, 0);
            }else{ //image 如果是其它对象
                this.context = CanvasImageDraw.getContext();
                super.setImage(this.context.canvas);
                this.size(this.width, this.height);
            }
        }
        
        return this;
    }

    clear(){
        this.context.clearRect(0, 0, this.width, this.height); //this.context.clearRect(0, 0, this.box.w, this.box.h);
        return this;
    }

    size(w, h){
        switch(typeof w) {
            case "number": 
            this.box.size(w, h);
            break;
            case "object": 
            this.box.size(w.width||w.w||this.box.w, w.height||w.h||this.box.h);
            break;
        }
        
        this.image.width = this.box.w;
        this.image.height = this.box.h;
        CanvasImageDraw.setDefaultStyles(this.context);
        
        if(this.context.fillStyle !== this.fillStyle) this.context.fillStyle = this.fillStyle; //
        if(this.context.strokeStyle !== this.strokeStyle) this.context.strokeStyle = this.strokeStyle; //
        if(this.context.lineWidth !== this.lineWidth) this.context.lineWidth = this.lineWidth; //
        if(parseFloat(this.context.font) !== this.fontSize) this.context.font = this.fontSize+"px SimSun, Songti SC";
    
        return this;
    }

    stroke(color = this.strokeStyle, lineWidth = this.lineWidth){
        if(color !== "" && this.strokeStyle !== color) this.strokeStyle = this.context.strokeStyle = color;
        if(UTILS.isNumber(lineWidth) && this.lineWidth !== lineWidth) this.lineWidth = this.context.lineWidth = lineWidth;
        this.context.stroke(this.value);
        return this;
    }

    fill(color = this.fillStyle){
        if(color !== "" && this.fillStyle !== color) this.fillStyle = this.context.fillStyle = color;
        this.context.fill(this.value);
        return this;
    }

    line(x, y, x1, y1){
        this.value.moveTo(x, y);
        this.value.lineTo(x1, y1);
        return this;
    }

    path(arr, close = false){
        this.value.moveTo(arr[0], arr[1]);
        for(let k = 2, len = arr.length; k < len; k += 2) this.value.lineTo(arr[k], arr[k+1]);
        if(close === true) this.value.closePath();
        return this;
    }

    rect(round = 4, lineWidth = this.lineWidth){
        if(UTILS.isNumber(lineWidth) && this.lineWidth !== lineWidth) this.lineWidth = this.context.lineWidth = lineWidth;
        const l_2 = lineWidth / 2;
        this.value.roundRect(l_2, l_2, this.box.w - lineWidth, this.box.h - lineWidth, round);
        return this;
    }

    strokeRect(color = this.strokeStyle, round = 4, lineWidth = this.lineWidth){
        if(color !== "" && this.strokeStyle !== color) this.strokeStyle = this.context.strokeStyle = color;
        this.rect(round, lineWidth);
        this.context.stroke(this.value);
        return this;
    }

    fillRect(color = this.fillStyle, round = 4){
        if(color !== "" && this.fillStyle !== color) this.fillStyle = this.context.fillStyle = color;
        this.rect(round);
        this.context.fill(this.value);
        return this;
    }

    setFontSize(fontSize = this.fontSize){
        if(UTILS.isNumber(fontSize) && fontSize > 1 && this.fontSize !== fontSize){
            this.fontSize = fontSize;
            this.context.font = fontSize+"px SimSun, Songti SC";
        }
        return this;
    }

    getTextWidth(text){
        return this.context.measureText(text).width;
    }

    fillText(value = "empty", color = this.fillStyle, x){
        if(color !== "" && this.fillStyle !== color) this.fillStyle = this.context.fillStyle = color;
        if(x === undefined){
            const w = this.context.measureText(value).width;
            x = w < this.box.w ? (this.box.w - w) / 2 : 0;
        }
        this.context.fillText(value, x, (this.box.h - this.fontSize) / 2);
        return this;
    }

    fillTextWrap(value, option = {}){
        if(value.length === 0) return this;
        if(option.color !== undefined && this.fillStyle !== option.color) this.fillStyle = this.context.fillStyle = option.color;

        const con = this.context, pos = [], 
        mw = option.width || this.box.w,

        padIsObj = UTILS.isObject(option.padding),
        padT = padIsObj ? padIsObj.top : option.padding || 0,
        padR = padIsObj ? padIsObj.right : option.padding || 0,
        padB = padIsObj ? padIsObj.bottom : option.padding || 0,
        padL = padIsObj ? padIsObj.left : option.padding || 0,

        disIsObj = UTILS.isObject(option.distance),
        disX = disIsObj ? disIsObj.x : option.distance || 0,
        disY = disIsObj ? disIsObj.y : option.distance || 0;

        var y = padT, x = padL;
        for(let i = 0, w; i < value.length; i++){
            w = con.measureText(value[i]).width;
            if(x + w + disX + padR > mw){
                x = w + padL + disX;
                y += this.fontSize + disY;
                pos.push(padL, y);
            } else {
                pos.push(x, y);
                x += w + disX;
            }
        }
        
        if(option.width !== undefined) this.size(option.width, option.height || (y + this.fontSize + padB));
        for(let i = 0; i < pos.length; i += 2) con.fillText(value[i / 2], pos[i], pos[i+1]);
        
        if(option.ePos !== undefined){
            option.ePos.x = x;
            option.ePos.y = y;
        }

        return this;
    }

}


/* CanvasImages
parameter: 
    images: Array[image]

attribute:
    images: Array[image]    
    cursor: Number;
    
method:
    next(): undefined;
    loadImages(urls, onDone, onUpdate): CanvasImages;
        urls: Array[String||Object{url||src:String}];
        onDone, onUpdate: Function;

demo:
    const cis = new CanvasImages([imgA, imgB]);
    cis.next();
*/
class CanvasImages extends CanvasImage{

    #i = -1;
    get cursor(){return this.#i;}
    set cursor(i){this.set(i);}

    constructor(images = []){
        super(images[0]);
        this.images = images;
        if(this.image !== null) this.#i = 0;
    }

    set(i){
        super.setImage(this.images[i]);
        this.#i = this.image !== null ? i : -1;
    }

    next(){
        const len = this.images.length - 1;
        if(len !== -1){
            this.#i = this.#i < len ? this.#i++ : 0;
            this.image = this.images[this.#i] || null; //super.setImage(this.images[this.#i]);
        }
    }

    setImage(image){
        super.setImage(image);
    
        if(this.image !== null && Array.isArray(this.images)){
            const i = this.images.indexOf(this.image);
            if(i === -1){
                this.#i = this.images.length;
                this.images.push(this.image);
            }
            else this.#i = i;
        }

        return this;
    }

    loadImages(srcs, onDone, onUpdate){
        onUpdate = typeof onUpdate === "function" ? onUpdate : null;
        var i = 0, c = srcs.length, img = null, _i = this.images.length;

        const len = srcs.length, 
        func = ()=>{
            i++; if(onUpdate !== null) onUpdate(this.images, _i);
            if(i === c && typeof onDone === "function"){
                this.cursor = 0;
                onDone(this.images, _i, srcs);
            }
            else _i++;
        }

        for(let k = 0, ty = ""; k < len; k++){
            ty = typeof srcs[k];
            if(ty === "string" || ty === "object"){
                ty = ty === "string" ? srcs[k] : srcs[k].src || srcs[k].url;
                if(ty !== "" && typeof ty === "string"){
                    img = new Image();
                    img.onload = func;
                    this.images.push(img);
                    img.src = ty;
                }
                else c--;
            }
        }

        return this;
    }

}


const emptyCIC = new CanvasImageCustom(null, null);


/* ProgressBar 进度条
    option: Object{
        min
        max
        width    //默认 value 的宽
        height    //默认 textSize
        cursorSize
        backgroundColor    //默认 #000000
        borderSize
        borderColor
        borderRadius
    }
*/
class CanvasProgressBar{

    #background = new CanvasImage();
    #cursor = new CanvasImage();
    #box = new Box();
    get box(){return this.#box;}
    
    constructor(option = {}){
        const width = option.width || 100, height = option.height || 4, 
        borderRadius = option.borderRadius || 0,
        cursorSize = option.cursorSize || 8,
        borderColor = option.borderColor || "#ffffff";

        emptyCIC.value = new Path2D();
        const backgroundImage = emptyCIC.size(width, height)
        .rect(option.borderSize || 0, borderRadius)
        .fill(option.backgroundColor || "#000000")
        .stroke(borderColor, borderRadius)
        .cloneCanvas();

        emptyCIC.value = new Path2D();
        const cursorImage = emptyCIC.size(cursorSize, cursorSize)
        .fillRect(borderColor, cursorSize/2)
        .cloneCanvas();

        this.#background.setImage(backgroundImage);
        this.#cursor.setImage(cursorImage);

        if(width > height){
            this.#box.size(width, Math.max(cursorSize, height));
        } else {
            this.#box.size(Math.max(cursorSize, width), height);
        }

        this.min = option.min || 0;
        this.max = option.max || 100;
    }

    setCursor(v){ //v 为 min 与 max 之间
        const s = v / (this.max - this.min);
        if(this.#box.w > this.#box.h){
            this.#cursor.box.x = (this.box.w - this.#cursor.w) * s + this.box.x;
        } else {
            this.#cursor.box.y = (this.box.h - this.#cursor.h) * s + this.box.y;
        }
    }

    visible(v){
        this.#background.visible = this.#cursor.visible = v;
    }

    pos(x, y){
        if(this.#box.w > this.#box.h){
            this.#cursor.pos(this.#cursor.x - this.#box.x + x, y - (this.#cursor.h - this.#background.h) / 2);
        } else {
            this.#cursor.pos(x - (this.#cursor.w - this.#background.w) / 2, this.#cursor.y - this.#box.y + y);
        }

        this.#box.pos(x, y);
        this.#background.pos(x, y);
    }

    addToList(arr){
        arr.push(this.#background, this.#cursor);
    }

    removeToList(arr){
        const i = arr.indexOf(this.#background);
        if(i !== -1) arr.splice(i, 2);
    }

    bindEvent(cir, onchange){
        var sx = 0, ox = 0;
        this.#cursor.addEventListener("down", v =>{
            if(this.#box.w > this.#box.h){
                sx = v.offsetX - this.#cursor.x;
            } else {
                sx = v.offsetY - this.#cursor.y;
            }
        });

        this.#cursor.addEventListener("move", v => {
            if(this.#box.w > this.#box.h){
                const mx = this.#box.mx, nx = v.offsetX - sx;
                if(nx + this.#cursor.w > mx) this.#cursor.box.x = mx - this.#cursor.w;
                else if(nx < this.#box.x) this.#cursor.box.x = this.#box.x;
                else this.#cursor.box.x = nx;
                if(ox !== this.#cursor.box.x){
                    onchange((this.#cursor.x - this.#box.x) / (this.#box.w - this.#cursor.w) * (this.max - this.min));
                    ox = this.#cursor.box.x;
                }
            } else {
                const my = this.#box.my, ny = v.offsetY - sx;
                if(ny + this.#cursor.h > my) this.#cursor.box.y = my - this.#cursor.h;
                else if(ny < this.#box.y) this.#cursor.box.y = this.#box.y;
                else this.#cursor.box.y = ny;
                if(ox !== this.#cursor.box.y){
                    onchange((this.#cursor.y - this.#box.y) / (this.#box.h - this.#cursor.h) * (this.max - this.min));
                    ox = this.#cursor.box.y;
                }
            }
            cir.redraw();
        });
    }

}


/* CanvasTextView 
    value: String; //默认 "Button";
    option: Object{
        width    //默认 value 的宽
        height    //默认 textSize

        margin    //border以外的间隔 默认 0
        padding    //border以内的间隔 默认 0

        backgroundColor    //默认 #000000

        textSize    //默认 12
        textColor     //默认 #ffffff

        borderColor        //默认 #000000
        borderSize        //默认 0
        borderRadius    //默认 0

        disableColor    //如果定义就创建一个禁用样式的图片
        selectColor        //如果定义就创建一个选取样式的图片
    }

    disableStyle(): undefined;     //切换为禁用样式
    selectStyle(): undefined;     //切换选取样式
    defaultStyle(): undefined;     //切换默认样式
*/
class CanvasTextView extends CanvasImage{

    #selectImage = null;
    #disableImage = null;
    #image = null;

    #value = "";
    get value(){return this.#value;}

    constructor(value, option = {}){
        value = value !== "" && typeof value === "string" ? value : "Button";

        //option
        const textColor = option.textColor !== undefined ? option.textColor : "#ffffff",
        textSize = UTILS.isNumber(option.textSize) ? option.textSize : 12;
        emptyCIC.setFontSize(textSize);

        const textWidth = emptyCIC.context.measureText(value).width,
        width = UTILS.isNumber(option.width) ? option.width : textWidth,
        height = UTILS.isNumber(option.height) ? option.height : textSize,

        padding = UTILS.isNumber(option.padding) ? option.padding * 2 : 0,
        margin = UTILS.isNumber(option.margin) ? option.margin * 2 : 0,

        bgc = option.backgroundColor !== undefined ? option.backgroundColor : "#000000",

        borderColor = option.borderColor !== undefined ? option.borderColor : textColor,
        borderSize = UTILS.isNumber(option.borderSize) ? option.borderSize : 0,
        borderRadius = UTILS.isNumber(option.borderRadius) ? option.borderRadius : 0;

        //image
        emptyCIC.value = new Path2D();
        emptyCIC.size(width + padding + borderSize, height + padding + borderSize)
        .rect(borderRadius, borderSize).fill(bgc)
        .fillText(value, textColor, textWidth < emptyCIC.w ? (emptyCIC.box.w - textWidth) / 2 : 0)
        if(borderSize > 0) emptyCIC.stroke(borderColor, borderSize);

        //margin
        const context = CanvasImageDraw.getContext(), canvas = context.canvas;
        canvas.width = emptyCIC.box.w + margin;
        canvas.height = emptyCIC.box.h + margin;
        context.drawImage(emptyCIC.image, margin, margin);

        //disableColor
        var disableImage = null;
        if(option.disableColor !== undefined){
            const context = CanvasImageDraw.getContext();
            disableImage = context.canvas;
            disableImage.width = canvas.width;
            disableImage.height = canvas.height;
            context.drawImage(emptyCIC.fill(option.disableColor).image, margin, margin);
        }

        //selectColor
        var selectImage = null;
        if(option.selectColor !== undefined){
            const context = CanvasImageDraw.getContext();
            selectImage = context.canvas;
            selectImage.width = canvas.width;
            selectImage.height = canvas.height;
            emptyCIC.clear().context.drawImage(canvas, 0, 0);
            context.drawImage(emptyCIC.fill(option.selectColor).image, margin, margin);
        }

        super(canvas);
        this.#disableImage = disableImage;
        this.#selectImage = selectImage;
        this.#value = value;
        this.#image = this.image;
    }

    disableStyle(){
        this.image = this.#disableImage;
    }

    selectStyle(){
        this.image = this.#selectImage;
    }

    defaultStyle(){
        this.image = this.#image;
    }
    
}

/* CanvasTreeList extends TreeStruct 树结构展示对象
parameter:
    object: Object,
    info: Object{
        name_attributesName: String, //object[name_attributesName]
        iamges_attributesName: String,
        iamges: Object{
            object[iamges_attributesName]: Image
        },
    },
    option: Object, //参见 CanvasIconMenu 的 option

attribute:
    objectView: CanvasIconMenu;        //object 展示视图(文字)
    childIcon: CanvasImages;        //子视图隐藏开关(三角形图标)
    childView: CanvasImageCustom;    //子视图 (线)

    //此属性内部自动更新, 表示自己子视图的高 
    //为什么不直接用 childView.box.h 代替? 
    //因为如果cir存在scroll则box的属性将会变成一个"状态机", 
    //所以就是为了不让它高频率的更新box的属性
    childViewHeight: Number;
    
    //只读: 
    object: Object;            //
    visible: Bool;            //自己是否已经显示
    root: CanvasTreeList;    //向上遍历查找自己的root
    rect: Box;                //new一个新的box并根据自己和所有子更新此box的值
    box: Box;                //返回 CanvasIconMenu.box

method:
    bindEvent(cir: CanvasImageDraw, root: CanvasTreeList): this; //绑定默认事件
    unbindEvent(): undefined;                 //解绑默认事件 (如果此类不在使用的话可以不用解除事件)

    addToList(arr: Array);                    //添加到数组, arr一般是 CanvasImageDraw.list 渲染队列
    removeToList(arr: Array);                //从数组删除
    
    visibleChild(root): undefined;             //显示 (如果自己为隐藏状态则会想查找已显示的ctl,并从ctl展开至自己为止)
    hiddenChild(root): undefined;            //隐藏

    getByObject(object): CanvasTreeList;    //查找 如果不存在返回 undefined;
    setName(name: String, arr: Array);        //销毁已有的.objectView, 重新创建.objectView
    pos(x, y: Number): this;                //此方法是专门为 root 设的; 如果你让不是root的root调用root的方法的话 也行

    //删除自己和所有的下级 例子:
    removeChild(cir){
        const i = cir.list.length;
        this.traverse(v => {
            v.unbindEvent(); //删除事件
            v.removeToList(cir.list); //删除视图
        });
        
        //删除结构
        const parent = this.parent;
        parent.removeChild(this);
        
        //结尾
        parent.visibleChild(); //如果已知 root 就戴上, 否则它会自己寻找root
        cir.redraw();
    }

demo:
    const info = {
        name_attributesName: "CTL_name",
        iamges_attributesName: "className",
        images: {
            CanvasImage: emptyCIC.size(20, 20).rect().fill("blue").shear(),
            CanvasImages: emptyCIC.size(20, 20).rect().stroke("blue").shear(),
        },
    }

    const cir = new CanvasImageDraw({width: innerWidth, height: innerHeight});
    const cie = new CanvasImageEvent(cir);

    const onclick = function (event) {
        ctl_root.traverse(ctl => console.log(ctl.visible, ctl.childViewHeight))
    }

    const ctl_root = new CanvasTreeList(new CanvasImage(), info)
    .addToList(cir.list)
    .bindEvent(cir, cie, onclick);

    ctl_root.appendChild(new CanvasTreeList(new CanvasImages(), info))
    .addToList(cir.list)
    .bindEvent(cir, cie, onclick);

    ctl_root.pos(10, 10).visibleChild();
    cir.render();
*/
class CanvasTreeList extends TreeStruct{

    static info = null;

    static childLineStyle = {
        strokeStyle: "#ffffff",
        lineWidth: 2,
    }

    #info = null;
    #option = null;
    #object = null;
    get object(){
        return this.#object;
    }

    #visible = false;
    get visible(){
        return this.#visible;
    }

    get root(){
        var par = this;
        while(true){
            if(par.parent === null) break;
            par = par.parent;
        }
        return par;
    }

    get rect(){
        var maxX = this.objectView.background.box.mx, _x;
        this.traverse(ctl => {
            if(ctl.visible === true){
                _x = ctl.objectView.background.box.mx;
                maxX = Math.max(_x, maxX);
            }
        });
        
        const masksOffset = this.objectView.masksOffset, x = this.childIcon.box.x - masksOffset;

        return new Box(x, this.childIcon.box.y - masksOffset, maxX - x, this.childViewHeight + this.objectView.background.box.h);
    }

    get box(){
        return this.objectView.box;
    }

    constructor(object, info = CanvasTreeList.info, option = Object.assign({}, CanvasIconMenu.option)){
        if(UTILS.isObject(object) === false) return console.warn("[CanvasTreeList] 参数错误: ", object);
        super();
        this.#object = object;
        this.#info = info;
        this.#option = option;
    
        //this.objectView
        this.setName();

        //this.childIcon
        const size = this.objectView.contentHeight, x = (size - option.textSize) / 2, s = x + option.textSize;
        this.childIcon = new CanvasImages([
            emptyCIC.size(size, size).rect(option.borderRadius, option.borderSize).fill(option.backgroundColor)
            .path([x, x, x, s, s, size/2], true).fill(option.textColor).cloneCanvas(),
            emptyCIC.size(size, size).rect(option.borderRadius, option.borderSize).fill(option.backgroundColor)
            .path([x, x, s, x, size/2, s], true).fill(option.textColor).cloneCanvas(),
        ]);
        
        //this.childView
        this.childView = new CanvasImageCustom().size(1,1);
        this.childView.box.size(CanvasTreeList.childLineStyle.lineWidth || 1, 0);
        this.childView.path2D = new CanvasPath2D("stroke", CanvasTreeList.childLineStyle, true);
        this.childView.path2D.line(new Line());
        this.childViewHeight = 0;
        
        //visible
        this.childIcon.cursor = 0;
        this.childIcon.visible = 
        this.objectView.background.visible = 
        this.objectView.icons.visible = 
        this.objectView.masks.visible = 
        this.childView.visible = false;
    }

    getByObject(object){
        if(UTILS.isObject(object) === false) return;
        var result;
        this.traverse(ctl => {
            if(result !== undefined) return "continue";
            if(ctl.object === object){
                result = ctl;
                return "continue";
            }
        });
        return result;
    }

    setName(name, arr, cis){
        var objectView;

        if(UTILS.isObject(this.#info)){
            const objectType = this.#object[this.#info.iamges_attributesName];

            if(typeof name === "string" && name !== ""){
                this.#object[this.#info.name_attributesName] = name;
            }else if(typeof this.#object[this.#info.name_attributesName] === "string" && this.#object[this.#info.name_attributesName] !== ""){
                name = this.#object[this.#info.name_attributesName];
            }else{
                name = objectType;
            }

            objectView = new CanvasIconMenu(this.#info.images[objectType], name, this.#option);
        }

        else objectView = new CanvasIconMenu(null, "", this.#option);

        //补遮罩层样式
        objectView.createMasksImages();

        //const scope = this;
        //Object.defineProperty(objectView.background, "scope", {get (){return scope;}});

        //更改渲染队列
        if(CanvasIconMenu.prototype.isPrototypeOf(this.objectView)){
            if(Array.isArray(arr)){
                const i = arr.indexOf(this.objectView.background);
                if(i !== -1){
                    //scroll
                    if(CanvasImageScroll.prototype.isPrototypeOf(cis)){
                        cis.bindScroll(objectView.background);
                        cis.bindScroll(objectView.icons);
                        cis.bindScroll(objectView.masks);
                        cis.resetMaxSizeX();
                        cis.resetMaxSizeY();
                    }

                    arr[i] = objectView.background;
                    arr[i+1] = objectView.icons;
                    arr[i+2] = objectView.masks;

                    objectView.background.index = i;
                    objectView.icons.index = i+1;
                    objectView.masks.index = i+2;

                    objectView.background.visible = this.objectView.background.visible;
                    objectView.icons.visible = this.objectView.icons.visible;
                    objectView.masks.visible = this.objectView.masks.visible;

                    objectView.icons.cursor =  this.objectView.icons.cursor;
                    objectView.masks.cursor =  this.objectView.masks.cursor;

                    objectView.pos(this.objectView.box.x, this.objectView.box.y);

                    this.objectView = objectView;

                }else console.warn("[CanvasTreeList] setName: 修改失败, 无法找到目标");
            }else console.warn("[CanvasTreeList] setName: 第二个参数为Array");
        }

        else this.objectView = objectView;
    }

    pos(x, y){
        if(this.#visible === false){
            this.childIcon.cursor = 1;
            this.childIcon.visible = 
            this.childView.visible = true;

            this.#visible = 
            this.objectView.background.visible = 
            this.objectView.icons.visible = 
            this.objectView.masks.visible = true;
        }
    
        const masksOffset = this.objectView.masksOffset;
        this.childIcon.pos(masksOffset+x, masksOffset+y); 
        this.objectView.pos(this.childIcon.box.mx, this.childIcon.box.y - masksOffset);
        this.childView.box.pos(this.childIcon.box.x + this.childIcon.box.w / 2, this.objectView.background.box.my);
        return this;
    }

    addToList(arr){
        this.traverse(ctl => {
            arr.push(ctl.childIcon, ctl.objectView.background, ctl.objectView.icons, ctl.objectView.masks, ctl.childView);
        });
        
        return this;
    }

    removeToList(arr){
        this.traverse(ctl => {
            const i = arr.indexOf(ctl.childIcon);
            if(i !== -1) arr.splice(i, 5);
        });
    }

    visibleChild(root = this.root){
        this.childIcon.cursor = 1;
        if(root !== this){
            this.childIcon.visible = 
            this.childView.visible = this.children.length === 0 ? false : true;
        }
        
        if(this.#visible){
            this._visibleChild();
            root.childViewHeight = 0;
            root._updateSizeChild();
            root._updatePositionChild();
            root.childView.box.h = root.childView.path2D.value.y1 = root.childViewHeight;
        }else{
            if(root === this) return console.warn("[CanvasTreeList] visibleChild: 展开失败, 请使用 root.pos() 方法初始化root");
            let _ctl = root;
            this.traverseUp(ctl => {
                if(ctl.visible){
                    _ctl = ctl;
                    return "break";
                }
                if(ctl.childIcon.cursor !== 1) ctl.childIcon.cursor = 1;
            });
            _ctl.visibleChild(root);
        }
    }

    hiddenChild(root = this.root){
        if(this.#visible){
            this.childIcon.cursor = 0;
            this._hiddenChild();
            root.childViewHeight = 0;
            root._updateSizeChild();
            root._updatePositionChild();
            root.childView.box.h = root.childView.path2D.value.y1 = root.childViewHeight;
        }
    }

    //修改: 包括自己所有的子
    bindEvent(cir, root){
        if(CanvasTreeList.prototype.isPrototypeOf(root) === false || root.parent !== null) console.warn("CanvasTreeList: 请显示声明 root");
        
        const onup = info => {
            if(info.delta < 600){
                if(this.childIcon.cursor === 0) this.visibleChild(root);
                else if(this.childIcon.cursor === 1) this.hiddenChild(root);
                cir.redraw();
            }
        }

        this.childIcon.addEventListener("up", onup);
        this.__unbindEvent = () => {
            this.childIcon.removeEventListener("up", onup);
        }
    }

    unbindEvent(){
        unbindEvent.call(this);
    }

    //以下属性限内部使用
    _visible(){
        if(this.#visible === false){
            this.childIcon.visible = 
            this.childView.visible = this.children.length === 0 ? false : true;

            this.#visible = 
            this.objectView.background.visible = 
            this.objectView.icons.visible = 
            this.objectView.masks.visible = true;
        }
    }

    _visibleChild(){
        for(let k = 0, len = this.children.length, child; k < len; k++){
            child = this.children[k];
            child._visible();
            if(child.childIcon.cursor === 1) child._visibleChild();
        }
    }

    _hidden(){
        if(this.#visible === true){
            this.#visible = 
            this.childIcon.visible = 
            this.objectView.background.visible = 
            this.objectView.icons.visible = 
            this.objectView.masks.visible = 
            this.childView.visible = false;
        }
    }

    _hiddenChild(){
        for(let k = 0, len = this.children.length, child; k < len; k++){
            child = this.children[k];
            child._hidden();
            child._hiddenChild();
        }
    }

    _updateSize(){
        const itemHeight = this.objectView.background.box.h;
        var par = this.parent;
        while(par !== null){
            par.childViewHeight += itemHeight;
            par.childView.path2D.value.y1 = par.childViewHeight;
            par = par.parent;
        }
    }

    _updateSizeChild(){
        for(let k = 0, len = this.children.length, child; k < len; k++){
            child = this.children[k];
            child.childView.path2D.value.y1 = child.childViewHeight = 0;
            if(child.visible){
                child._updateSize();
                child._updateSizeChild();
            }
        }
    }

    _updatePosition(outCTL){
        const masksOffset = this.parent.objectView.masksOffset,  
        mx_parent = this.parent.childIcon.box.mx,
        my_outCTL = outCTL !== undefined ? outCTL.childView.box.y+outCTL.childViewHeight : this.parent.objectView.background.box.my;
        
        //childIcon
        this.childIcon.pos(
            mx_parent + masksOffset, 
            my_outCTL + masksOffset
        );
        
        //objectView
        this.objectView.pos(
            this.childIcon.visible === true ? this.childIcon.box.mx : mx_parent, 
            my_outCTL
        );
        
        //childView
        this.childView.box.pos(mx_parent + this.childIcon.box.w / 2, this.objectView.background.box.my);
        this.childView.box.h = this.childViewHeight;
    }

    _updatePositionChild(){
        for(let k = 0, len = this.children.length, outChild, child; k < len; k++){
            child = this.children[k];
            if(child.visible){
                child._updatePosition(outChild);
                child._updatePositionChild();
                outChild = child;
            }
        }
    }

}


export {
    ElementUtils,
    CanvasPath2D,
    CanvasEvent,
    CanvasImageScroll,
    CanvasImageDraw,
    CanvasImage, 
    CanvasImages,
    CanvasImageCustom,
    CanvasProgressBar,
    CanvasTextView,
    CanvasTreeList,
}

 

开始:

<!DOCTYPE html>
<html lang = "zh-cn">
    
    <head>
        <title>testCanvas</title>
        <meta charset = "utf-8" />
        <style>
            *{
                margin:0;
                padding: 0;
            }
            body{
                overflow: hidden;
            }
        </style>
    </head>

    <body>

        <script src = "./view/js/main.js" type = "module"></script>

    </body>

</html>

 

main.js

import { CanvasImage, CanvasImageDraw, CanvasImageScroll } from "./ElementUtils.js";
import { UTILS } from "./Utils.js";


const PI2 = Math.PI * 2;

/* 测试 canvas 旋转

*/
function main(){

    //CanvasImage 的渲染器
    const cid = new CanvasImageDraw({width: innerWidth, height: innerHeight}),

    //渲染器的滚动条(此类暂时还很简陋,支持移动和桌面端)
    cis = new CanvasImageScroll(cid, {scrollSize: 8}),

    //加载图片
    image = new CanvasImage().loadImage("./view/img/31.jpg", () => {

        //随机旋转所有的 CanvasImage
        //因为创建 CanvasImage 时其图片没有加载完
        //无法获取其宽高, 而旋转的中心点(局部位置)需要知道宽高才行
        //所以要等这张图片加载完后在创建旋转
        //所以在这里创建旋转
        for(let i = 0; i < cid.list.length; i++) cid.list[i].createRotate(UTILS.random(0, PI2));

        //sortCIPosEquals: ci的位置排序
        cid.sortCIPosEquals(null, {
            disX: 10, //ci之间的间距
            disY: 10, 
            lenX: 5, //x轴最多5个数
        });

        //render 把画布添加至dom树
        cid.render(document.body);

    });

    //批量创建 CanvasImage
    for(let i = 0; i < 1000; i++){
        //内部用.setImage(image) 方法处理参数, 
        //此方法有个特性就是可以监听其它CanvasImage加载完图片时自动设置自己的图片, 前提时参数必须时 CanvasImage
        //所以 image 变量只是当作一个加载图片的工具而已,没其它用处
        //如果传的是其它类实例也有其它效果
        const ci = new CanvasImage(image);

        //cis.bindScroll(ci: CanvasImage) 方法可以使滚动条(cis)能够监听ci的位置和ci.visible属性的变化来更新滚动条
        //cis.changeCIAdd(ci: CanvasImage) 方法根据ci主动更新一次滚动条
        cis.bindScroll(ci);
        cis.changeCIAdd(ci);

        //加入到渲染器(cid)队列
        cid.list[i] = ci;
    }

    console.log(cid, cis);
}

main();