js 原生 canvas 颜色调试器 (CanvasImageRender.js)

"use strict";

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

    emptyArray(arr){
        return !Array.isArray(arr) || arr.length === 0;
    },

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

    isObject(obj){
        
        return obj !== null && typeof obj === "object" && Array.isArray(obj) === false;
        
    },
    
    isNumber(num){

        return typeof num === "number" && isNaN(num) === false;

    },

    //获取最后一个点后面的字符
    getFileType(string){
        let type = "", str = string.split('').reverse().join('');
        for(let k = 0, len = str.length; k < len; k++){
            if(str[k] === ".") break;
            type += str[k];
        }
        return type.split('').reverse().join('');
    },

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

        return result
    },

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

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

    },

    //返回 num 与 num1 之间的随机数
    random(num, num1){
        
        if(num < num1) return Math.random() * (num1 - num) + num;

        else if(num > num1) return Math.random() * (num - num1) + num1;

        else return num;
        
    },

    //生成 UUID
    generateUUID: function (){
        const _lut = [];
    
        for ( let i = 0; i < 256; i ++ ) {
    
            _lut[ i ] = ( i < 16 ? '0' : '' ) + ( i ).toString( 16 );
    
        }
    
        return function (){
            const d0 = Math.random() * 0xffffffff | 0;
            const d1 = Math.random() * 0xffffffff | 0;
            const d2 = Math.random() * 0xffffffff | 0;
            const d3 = Math.random() * 0xffffffff | 0;
            const uuid = _lut[ d0 & 0xff ] + _lut[ d0 >> 8 & 0xff ] + _lut[ d0 >> 16 & 0xff ] + _lut[ d0 >> 24 & 0xff ] + '-' +
            _lut[ d1 & 0xff ] + _lut[ d1 >> 8 & 0xff ] + '-' + _lut[ d1 >> 16 & 0x0f | 0x40 ] + _lut[ d1 >> 24 & 0xff ] + '-' +
            _lut[ d2 & 0x3f | 0x80 ] + _lut[ d2 >> 8 & 0xff ] + '-' + _lut[ d2 >> 16 & 0xff ] + _lut[ d2 >> 24 & 0xff ] +
            _lut[ d3 & 0xff ] + _lut[ d3 >> 8 & 0xff ] + _lut[ d3 >> 16 & 0xff ] + _lut[ d3 >> 24 & 0xff ];
    
            return uuid.toLowerCase(); //toLowerCase() 这里展平连接的字符串以节省堆内存空间
        }
    }(),

    //欧几里得距离(两点的直线距离)
    distance(x, y, x1, y1){
        
        return Math.sqrt(Math.pow(x - x1, 2) + Math.pow(y - y1, 2));

    },

    downloadFile(blob, fileName){
        const link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
    },

    loadFileJSON(callback){
        const input = document.createElement("input");
        input.type = "file";
        input.accept = ".json";
        
        input.onchange = a => {
            if(a.target.files.length === 0) return;
            const fr = new FileReader();
            fr.onloadend = b => callback(b.target.result);
            fr.readAsText(a.target.files[0]); //fr.readAsDataURL(a.target.files[0]);
        }
        
        input.click();
    },

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

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

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

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

        const width = target.width,
        height = target.height,
        ratio = width / height,
        scale = ratio < 1 ? ratio * result.width / width : result.width / width;

        result.width = width * scale;
        result.height = height * scale;

        return result;
    },

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

}




/* 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){
        if(UTILS.emptyArray(list) === false) this.#list = list;
    }

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

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

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

}




/* RunningList

*/
class RunningList{

    #runName = "";
    #running = false;
    #list = [];
    #disabls = [];

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

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

}




/* AnimateLoop 动画循环
method:
    play(onupdate: Func): this; //onupdate 可选
    stop(): this;
*/
class AnimateLoop{

    #id = -1;
    #animate = null;

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

    constructor(onupdate = null){
        const animate = () => {
            this.#id = requestAnimationFrame(animate);
            this.onupdate();
        }

        this.#animate = animate;
        this.onupdate = onupdate;
    }

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

    play(onupdate){
        if(typeof onupdate === "function") this.onupdate = onupdate;
        if(this.onupdate !== null){
            this.stop();
            this.#animate();
        }
        return this;
    }

}




/** Ajax
parameter:
    option = {
        url:        可选, 默认 ''
        method:        可选, post 或 get请求， 默认 post
        asy:        可选, 是否异步执行, 默认 true
        success:    可选, 成功回调, 默认 null
        error:        可选, 超时或失败调用, 默认 null
        change:        可选, 请求状态改变时调用, 默认 null
        data:        可选, 如果定义则在初始化时自动执行.send(data)方法
    }

demo:
    const data = `email=${email}&password=${password}`,

    //默认 post 请求:
    ajax = new Ajax({
        url: './login',
        data: data,
        success: mes => console.log(mes),
    });
    
    //get 请求:
    ajax.method = "get";
    ajax.send(data);
*/
class Ajax{
    
    constructor(option = {}){
        this.url = option.url || "";
        this.method = option.method || "post";
        this.asy = typeof option.asy === "boolean" ? option.asy : true;
        this.success = option.success || null;
        this.error = option.error || null;
        this.change = option.change || null;

        //init XML
        this.xhr = new XMLHttpRequest();

        this.xhr.onerror = this.xhr.ontimeout = option.error || null;

        this.xhr.onreadystatechange = event => {
        
            if(event.target.readyState === 4 && event.target.status === 200){

                if(this.success !== null) this.success(event.target.responseText, event);
                
            }

            else if(this.change !== null) this.change(event);

        }

        if(option.data) this.send(option.data);
    }

    send(data = ""){
        if(this.method === "get"){
            this.xhr.open(this.method, this.url+"?"+data, this.asy);
            this.xhr.send();
        }
        
        else if(this.method === "post"){
            this.xhr.open(this.method, this.url, this.asy);
            this.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            this.xhr.send(data);
        }
    }
    
}




/* IndexedDB 本地数据库

parameter:
    name: String;                //需要打开的数据库名称(如果不存在则会新建一个) 必须
    done: Function(IndexedDB);    //链接数据库成功时的回调 默认 null
    version: Number;             //数据库版本(高版本数据库将覆盖低版本的数据库) 默认 1 

attribute:
    database: IndexedDB;            //链接完成的数据库对象
    transaction: IDBTransaction;    //事务管理(读和写)
    objectStore: IDBObjectStore;    //当前的事务

method:
    set(data, key, callback)        //添加或更新
    get(key, callback)                //获取
    delete(key, callback)            //删除

    traverse(callback)                //遍历
    getAll(callback)                //获取全部
    clear(callback)                    //清理所以数据
    close()                         //关闭数据库链接

readOnly:

static:
    indexedDB: Object;

demo:
    
    new IndexedDB('TEST', db => {

        conosle.log(db);

    });

*/
class IndexedDB{

    static indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

    get objectStore(){ //每个事务只能使用一次, 所以每次都需要重新创建
        return this.database.transaction(this.name, 'readwrite').objectStore(this.name);
    }

    constructor(name, done = null, version = 1){

        if(IndexedDB.indexedDB === undefined) return console.error("IndexedDB: 不支持IndexedDB");
        
        if(typeof name !== 'string') return console.warn('IndexedDB: 参数错误');

        this.name = name;
        this.database = null;

        const request = IndexedDB.indexedDB.open(name, version);
        
        request.onupgradeneeded = (e)=>{ //数据库不存在 或 版本号不同时 触发
            if(!this.database) this.database = e.target.result;
            if(this.database.objectStoreNames.contains(name) === false) this.database.createObjectStore(name);
        }
        
        request.onsuccess = (e)=>{
            this.database = e.target.result;
            if(typeof done === 'function') done(this);
        }
        
        request.onerror = (e)=>{
            console.error(e);
        }
        
    }

    close(){

        return this.database.close();

    }

    clear(callback){
        
        this.objectStore.clear().onsuccess = callback;
        
    }

    traverse(callback){
        
        this.objectStore.openCursor().onsuccess = callback;

    }

    set(data, key = 0, callback){
        
        this.objectStore.put(data, key).onsuccess = callback;

    }
    
    get(key = 0, callback){

        this.objectStore.get(key).onsuccess = callback;
        
    }

    del(key = 0, callback){

        this.objectStore.delete(key).onsuccess = callback;

    }
    
    getAll(callback){

        this.objectStore.getAll().onsuccess = callback;

    }

}




/* TreeStruct 树结构基类

attribute:
    parent: TreeStruct;
    children: Array[TreeStruct];

method:
    add(v: TreeStruct): v;         //v添加到自己的子集
    remove(v: TreeStruct): v;     //删除v, 前提v必须是自己的子集
    export(): Array[Object];    //TreeStruct 转为 可导出的结构, 包括其所有的后代

    getPath(v: TreeStruct): Array[TreeStruct];     //获取自己到v的路径

    traverse(callback: Function): undefined;  //迭代自己的每一个后代, 包括自己
        callback(value: TreeStruct); //如返回 "continue" 则不在迭代其后代(不是结束迭代, 而是只结束当前节点的后代);

    traverseUp(callback): undefined; //向上遍历每一个父, 包括自己
        callback(value: TreeStruct); //如返回 "break" 立即停止遍历;

static:
    import(arr: Array[Object]): TreeStruct; //.export() 返回的 arr 转为 TreeStruct

*/
class TreeStruct{

    static import(arr){

        //json = JSON.parse(json);
        const len = arr.length;

        for(let k = 0, v; k < len; k++){
            v = Object.assign(new TreeStruct(), arr[k]);
            v.parent = arr[arr[k].parent] || null;
            if(v.parent !== null) v.parent.add(v);
            arr[k] = v;
        }

        return arr[0];

    }

    constructor(){
        this.parent = null;
        this.children = [];
    }

    getPath(v){

        var path;

        const pathA = [];
        this.traverseUp(tar => {
            if(v === tar){
                path = pathA;
                return "break";
            }
            pathA.push(tar);
        });

        if(path) return path;

        const pathB = [];
        v.traverseUp(tar => {
            if(this === tar){
                path = pathB.reverse();
                return "break";
            }
            else{
                let i = pathA.indexOf(tar);
                if(i !== -1){
                    pathA.splice(i);
                    pathA.push(tar);
                    path = pathA.concat(pathB.reverse());
                    return "break";
                }
            }
            pathB.push(tar);
        });

        return path;
        
    }

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

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

        return v;
    }

    traverse(callback, key = 0){

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

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

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

        }

    }

    traverseUp(callback){

        var par = this.parent;

        while(par !== null){
            if(callback(par) === "break") return;
            par = par.parent;
        }

    }

    export(){

        const result = [], arr = [];
        var obj = null;

        this.traverse(v => {
            obj = Object.assign({}, v);
            obj.parent = arr.indexOf(v.parent);
            delete obj.children;
            result.push(obj);
            arr.push(v);
        });
        
        return result; //JSON.stringify(result);

    }

}




/* 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;                    //归一
*/
class Point{

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

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

        return this;
    }

    angle(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, angle){
        const c = Math.cos(angle), s = Math.sin(angle), 
        x = this.x - origin.x, y = this.y - origin.y;

        this.x = x * c - y * s + origin.x;
        this.y = x * s + y * c + origin.y;

        return this;
    }

    normalize(){
        const len = 1 / (Math.sqrt(this.x * this.x + this.y * this.y) || 1);
        this.x *= len;
        this.y *= len;

        return this;
    }

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

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

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

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

}




/* Rotate
parameter:
    x, y, a = 0

attribute:
    angle: Number;
    origin: Point;

method:
    set(x, y, a): this;
*/
class Rotate{

    constructor(x, y, a = 0){
        this.angle = a;
        this.origin = new Point(x, y);
    }

    set(x, y, a){
        this.origin.x = x;
        this.origin.y = y;
        this.angle = a;
        return this;
    }

    pos(x, y){
        this.origin.x = x;
        this.origin.y = y;
        return this;
    }

    copy(rotate){
        this.angle = rotate.angle;
        this.origin.copy(rotate.origin);
        return this;
    }
    
    clone(){
        return new this.constructor().copy(this);
    }

    toAngle(v){
        this.angle = v / 180 * Math.PI;
        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 的直线距离
    isEmpty(): Boolean;                         //.w.h是否小于等于零
    maxX(): Number;                             //返回 max x(this.x+this.w);
    maxY(): Number;                             //返回 max y(this.y+this.h);
    expand(box): undefined;                     //扩容; 把box合并到this
    equals(box): Boolean;                         //this与box是否恒等
    intersectsBox(box): Boolean;                 //box与this是否相交(box在this内部也会返回true)
    containsPoint(x, y): Boolean;                 //x,y点是否在this内
    containsBox(box): Boolean;                    //box是否在this内(只是相交返回fasle)
    computeOverflow(b: Box, r: Box): undefined;    //this相对b超出的部分赋值到r; r的size小于或等于0的话说明完全超出
*/
class Box{

    get mx(){
        return this.x + this.w;
    }

    get my(){
        return this.y + this.h;
    }

    get cx(){
        return this.w / 2 + this.x;
    }

    get cy(){
        return this.h / 2 + this.y;
    }

    constructor(x = 0, y = 0, w = 0, h = 0){
        //this.set(x, y, w, h);
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
    }
    
    set(x, y, w, h){
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        return this;
    }

    pos(x, y){
        this.x = x;
        this.y = y;
        return this;
    }
    
    size(w, h){
        this.w = w;
        this.h = h;
        return this;
    }

    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.angle); run();
        point.set(this.mx, this.y).rotate(rotate.origin, rotate.angle); run();
        point.set(this.mx, this.my).rotate(rotate.origin, rotate.angle); run();
        point.set(this.x, this.my).rotate(rotate.origin, rotate.angle); 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));
    }

    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(x, y): Bool; 
    intersectsCircle(circle: Circle): Bool;
    intersectsBox(box: Box): Bool;
    setFromBox(box, inner = true): this;

*/
class Circle{

    get r2(){
        return this.r * 2;
    }

    constructor(x = 0, y = 0, r = -1){
        //this.set(0, 0, -1);
        this.x = x;
        this.y = y;
        this.r = r;
    }

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

        return this;
    }

    setFromBox(box, world = true, inner = true){
        this.x = box.w / 2 + (world === true ? box.x : 0);
        this.y = box.h / 2 + (world === true ? box.y : 0);
        this.r = inner === true ? Math.min(box.w, box.h) / 2 : UTILS.distance(0, 0, box.w, box.h) / 2;
    
        return this;
    }

    toArray(array, index){
        array[index] = this.x;
        array[index+1] = this.y;
        array[index+2] = this.r;
        
        return this;
    }

    pos(x, y){
        this.x = x;
        this.y = y;

        return this;
    }

    copy(circle){
        this.r = circle.r;
        this.x = circle.x;
        this.y = circle.y;

        return this;
    }

    clone(){

        return new this.constructor().copy(this);

    }

    distance(x, y){
        
        return Math.sqrt(Math.pow(this.x - x, 2) + Math.pow(this.y - y, 2));

    }

    expand(circle){

    }

    equals(circle){

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

    }

    containsPoint(x, y){

        return (Math.pow(x - this.x, 2) + Math.pow(y - this.y, 2) <= Math.pow(this.r, 2));

    }

    intersectsCircle(circle){

        return (Math.pow(circle.x - this.x, 2) + Math.pow(circle.y - this.y, 2) <= Math.pow(circle.r + this.r, 2));

    }

    intersectsBox(box){
        
        return (Math.pow(Math.max(box.x, Math.min(box.x + box.w, this.x)) - this.x, 2) + Math.pow(Math.max(box.y, Math.min(box.y + box.h, this.y)) - this.y, 2) <= Math.pow(this.r, 2));
    
    }

}




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

}




/* ShapeRect (一般2d矩形的原点在左上, 此矩形类的原点在中间)
parameter: 
    width = 0, height = 0

attribute: 
    width, height: Number;     //矩形的宽高
    position: Point;        //位置(是旋转和缩放的中心点)
    rotation: Number;        //旋转(绕 Z 轴旋转的弧度)
    scale: Point;            //缩放

method:
    setFromBox(box): this;                //Box 转为 ShapeRect
    compute(): undefined;                //计算出矩形
    applyCanvas(context): undefined;    //矩形应用到画布的上下文中

demo:
    const canvasRect = new ShapeRect(100, 150); console.log(canvasRect);

    const canvas = document.createElement("canvas");
    canvas.width = WORLD.width;
    canvas.height = WORLD.height;
    canvas.style = `
        position: absolute;
        z-index: 9999;
        background: rgb(127,127,127);
    `;
    document.body.appendChild(canvas);

    canvasRect.position.set(300, 300);
    canvasRect.rotation = UTILS.toAngle(45);
    canvasRect.scale.set(1.5, 1.5);
    canvasRect.compute();

    const context = canvas.getContext("2d");
    canvasRect.applyCanvas(context);

    context.strokeStyle = "red";
    context.stroke();
*/
class ShapeRect{

    #dots = [];
    #size = new Point();
    #min = new Point();
    #max = new Point();

    constructor(width = 0, height = 0){
        this.width = width;
        this.height = height;
        this.position = new Point();
        this.rotation = 0;
        this.scale = new Point(1, 1);
    }

    setFromBox(box){
        this.width = box.w;
        this.height = box.h;
        this.position.set(box.cx, box.cy);
        return this;
    }

    compute(){
        //scale
        this.#size.set(this.width * this.scale.x, this.height * this.scale.y);
        
        //position
        this.#min.set(this.position.x - this.#size.x / 2, this.position.y - this.#size.y / 2);
        this.#max.set(this.#min.x + this.#size.x, this.#min.y + this.#size.y);
        
        //rotation
        const point = UTILS.emptyPoint;
        this.#dots.length = 0;
        
        point.set(this.#min.x, this.#min.y).rotate(this.position, this.rotation);
        this.#dots.push(point.x, point.y);

        point.set(this.#max.x, this.#min.y).rotate(this.position, this.rotation);
        this.#dots.push(point.x, point.y);

        point.set(this.#max.x, this.#max.y).rotate(this.position, this.rotation);
        this.#dots.push(point.x, point.y);

        point.set(this.#min.x, this.#max.y).rotate(this.position, this.rotation);
        this.#dots.push(point.x, point.y);

        //缩放旋转后的 min 与 max
        //this.#min.set(Math.min(this.#dots[0], this.#dots[2], this.#dots[4], this.#dots[6]), Math.min(this.#dots[1], this.#dots[3], this.#dots[5], this.#dots[7]));
        //this.#max.set(Math.max(this.#dots[0], this.#dots[2], this.#dots[4], this.#dots[6]), Math.max(this.#dots[1], this.#dots[3], this.#dots[5], this.#dots[7]))
    }

    drawImage(img, context){
        UTILS.emptyContext.canvas.width = this.#size.x;
        UTILS.emptyContext.canvas.height = this.#size.y;
        UTILS.emptyContext.drawImage(img, 0, 0, this.#size.x, this.#size.y);

        const imageData = UTILS.emptyContext.getImageData(0, 0, this.#size.x, this.#size.y),
        width = imageData.width, height = imageData.height,
        len = width * height, point = UTILS.emptyPoint, center = UTILS.emptyPointA.set(width/2, height/2),

        newImageData = UTILS.emptyContext.createImageData(width, height);
        
        for(let k = 0; k < len; k++){
            point.set(k % width, Math.floor(k / width)).rotate(center, this.rotation);
            if(point.x < 0 || point.y < 0 || point.x > newImageData.width-1 || point.y > newImageData.height-1) continue;

            point.set((width * Math.round(point.y) + Math.round(point.x)) * 4, k * 4);
            newImageData.data[point.x] = imageData.data[point.y];
            newImageData.data[point.x + 1] = imageData.data[point.y + 1];
            newImageData.data[point.x + 2] = imageData.data[point.y + 2];
            newImageData.data[point.x + 3] = imageData.data[point.y + 3];
        }

        context.putImageData(newImageData, 20, 20);
    }

    applyCanvas(context){
        context.beginPath();
        context.moveTo(this.#dots[0], this.#dots[1]);

        for(let k = 2, len = this.#dots.length; k < len; k += 2){
            context.lineTo(this.#dots[k], this.#dots[k + 1]);
        }

        context.closePath();
    }

}




/* RGBColor
parameter: 
    r, g, b

method:
    set(r, g, b: Number): this;            //rgb: 0 - 255; 第一个参数可以为 css color
    setFormHex(hex: Number): this;         //
    setFormHSV(h, s, v: Number): this;    //h:0-360; s,v:0-100; 颜色, 明度, 暗度
    setFormString(str: String): Number;    //str: 英文|css color; 返回的是透明度 (如果为 rgba 则返回a; 否则总是返回1)

    copy(v: RGBColor): this;
    clone(): RGBColor;

    getHex(): Number;
    getHexString(): String;
    getHSV(result: Object{h, s, v}): result;    //result: 默认是一个新的Object
    getRGBA(alpha: Number): String;             //alpha: 0 - 1; 默认 1
    getStyle()                                     //.getRGBA()别名

    stringToColor(str: String): String; //str 转为 css color; 如果str不是color格式则返回 ""

*/
class RGBColor{

    constructor(r = 255, g = 255, b = 255){
        this.r = r;
        this.g = g;
        this.b = b;
    }

    copy(v){
        this.r = v.r;
        this.g = v.g;
        this.b = v.b;
        return this;
    }

    clone(){
        return new this.constructor().copy(this);
    }

    set(r, g, b){
        if(typeof r !== "string"){
            this.r = r || 255;
            this.g = g || 255;
            this.b = b || 255;
        }

        else this.setFormString(r);
        
        return this;
    }

    setFormHex(hex){
        hex = Math.floor( hex );

        this.r = hex >> 16 & 255;
        this.g = hex >> 8 & 255;
        this.b = hex & 255;
        return this;
    }

    setFormHSV(h, s, v){
        h = h >= 360 ? 0 : h;
        var s=s/100;
        var v=v/100;
        var h1=Math.floor(h/60) % 6;
        var f=h/60-h1;
        var p=v*(1-s);
        var q=v*(1-f*s);
        var t=v*(1-(1-f)*s);
        var r,g,b;
        switch(h1){
            case 0:
                r=v;
                g=t;
                b=p;
                break;
            case 1:
                r=q;
                g=v;
                b=p;
                break;
            case 2:
                r=p;
                g=v;
                b=t;
                break;
            case 3:
                r=p;
                g=q;
                b=v;
                break;
            case 4:
                r=t;
                g=p;
                b=v;
                break;
            case 5:
                r=v;
                g=p;
                b=q;
                break;
        }

        this.r = Math.round(r*255);
        this.g = Math.round(g*255);
        this.b = Math.round(b*255);
        return this;
    }

    setFormString(color){
        if(typeof color !== "string") return 1;
        var _color = this.stringToColor(color);
        
        if(_color[0] === "#"){
            const len = _color.length;
            if(len === 4){
                _color = _color.slice(1);
                this.setFormHex(parseInt("0x"+_color + "" + _color));
            }
            else if(len === 7) this.setFormHex(parseInt("0x"+_color.slice(1)));
        }

        else if(_color[0] === "r" && _color[1] === "g" && _color[2] === "b"){
            const arr = [];
            for(let k = 0, len = _color.length, v = "", is = false; k < len; k++){
                
                if(is === true){
                    if(_color[k] === "," || _color[k] === ")"){
                        arr.push(parseFloat(v));
                        v = "";
                    }
                    else v += _color[k];
                    
                }

                else if(_color[k] === "(") is = true;
                
            }

            this.set(arr[0], arr[1], arr[2]);
            return arr[3] === undefined ? 1 : arr[3];
        }
        
        return 1;
    }

    getHex(){

        return Math.max( 0, Math.min( 255, this.r ) ) << 16 ^ Math.max( 0, Math.min( 255, this.g ) ) << 8 ^ Math.max( 0, Math.min( 255, this.b ) ) << 0;

    }

    getHexString(){

        return '#' + ( '000000' + this.getHex().toString( 16 ) ).slice( - 6 );

    }

    getHSV(result){
        result = result || {}
        var r=this.r/255;
        var g=this.g/255;
        var b=this.b/255;
        var h,s,v;
        var min=Math.min(r,g,b);
        var max=v=Math.max(r,g,b);
        var l=(min+max)/2;
        var difference = max-min;
        
        if(max==min){
            h=0;
        }else{
            switch(max){
                case r: h=(g-b)/difference+(g < b ? 6 : 0);break;
                case g: h=2.0+(b-r)/difference;break;
                case b: h=4.0+(r-g)/difference;break;
            }
            h=Math.round(h*60);
        }
        if(max==0){
            s=0;
        }else{
            s=1-min/max;
        }
        s=Math.round(s*100);
        v=Math.round(v*100);
        result.h = h;
        result.s = s;
        result.v = v;
        return result;
    }

    getStyle(){
        return this.getRGBA(1);
    }

    getRGBA(alpha = 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 ColorRefTable[_color] || "";
    }

}




/* Timer 定时器 

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

    //只读属性
    readyState: String;    //定时器状态; 可能值: '', 'start', 'running', 'done'; ''表示定时器从未启动
    number: Number;        //运行的次数

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

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

*/
class Timer{

    #restart = -1;
    #speed = 0;
    #isRun = false;
    #i = 0;
    #readyState = ''; //start|running

    get number(){
        return this.#i;
    }
    
    get readyState(){
        return this.#i >= this.step ? 'done' : this.#readyState;
    }

    get running(){
        return this.#isRun;
    }

    constructor(func = null, speed = 3000, step = Infinity){
        this.func = func;
        this.speed = speed;
        this.step = step;
        //this.onDone = null;
    
        if(typeof this.func === "function") this.restart();

    }

    start(func, time){
        if(typeof func === 'function') this.func = func;
        if(UTILS.isNumber(time) === true) this.speed = time;
        this.restart();

        return this;
    }

    restart(){
        if(this.#isRun === false){
            setTimeout(this._loop, this.speed);
            this.#isRun = true;
            this.#restart = -1;
            this.#i = 0;
            this.#readyState = 'start';
            
        }

        else{
            this.#restart = Date.now();
            this.#speed = this.speed;

        }

    }

    stop(){
        if(this.#isRun === true){
            this.#restart = -1;
            this.#i = this.step;
        }

    }

    _loop = () => {

        //重启计时器
        if(this.#restart !== -1){
            
            let gone = Date.now() - this.#restart;
            this.#restart = -1;
            
            if(gone >= this.#speed) gone = this.speed;
            else{
                if(this.#speed === this.speed) gone = this.#speed - gone;
                else gone = (this.#speed - gone) / this.#speed * this.speed;
            }
            
            setTimeout(this._loop, gone);
            
            this.#i = 1;
            if(this.func !== null) this.func(this);

        }

        //正在运行
        else if(this.#i < this.step){

            setTimeout(this._loop, this.speed);

            this.#i++;
            if(this.#readyState !== 'running') this.#readyState = 'running';
            if(this.func !== null) this.func(this);

        }

        //完成
        else this.#isRun = false;

    }

}




/* SeekPath A*寻路

parameter: 
    option: Object{
        angle: Number,         //8 || 16
        timeout: Number,     //单位为毫秒
        size: Number,         //每格的宽高
        lenX, lenY: Number,    //长度
        disables: Array[0||1],
        heights: Array[Number],
        path: Array[], //存放寻路结果 默认创建一个空数组
    }

attribute:
    size: Number;     //每个索引的大小
    lenX: Number;     //最大长度x (设置此属性时, 你需要重新.initMap(heights);)
    lenY: Number;     //最大长度y (设置此属性时, 你需要重新.initMap(heights);)

    //此属性已废弃 range: Box;            //本次的搜索范围, 默认: 0,0,lenX,lenY
    angle: Number;         //8四方向 或 16八方向 默认 16
    timeout: Number;     //超时毫秒 默认 500
    mapRange: Box;        //地图box
    //此属性已废弃(run函数不在检测相邻的高) maxHeight: Number;     //相邻可走的最大高 默认 6

    //只读属性
    success: Bool;            //只读; 本次搜索是否成功找到终点; (如果为false说明.run()返回的是 距终点最近的路径; 超时也会被判定为false)
    path: Array[x, y, z];    //存放.run()返回的路径
    map: Map;                 //地图的缓存数据

method:
    initMap(heights: Array[Number]): undefiend;     //初始化类时自动调用一次; heights:如果你的场景存在高请定义此参数
    run(x, y, x1, y1: Number): Array[x, y, z];         //参数索引坐标
    getDots(x, y, a, r): Array[ix, iy];             //获取周围的点 x,y, a:8|16, r:存放结果数组
    getLegalPoints(ix, iy, count): Array[x, y, z];    //获取 ix, iy 周围 合法的, 相邻的 count 个点

demo:
    const sp = new SeekPath({
        angle: 16,
        timeout: 500,
        //maxHeight: 6,
        size: 10,
        lenX: 1000,
        lenY: 1000,
    }),

    path = sp.run(0, 0, 1000, 1000);

    console.log(sp);

*/
class SeekPath{

    static _open = []
    static _dots = [] //.run() .getLegalPoints()
    static dots4 = []; //._check()
    static _sort = function (a, b){return a["f"] - b["f"];}

    #map = null;
    #path = null;
    #success = true;
    #halfX = 50;
    #halfY = 50;

    #size = 10;
    #lenX = 10;
    #lenY = 10;

    constructor(option = {}){
        this.angle = (option.angle === 8 || option.angle === 16) ? option.angle : 16; //8四方向 或 16八方向
        this.timeout = option.timeout || 500; //超时毫秒
        //this.maxHeight = option.maxHeight || 6;
        this.mapRange = new Box();
        this.size = option.size || 10;
        this.lenX = option.lenX || 10;
        this.lenY = option.lenY || 10;
        this.#path = Array.isArray(option.path) ? option.path : [];
        this.initMap(option.disable, option.height);
        option = undefined
    }

    //this.#map[x][y] = Object{height: 此点的高,默认0, is: 此点是否可走,默认1(disable)};
    get map(){
        return this.#map;
    }

    //this.#path = Array[x,y,z]
    get path(){
        return this.#path;
    }

    get success(){
        return this.#success;
    }

    get size(){
        return this.#size;
    }

    set size(v){
        this.#size = v;
        v = v / 2;
        this.#halfX = v * this.#lenX;
        this.#halfY = v * this.#lenY;
    }

    get lenX(){
        return this.#lenX;
    }

    set lenX(v){
        this.#lenX = v;
        v = this.#size / 2;
        this.#halfX = v * this.#lenX;
        this.#halfY = v * this.#lenY;
        
    }

    get lenY(){
        return this.#lenY;
    }

    set lenY(v){
        this.#lenY = v;
        v = this.#size / 2;
        this.#halfX = v * this.#lenX;
        this.#halfY = v * this.#lenY;
        
    }

    toScene(n, v){ //n = "x|y"
        //n = n === "y" ? "lenY" : "lenX";
        if(n === "y" || n === "z") return v * this.#size - this.#halfY;
        return v * this.#size - this.#halfX;
    }
    
    toIndex(n, v){
        //n = n === "y" ? "lenY" : "lenX";
        if(n === "y" || n === "z") return Math.round((this.#halfY + v) / this.#size);
        return Math.round((this.#halfX + v) / this.#size);
    }

    initMap(disable, height){
        
        disable = Array.isArray(disable) === true ? disable : null;
        height = Array.isArray(height) === true ? height : null;
        
        const lenX = this.lenX, lenY = this.lenY;
        var getHeight = (ix, iy) => {
            if(height === null) return 0;
            ix = height[ix * lenY + iy];
            if(ix === undefined) return 0;
            return ix;
        },
        getDisable = (ix, iy) => {
            if(disable === null) return 1;
            ix = disable[ix * lenY + iy];
            if(ix === undefined) return 0;
            return ix;
        },

        map = []//new Map();

        for(let x = 0, y, m; x < lenX; x++){
            m = []//new Map();
            for(y = 0; y < lenY; y++) m[y] = {x:x, y:y, height:getHeight(x, y), is:getDisable(x, y),  g:0, h:0, f:0, p:null, id:""}//m.set(y, {x:x, y:y, height:getHeight(x, y),   g:0, h:0, f:0, p:null, id:""});
            map[x] = m;//map.set(x, m);
        }
        
        this.#map = map;
        this._id = -1;
        this._updateID();
        this.mapRange.set(0, 0, this.#lenX-1, this.#lenY-1);

        map = disable = height = getHeight = undefined;

    }

    getLegalPoints(ix, iy, count, result = []){  //不包括 ix, iy
        const _dots = SeekPath._dots;
        result.length = 0;
        result[0] = this.#map[ix][iy];
        count += 1;
        
        while(result.length < count){
            for(let k = 0, i, n, d, len = result.length; k < len; k++){
                n = result[k];
                this.getDots(n.x, n.y, this.angle, _dots);
                for(i = 0; i < this.angle; i += 2){
                    d = this.#map[_dots[i]][_dots[i+1]];
                    if(d.is === 1 && this.mapRange.containsPoint(d.x, d.y) && !result.includes(d)){
                        if(Math.abs(n.x - d.x) + Math.abs(n.y - d.y) === 2 && this._check(n, d)){
                            result.push(d);
                        }
                    }
                }
            }
        }
    
        result.splice(0, 1);
        return result;
    }

    getLinePoints(now, next, count, result = []){ //不包括 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);
            //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);

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

}




/* TweenTarget 朝着轴插值(有效的跟踪动态目标, 注意此类需要配合 RunningList 类使用, 因为此类在任何情况下都没有阻止你调用.update()方法)
parameter:    
    v1 = {x: 0}, 
    v2 = {x: 100}, 
    distance = 1,        //每次移动的距离
    onUpdate = null,    //
    onEnd = null

attribute:
    v1: Object;             //起点
    v2: Object;             //终点
    onUpdate: Function;        //
    onEnd: Function;         //

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

demo:
    const ttc = new TweenTarget({x:0, y:0}, {x:100, y:100}, 10),

    //计时器模拟动画循环函数, 每秒执行一次.update()
    timer = new Timer(() => {
        ttc.update();
        console.log('update: ', ttc.v1);

    }, 1000, Infinity);

    ttc.onEnd = v => {
        timer.stop();
        console.log('end: ', v);
    }

    timer.start();
    console.log(ttc);

*/
class TweenTarget{

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

    constructor(v1 = {x: 0}, v2 = {x: 100}, distance, onUpdate = null, onEnd = null){
        this.v1 = v1;
        this.v2 = v2;
        this.onUpdate = onUpdate;
        this.onEnd = onEnd;
    
        this.setDistance(distance);
        this.updateAxis();
    }

    setDistance(v = 1){
        this.#distance = v;
        this.#distancePow2 = Math.pow(v, 2);
    }

    updateAxis(){
        var n, v, len = 0;

        for(n in this.v1){
            v = this.v2[n] - this.v1[n];
            len += v * v;
            this.#axis[n] = v;

        }

        len = Math.sqrt(len);

        if(len !== 0){
            
            for(n in this.v1) this.#axis[n] *= 1 / len;

        }
    }

    update(){
        var n, len = 0;

        for(n in this.v1) len += Math.pow(this.v1[n] - this.v2[n], 2);

        if(len > this.#distancePow2){

            for(n in this.v1) this.v1[n] += this.#axis[n] * this.#distance;
            if(this.onUpdate !== null) this.onUpdate(this.v1);

        }

        else{

            for(n in this.v1) this.v1[n] = this.v2[n];
            if(this.onEnd !== null) this.onEnd(this.v1);
            
        }
    }

}




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

method:
    clearEvents(eventName): undefined;             //清除eventName列表, 如果 eventName 未定义清除所有事件
    customEvents(eventName, eventParam): this;    //创建自定义事件 eventParam 可选 默认{}
    getParam(eventName): eventParam;
    trigger(eventName, callback): undefined;    //触发 (callback: 可选)
    register(eventName, callback): undefined;    //
    deleteEvent(eventName, callback): undefined; //

demo:
    const eventDispatcher = new EventDispatcher();
    eventDispatcher.customEvents("test", {name: "test"});

    eventDispatcher.register("test", eventParam => {
        console.log(eventParam) //Object{name: "test"}
    });

    eventDispatcher.trigger("test");

*/
class EventDispatcher{
    
    constructor(){
        this._eventsList = {};
        this.__eventsList = [];
        this.__trigger = "";
    }

    clearEvents(eventName){ 

        //if(this.__trigger === eventName) return console.warn("EventDispatcher: 清除事件失败");
        if(this._eventsList[eventName] !== undefined) this._eventsList[eventName].func = []

        else this._eventsList = {}

    }
    
    customEvents(eventName, eventParam = {}){ 
        //if(typeof eventName !== "string") return console.warn("EventDispatcher: 注册自定义事件失败");
        if(this._eventsList[eventName] !== undefined) return console.warn("EventDispatcher: "+eventName+" 已存在");
        //eventParam = eventParam || {}
        //if(eventParam.type === undefined) eventParam.type = eventName;
        this._eventsList[eventName] = {func: [], param: eventParam}
        return this;
    }

    getParam(eventName){
        return this._eventsList[eventName]["param"];
    }
    
    trigger(eventName, callback){
        //if(this._eventsList[eventName] === undefined) return;
        
        const obj = this._eventsList[eventName];
        var k, len = obj.func.length;

        if(len !== 0){
            if(typeof callback === "function") callback(obj["param"]); //更新参数(eventParam)

            //触发过程(如果触发过程中删除事件, 不仅 len 没有变, 而且还会漏掉一个key, 所以在触发过程中删除的事件要特殊处理)
            this.__trigger = eventName;
            for(k = 0; k < len; k++) obj["func"][k](obj["param"]);
            this.__trigger = "";
            //触发过程结束
            
            //删除在触发过程中要删除的事件
            len = this.__eventsList.length;
            for(k = 0; k < len; k++) this.deleteEvent(eventName, this.__eventsList[k]);
            this.__eventsList.length = 0;
    
        }

    }
    
    register(eventName, callback){
        if(this._eventsList[eventName] === undefined) return console.warn("EventDispatcher: "+eventName+" 不存在");
        const obj = this._eventsList[eventName];
        //if(obj.func.includes(callback) === false) obj.func.push(callback);
        //else console.warn("EventDispatcher: 回调函数重复");
        obj.func.push(callback);
    }
    
    deleteEvent(eventName, callback){
        if(this._eventsList[eventName] === undefined) return console.warn("EventDispatcher: "+eventName+" 不存在");
        
        if(this.__trigger === eventName) this.__eventsList.push(callback);
        else{
            const obj = this._eventsList[eventName], i = obj.func.indexOf(callback);
            if(i !== -1) obj.func.splice(i, 1);
        }
        
    }

}




export {
    UTILS, 
    ColorRefTable, 
    AnimateLoop,
    Ajax, 
    IndexedDB, 
    TreeStruct, 
    Point, 
    Line, 
    Box, 
    Circle, 
    Polygon, 
    RGBColor, 
    Timer, 
    SeekPath, 
    RunningList, 
    TweenValue, 
    Tween, 
    TweenTarget, 
    EventDispatcher, 
    Rotate,
    ShapeRect,
    SecurityDoor,
}

 

"use strict";

import {
    UTILS, 
    Box, 
    Rotate,
    EventDispatcher,
    Point,
    AnimateLoop,
    TreeStruct,
} from './Utils.js';




/* CanvasImageRender (渲染 CanvasImage)

关于canvas的优化:
    离屏渲染(预处理图像的 缩放, 旋转, 剪裁, 等)
    避免浮点坐标(用Math.floor()函数对所有的坐标点取整, 浏览器为了达到抗锯齿的效果会做额外的运算)
    如果可能请关闭透明度 (CanvasImageRender.paramCon.alpha = false)

关于渲染 CanvasImage
    尽量让box.w和box.h与image的宽高保持一致, 否则在渲染时会缩放image
    如果你不在使用这些属性请将它们设为默认值: .opacity 默认1, .rotate 默认null
    如果多个 CanvasImage 的image是一样的应该: a.loadImage(src); b.setImage(a); c.setImage(a);

ImageData:
    length: w * h * 4
    r: 0 - 255
    g: 0 - 255
    b: 0 - 255
    a: 0 - 255 Math.round(255 * a)

    遍历:
    const data = context.getImageData(0, 0, canvas.width, canvas.height).data;
    for(let k = 0, x, y, r, g, b, a, i; k < len; k++){
        x = k % width;
        y = Math.floor(k / width);

        i = k*4;
        r = data[i]
        g = data[i+1]
        b = data[i+2]
        a = data[i+3]

        console.log(x, y, r, g, b, a, i);
    }

parameter: 
    option = {
        canvas             //默认 新的canvas
        width, height     //默认 1
        className, id    //默认 ""
    }

attribute:

method:
    size(w, h: Number): this;                //设置box和canvas的宽高
    render(parentElem: HTMLElement): this;    //canvas添加至dom树
    initList(i): this;                        //初始化列表
    add(ci: CanvasImage): ci;                //添加至列表并初始化ci
    remove(ci: CanvasImage): ci;            //从列表中删除ci
    redraw(): undefined;                     //重绘在 this.box 内或相交的 CanvasImage

    redrawTarget(ca: CanvasImage|Box): undefined;
    //工作原理: 收集与ca重叠的ca; 重绘这些重叠的ca, 前提是ca的box没发生改变; (缩放或旋转ca的box都会发生改变)
    例子:
        ca.opacity = 0.6;
        cir.redrawTarget(ca);

        ca.visible = false;
        cir.redrawTarget(ca);

        cir.remove(ca);
        cir.redrawTarget(ca);

        cir.add(ca);
        cir.redrawTarget(ca);

        ca.setImage(newImage) //假设newImage与ca的box一样大
        cir.redrawTarget(ca);

    initEventDispatcher(): this; //初始化自定义事件 (如果你不需要这些事件可以不初始化)
    支持的事件名:
        beforeDraw
        afterDraw
        beforeDrawTarget
        afterDrawTarget
        boxX
        boxY
        initList
        size
        add
        remove

demo:
    const cir = new CanvasImageRender({width: WORLD.width, height: WORLD.height})

    .initEventDispatcher(), //初始化 CanvasImageRender 内部的自定义事件

    cie = new CanvasImageEvent(cir), //启用dom事件

    cis = new CanvasImageScroll(cir, cie, {scrollEventType: "touch"}), //启用滚动条
    
    ci = new CanvasImage().loadImage("view/examples/img/test.png", cir); //图片加载完后更新一次画布

    for(let k = 0, pi2 = Math.PI*2, ca; k < 1000000; k++){
        ca = cir.list[k] = new CanvasImage(ci);                     //添加至渲染列表
        ca.pos(UTILS.random(0, 1000000), UTILS.random(0, 1000000));    //随机位置
        //ca.rotate = new Rotate(0, 0, UTILS.random(0, pi2));         //随机旋转
    }
    
    //为什么要用 initList() ? 因为for循环中是直接把ca加入到了列表, 没对ca做任何初始化操作;
    //如果全用.add() 就不需要在调用 initList(); 但 .add() 方法不适合一次性添加多个 CanvasImage;
    cir.initList(); 

*/
class CanvasImageRender{

    static emptyBox = new Box();
    static emptyArrA = []
    static emptyArrB = []
    static paramCon = {alpha: true}

    static defaultStyles = {
        filter: "none",
        globalAlpha: 1,
        globalCompositeOperation: "source-over",
        imageSmoothingEnabled: true,
        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: "rgba(255,255,255,0.4)",
        strokeStyle: "rgba(210,210,210,0.6)",
    }

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

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

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

    static downloadImage(func){
        const input = document.createElement("input");
        input.type = "file";
        input.multiple = "multiple";
        input.accept = ".png, .jpg, .jpeg, .bmp, .gif";
    
        input.onchange = e => {
            if(e.target.files.length === 0) return;
            const fr = new FileReader();
            fr.onloadend = e1 => {
                const img = new Image();
                img.onload = () => func(img);
                img.src = e1.target.result;
            }

            fr.readAsDataURL(e.target.files[0]);
        }
        
        input.click();
    }

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

        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);
    }
    
    #box = new Box();
    get box(){return this.#box;}

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

    constructor(option = {}){
        this.list = [];
        this.context = CanvasImageRender.getContext(option.canvas, option.className, option.id);
        this.domElement = this.context.canvas;
        this.size(option.width, option.height);
    }

    initEventDispatcher(){
        this.#eventDispatcher = new EventDispatcher();
        const eventParam = {target: this}, 
        eventParam1 = {target: this, value: null};
        this.#eventDispatcher.
        customEvents("beforeDraw", eventParam)
        .customEvents("afterDraw", eventParam)
        .customEvents("beforeDrawTarget", eventParam)
        .customEvents("afterDrawTarget", eventParam)
        .customEvents("boxX", eventParam)
        .customEvents("boxY", eventParam)
        .customEvents("initList", {target: this, index: 0})
        .customEvents("size", eventParam)
        .customEvents("add", eventParam1)
        .customEvents("remove", eventParam1);

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

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

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

        });

        return this;
    }

    strokeBox(box){
        this.context.strokeRect(box.x-this.#box.x, box.y-this.#box.y, box.w, box.h);
    }

    fillBox(box){
        this.context.fillRect(box.x-this.#box.x, box.y-this.#box.y, box.w, box.h);
    }

    clearBox(box){
        this['context']['clearRect'](box.x-this.#box.x, box.y-this.#box.y, box.w, box.h);
    }

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

    size(w = 1, h = 1){
        this.domElement.width = w;
        this.domElement.height = h;
        CanvasImageRender.setDefaultStyles(this.context);
        this.box.size(w, h);
        if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("size");
        return this;
    }

    append(ca){
        this.add(ca);
        return this;
    }

    add(ca){
        if(CanvasImage.prototype.isPrototypeOf(ca) && !this.list.includes(ca)){
            const len = this.list.length;
            
            if(this.list[ca.index] === undefined){
                ca.index = len;
                this.list.push(ca);
            }

            else{
                const arr = this.list.splice(ca.index);
                this.list.push(ca);
                for(let k = 0, c = arr.length; k < c; k++){
                    this.list.push(arr[k]);
                    arr[k].index++;
                }
            }

            if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("add", param => param.value = ca);
        }
        
        return ca;
    }

    remove(ca){
        var i = ca.index;

        if(this.list[i] !== ca) i = this.list.indexOf(ca);

        if(i !== -1){
            this.list.splice(i, 1);
            for(let k = i, len = this.list.length; k < len; k++) this.list[k].index -= 1;
            if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("remove", param => param.value = ca);
        }

        return ca;
    }

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

    initList(i){
        if(i === undefined || i < 0) i = 0;
        const len = this.list.length;
        for(let k = i; k < len; k++) this.list[k].index = k;
        if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("initList", param => param.index = i);
        return this;
    }

    clear(){
        this['context']['clearRect'](0, 0, this['box']['w'], this['box']['h']);
    }

    draw(){
        if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("beforeDraw");
        const len = this["list"]["length"];
        for(let k = 0, ca; k < len; k++){
            ca = this["list"][k];
            if(this["isDraw"](ca) === true) this["_draw"](ca);
        }
        if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("afterDraw");
    }

    redrawTarget(box){
        box = CanvasImageRender.emptyBox.copy(CanvasImage.prototype.isPrototypeOf(box) ? box.box : box);
        if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("beforeDrawTarget");
        this._computeOverlap(box);
        this["context"]["clearRect"](box["x"] - this.#box.x, box["y"] - this.#box.y, box["w"], box["h"]);
        this["_drawTarget"]();
        if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("afterDrawTarget");
    }

    redraw(){
        this.clear();
        this.draw();
    }

    //限内部使用
    _computeOverlap(tar){ //暂不支持带有旋转的 CanvasImage (如遇到将忽略)
        //1 如果检索到与box相交的ca时, 合并其box执行以下步骤: 
        //2 检索 已检索过的 并且 没有相交的ca
        //3 如果存在相交的ca就合并box并继续第 2 步; 如果不存在继续第 1 步
        const _list = CanvasImageRender.emptyArrA, list = CanvasImageRender.emptyArrB, len = this.list.length, box = tar;

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

            if(box["intersectsBox"](tar["box"]) === true){
                if(tar["overlap"] !== 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){
                            if(tar["overlap"] !== 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);
                if(tar["overlap"] !== false) tar["overlap"] = false;
            }

        }
        
        _list.length = list.length = 0;
    }

    _drawImage(ca, ox = 0, oy = 0){
        if(ca["opacity"] === 1){
            if(ca.isScale === false) this["context"]["drawImage"](ca["image"], ca["box"]["x"]-this.#box.x+ox, ca["box"]["y"]-this.#box.y+oy);
            else this["context"]["drawImage"](ca["image"], ca["box"]["x"]-this.#box.x+ox, ca["box"]["y"]-this.#box.y+oy, ca.box.w, ca.box.h);
        }

        else{
            this["context"]["globalAlpha"] = ca["opacity"];
            if(ca.isScale === false) this["context"]["drawImage"](ca["image"], ca["box"]["x"]-this.#box.x+ox, ca["box"]["y"]-this.#box.y+oy);
            else this["context"]["drawImage"](ca["image"], ca["box"]["x"]-this.#box.x+ox, ca["box"]["y"]-this.#box.y+oy, ca.box.w, ca.box.h);
            this["context"]["globalAlpha"] = 1;
        }
    }

    _draw(ca){
        if(ca.rotate === null) this._drawImage(ca);
        else{
            const cx = ca.rotate.origin.x + ca.box.x - this.#box.x, 
            cy = ca.rotate.origin.y + ca.box.y - this.#box.y;
            this.context.translate(cx, cy);
            this.context.rotate(ca.rotate.angle);
            this._drawImage(ca, -cx, -cy);
            this.context.rotate(-ca.rotate.angle);
            this.context.translate(-cx, -cy);
        }
    }
    
    _drawTarget(){
        const len = this["list"]["length"];
        for(let k = 0, ci; k < len; k++){
            ci = this["list"][k];
            if(ci["overlap"] === true) this._draw(ci);
        }
    }

}




/* CanvasImageEvent (CanvasImageRender 的dom事件)
ca 必须的属性: visible, box, rotate, index
ca 必须的方法: 没有;

parameter:
    domElement: CanvasImageRender.domElement; //必须
    box: CanvasImageRender.box; //必须
    ||或者第一个参数为 CanvasImageRender

    与.initEvent(domElement, box)参数一样

attribute:
    domElement
    box: Box;

method:
    add(ca: CanvasImage, eventName: String, callback: Function): ca; //ca添加事件
    remove(ca: CanvasImage, eventName: String, callback: Function): ca; //ca删除事件
        eventName: 可能的值为 CanvasImageEvent.canvasEventsList 的属性名
        callback: 参数 event, ca
    
    clear(ca: CanvasImage, eventName: String): ca; //ca 必须; eventName 可选, 如果未定义则清空ca的所有事件;
    disposeEvent(eventName): this; //.initEvent(domElement, box)调用一次此方法
    initEvent(domElement, box): this; //每次更换 domElement, box 后应调用此方法; (CanvasAnimateEvent初始化时自动调用一次)
    setScale(x, y: Number): undefiend; //

eventName:
    (如果注册了 "out"|"over" 事件, 在弃用时(CanvasImageRender 不在使用): 
    必需要调用.disposeEvent(eventName)方法清理注册的dom事件, 
    因为这两个事件用的是 pointermove 而不是 onpointermove);

    down    //鼠标左右键按下
    move    //鼠标左右键移动
    up        //鼠标左右键抬起

    click    //鼠标左键
    wheel    //鼠标滚动轮
    out        //移出
    over    //移入

demo:
    const car = new CanvasImageRender({width: 100, height: 100}),
    cae = new CanvasImageEvent(car),
    ca = car.add(new CanvasImage(image));

    //ca添加点击事件
    cae.add(ca, 'click', (event, target) => console.log(event, target));

    car.render();

*/
class CanvasImageEvent{

    static bind(obj, is){
        /* const _eventList = {}
        Object.defineProperty(obj, "_eventList", {
            get(){return _eventList;}
        }); */
        obj._eventList = {};
        if(is === true){
            let k, evns = CanvasImageEvent.canvasEventsList;
            for(k in evns) obj._eventList[k] = [];
        }
            
    }

    static canvasEventsList = {
        down: "onpointerdown",
        move: "onpointermove",
        up: "onpointerup",
        click: "onclick",
        wheel: "onmousewheel",
        out: "pointermove", //移出 
        over: "pointermove", //移入
    }

    static isEventName(eventName){

        return CanvasImageEvent.canvasEventsList[eventName] !== undefined;

    }
    
    static emptyBox = new Box();
    static emptyRotate = new Rotate();

    constructor(domElement, box){
        this._running = "";
        this._delList = [];
        CanvasImageEvent.bind(this);
        this.initEvent(domElement, box);
    }

    initEvent(domElement, box){
        this.disposeEvent();

        if(CanvasImageRender.prototype.isPrototypeOf(domElement)){
            this.domElement = domElement.domElement;
            this.box = domElement.box;
        }

        else{
            this.domElement = domElement;
            this.box = box;
        }

        if(this._eventList !== undefined){
            for(let evn in this._eventList){
                if(this._eventList[evn] !== undefined) this._createEvent(evn);
            }

        }
        
        return this;
    }

    add(ca, eventName, callback){
        if(CanvasImageEvent.canvasEventsList[eventName] === undefined) return console.warn("CanvasImageEvent: 参数错误 "+ eventName);
        if(typeof callback !== "function") return console.warn("CanvasImageEvent: 事件添加失败,参数错误");
        
        this._add(ca, eventName);
        this._addCA(ca, eventName, callback);
        
        return ca;
    }
    
    remove(ca, eventName, callback){
        if(CanvasImageEvent.canvasEventsList[eventName] === undefined) return console.warn("CanvasImageEvent: 参数错误 "+ eventName);
        if(typeof callback !== "function") return console.warn("CanvasImageEvent: 事件添加失败,参数错误");
        if(this._running !== eventName){
            this._remove(ca, eventName);
            this._removeCA(ca, eventName, callback);
        }

        else this._delList.push(ca, eventName, callback);

        return ca;
    }

    disposeEvent(eventName){
        if(eventName === "over" || eventName === "out"){

            if(typeof this["_"+eventName] === "function"){
                this.domElement.removeEventListener(CanvasImageEvent.canvasEventsList[eventName], this["_"+eventName]);
                delete this["_"+eventName];
            }

        }

        else{

            if(typeof this["_over"] === "function"){
                this.domElement.removeEventListener(CanvasImageEvent.canvasEventsList["over"], this["_over"]);
                delete this["_over"];
            }

            if(typeof this["_out"] === "function"){
                this.domElement.removeEventListener(CanvasImageEvent.canvasEventsList["out"], this["_out"]);
                delete this["_out"];
            }

        }

        return this;
    }
    
    clear(ca, eventName){
        if(eventName === undefined){
            var k; for(k in this._eventList){
                this._remove(ca, k);
            }
            
            if(ca._eventList !== undefined) delete ca._eventList; //CanvasImageEvent.bind(ca, true);
            
        }

        else if(CanvasImageEvent.canvasEventsList[eventName] !== undefined){
            this._remove(ca, eventName);

            if(ca._eventList !== undefined) ca._eventList[eventName].length = 0;
            
        }

        return ca;
    }

    _addCA(ca, eventName, callback){
        if(ca._eventList === undefined) CanvasImageEvent.bind(ca);
        if(ca._eventList[eventName] === undefined) ca._eventList[eventName] = [];
        ca._eventList[eventName].push(callback);

    }

    _removeCA(ca, eventName, callback){
        if(ca._eventList !== undefined && ca._eventList[eventName] !== undefined){
            for(let k = 0, len = ca._eventList[eventName].length; k < len; k++){
                if(ca._eventList[eventName][k] === callback){
                    ca._eventList[eventName].splice(k, 1);
                    break;
                }
            }
        }

    }

    _add(ca, eventName){
        if(this._eventList[eventName] === undefined){
            this._eventList[eventName] = [];
            this._createEvent(eventName);
        }

        //if(this._eventList[eventName].includes(ca) === false) this._eventList[eventName].push(ca);
        this._eventList[eventName].push(ca);
    }

    _remove(ca, eventName){
        if(this._eventList[eventName] !== undefined){
            let key = this._eventList[eventName].indexOf(ca);
            if(key !== -1) this._eventList[eventName].splice(key, 1);
            if(key === 0){
                if(eventName == "over" || eventName === "out") this.disposeEvent(eventName);
                else this.domElement[CanvasImageEvent.canvasEventsList[eventName]] = null;
                delete this._eventList[eventName];
            }

        }

    }

    _createEvent(evn){
        var k, len, ca, arr, tar = null, oldTar = null, _run = null, offsetX, offsetY;

        const _box = CanvasImageEvent.emptyBox, _rotate = CanvasImageEvent.emptyRotate,

        run = event => {
            len = this["_eventList"][evn].length;
            if(len === 0) return;

            offsetX = event.offsetX + this.box.x;
            offsetY = event.offsetY + this.box.y;

            tar = null;
            for(k = 0; k < len; k++){
                ca = this["_eventList"][evn][k];
                _box.copy(ca.box);

                //计算旋转后的box
                if(ca.rotate !== null) _box.setFromRotate(_rotate.set(_box.x+ca.rotate.origin.x, _box.y+ca.rotate.origin.y, ca.rotate.angle));
                
                if(ca["visible"] === true && _box.containsPoint(offsetX, offsetY)){
                    
                    if(tar === null || tar["index"] < ca["index"]) tar = ca;
                    
                }

            }
            
            if(_run !== null) _run();
            if(tar !== null){
                this._running = evn;
                arr = tar["_eventList"][evn]; 
                len = arr.length;
                for(k = 0; k < len; k++) arr[k](event, tar);
                
                tar = null;

                len = this._delList.length;
                for(k = 0; k < len; k += 3){
                    this._remove(this._delList[k], this._delList[k+1]);
                    this._removeCA(this._delList[k], this._delList[k+1], this._delList[k+2]);
                }
                this._running = "";
                this._delList.length = 0;
            }
            
        }
        
        if(evn === "over" || evn === "out"){
            this.domElement.addEventListener(CanvasImageEvent.canvasEventsList[evn], run);
            this["_"+evn] = run;
            if(evn === "over"){
                _run = ()=>{
                    if(tar !== null){
                        if(oldTar !== null){
                            if(oldTar !== tar) oldTar = tar;
                            else tar = null;
                        }
                        else oldTar = tar;
                    }
                    else if(oldTar !== null) oldTar = null;
    
                }

            }

            else{
                let _tar = null;
                _run = ()=>{
                    if(tar !== null){
                        if(oldTar !== null){
                            if(oldTar !== tar){
                                _tar = tar;
                                tar = oldTar;
                                oldTar = _tar;
                            }
                            else tar = null;
                        }
                        else{
                            oldTar = tar;
                            tar = null;
                        }
                    }
                    else if(oldTar !== null){
                        tar = oldTar;
                        oldTar = null;
                    }
    
                }

            }

            /* _run = ()=>{
                if(tar !== null){
                    if(oldTar !== null){

                        if(oldTar !== tar){
                            if(evn === "over") oldTar = tar;
                            else{
                                let _tar = tar;
                                tar = oldTar;
                                oldTar = _tar;
                            }
                        }

                        else tar = null;

                    }

                    else{
                        oldTar = tar;
                        if(evn === "out") tar = null;
                        
                    }
                    
                }

                else{
                    if(oldTar !== null){
                        if(evn === "out") tar = oldTar;
                        oldTar = null;
                    }
                    
                }

            } */
            
        }

        else this.domElement[CanvasImageEvent.canvasEventsList[evn]] = run;

    }

}




/* CanvasImageScroll (CanvasImageRender 的滚动条)

待解决的问题:
    1 当某个ci与scroll重叠时, cir.redrawTarget(ci)方法无法检测到scroll(不能重绘滚动条); 把scroll定义为ci可以解决此问题

parameter:
    cir: CanvasImageRender, 
    cie: CanvasImageEvent, 
    option: Object{
        domEventTarget: //dom事件的绑定目标html元素; 默认 cir.domElement
        scrollSize        //滚动轴的宽或高; 默认 10; (如果想隐藏滚动条最好用 scrollVisible, 而不是把此属性设为0)
        scrollVisible    //滚动轴的显示类型; 可能值: 默认"auto" || "visible" || "";
        scrollEventType    //可能的值: 默认"default", "touch" || "";
        inertia            //是否启用移动端滚动轴的惯性; 默认 true;
        inertiaLife        //移动端滚动轴惯性生命(阻力强度); 0 - 1; 默认 0.04;
    }

*/
class CanvasImageScroll{

    static unbindScroll(box){
        var _x = box.x, _y = box.y, _w = box.w, _h = box.h;
        Object.defineProperties(box, {

            x: {
                get(){return _x;},
                set(v){_x = v;}
            },

            y: {
                get(){return _y;},
                set(v){_y = v;}
            },

            w: {
                get(){return _w;},
                set(v){_w = v;}
            },

            h: {
                get(){return _h;},
                set(v){_h = v;}
            },

        });
    }

    #cir = null;
    #scrollViewBoxX = new Box();
    #scrollViewBoxY = new Box();
    #maxSize = new Point();
    get maxSize(){return this.#maxSize;}
    
    constructor(cir, cie, option = {}){
        this.#cir = cir;
        this.scrollSize = UTILS.isNumber(option.scrollSize) ? option.scrollSize : 10;
        
        const oninitList = event => {
            const len = cir.list.length;
            for(let k = event ? event.index : 0; k < len; k++) this.bindScroll(cir.list[k].box);
            this.resetMaxSizeX();
            this.resetMaxSizeY();
        }

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

            case "": 
            this.scrollVisible = "";
            break;

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

        switch(option.scrollEventType){
            case "touch": 
            this.createScrollEventMobile(cie, option.domEventTarget || cir.domElement, option.inertia, option.inertiaLife);
            break;

            case "": 
            break;

            case "default": 
            default: 
            this.createScrollEventPC(cie);
            break;
        }
        
        if(EventDispatcher.prototype.isPrototypeOf(cir.eventDispatcher)){
            const box = this.#cir.box;

            cir.eventDispatcher.register("boxX", ()=>{
                if(box.x < 0) box.x = 0;
                else if(box.mx > this.#maxSize.x) box.x = this.#maxSize.x - box.w;
            });
            cir.eventDispatcher.register("boxY", ()=>{
                if(box.y < 0) box.y = 0;
                else if(box.my > this.#maxSize.y) box.y = this.#maxSize.y - box.h;
            });

            cir.eventDispatcher.register("add", event => {
                const ciBox = event.value.box;
                this.bindScroll(ciBox);
                ciBox.w = ciBox.w;
                ciBox.h = ciBox.h;
            });
            cir.eventDispatcher.register("remove", event => {
                const ciBox = event.value.box;
                if(ciBox.mx >= this.#maxSize.x) this.resetMaxSizeX();
                if(ciBox.my >= this.#maxSize.y) this.resetMaxSizeY();
                CanvasImageScroll.unbindScroll(ciBox);
            });
            
            cir.eventDispatcher.register("initList", oninitList);

            cir.eventDispatcher.register("afterDraw", () => {
                if(this.scrollVisible !== ""){
                    this.updateScrollViewBox();
                    this.drawScroll();
                }
            });

        }

        else console.warn("CanvasImageScroll: 请定义 eventDispatcher");
        
        if(cir.list.length !== 0) oninitList();
    }

    updateScrollViewBox(){
        this.#scrollViewBoxX.x = this.cursorX();
        this.#scrollViewBoxX.y = this.#cir.box.h - this.scrollSize;
        this.#scrollViewBoxX.w = this.#maxSize.x <= this.#cir.box.w ? this.#cir.box.w : this.#cir.box.w / this.#maxSize.x * this.#cir.box.w;
        this.#scrollViewBoxX.h = this.scrollSize;

        this.#scrollViewBoxY.x = this.#cir.box.w - this.scrollSize;
        this.#scrollViewBoxY.y = this.cursorY();
        this.#scrollViewBoxY.w = this.scrollSize;
        this.#scrollViewBoxY.h = this.#maxSize.y <= this.#cir.box.h ? this.#cir.box.h : this.#cir.box.h / this.#maxSize.y * this.#cir.box.h;
    }

    drawScroll(){
        if(this.scrollVisible === "visible" || (this.scrollVisible === "auto" && this.#maxSize.x > this.#cir.box.w)){
            this.#cir.context.fillRect(this.#scrollViewBoxX.x, this.#scrollViewBoxX.y, this.#scrollViewBoxX.w, this.#scrollViewBoxX.h);
            this.#cir.context.strokeRect(this.#scrollViewBoxX.x, this.#scrollViewBoxX.y, this.#scrollViewBoxX.w, this.#scrollViewBoxX.h);
        }

        if(this.scrollVisible === "visible" || (this.scrollVisible === "auto" && this.#maxSize.y > this.#cir.box.h)){
            this.#cir.context.fillRect(this.#scrollViewBoxY.x, this.#scrollViewBoxY.y, this.#scrollViewBoxY.w, this.#scrollViewBoxY.h);
            this.#cir.context.strokeRect(this.#scrollViewBoxY.x, this.#scrollViewBoxY.y, this.#scrollViewBoxY.w, this.#scrollViewBoxY.h);
        }
    }

    createScrollEventPC(cie){
        var dPos = -1;

        const _box = this.#cir.box, scope = this,
        
        setTop = (event, top) => {
            _box.y = top / _box.h * this.#maxSize.y;
            this.#cir.redraw();
        },

        setLeft = (event, left) => {
            _box.x = left / _box.w * this.#maxSize.x;
            this.#cir.redraw();
        },
        
        onMoveTop = event => {
            setTop(event, event.offsetY - dPos);
        },

        onMoveLeft = event => {
            setLeft(event, event.offsetX - dPos);
        },

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

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

        //伪 CanvasImage, 是 CanvasImageEvent 使用的必须属性
        boxX = new Box(),
        eventTargetX = {
            get index(){return Infinity;},
            get visible(){return true;},
            get box(){return boxX},
            get rotate(){return null},
        },
        
        boxY = new Box(),
        eventTargetY = {
            get index(){return Infinity;},
            get visible(){return true;},
            get box(){return boxY},
            get rotate(){return null},
        },

        eventTargetWheel = {
            get index(){return -1;},
            get visible(){return true;},
            get box(){return _box},
            get rotate(){return null},
        }

        Object.defineProperties(boxX, {
            x: {get: () => {return _box.x;}},
            y: {get: () => {return _box.h - scope.scrollSize + _box.y;}},
            w: {get: () => {return _box.w;}},
            h: {get: () => {return scope.scrollSize;}},
        });

        Object.defineProperties(boxY, {
            x: {get: () => {return _box.w - scope.scrollSize + _box.x;}},
            y: {get: () => {return _box.y;}},
            w: {get: () => {return scope.scrollSize;}},
            h: {get: () => {return _box.h;}},
        });

        //pc event
        cie.add(eventTargetX, "down", event => {
            dPos = event.offsetX - this.cursorX();
            onUpLeft(null);
            document.body.addEventListener("pointermove", onMoveLeft);
            document.body.addEventListener("pointerup", onUpLeft);
        });

        cie.add(eventTargetY, "down", event => {
            dPos = event.offsetY - this.cursorY();
            onUpTop(null);
            document.body.addEventListener("pointermove", onMoveTop);
            document.body.addEventListener("pointerup", onUpTop);
        });

        cie.add(eventTargetWheel, "wheel", event => {
            if(this.#maxSize.y > _box.h){
                dPos = 50 / this.#maxSize.y * _box.h;
                setTop(event, this.cursorY() + (event.wheelDelta === 120 ? -dPos : dPos));
            }
            else if(this.#maxSize.x > _box.w){
                dPos = 50 / this.#maxSize.x * _box.w;
                setLeft(event, this.cursorX() + (event.wheelDelta === 120 ? -dPos : dPos));
            }
        });

    }

    createScrollEventMobile(cie, domElement, inertia = true, inertiaLife){
        var px, py, dPos = 0, sPos = new Point(), step = 1, aniamteRun = false, stepA = "", stepB = "", sTime = 0;

        const _box = this.#cir.box;

        if(inertia === true){
            inertiaLife = 1 - ((UTILS.isNumber(inertiaLife) && inertiaLife >= 0 && inertiaLife <= 1) ? inertiaLife : 0.04);
            var inertiaAnimate = new AnimateLoop(null),
        
            inertiaTop = (event, speed) => {
                if(Math.abs(speed) < 1) return;
                
                stepA = speed < 0 ? "-top" : "top";
                if(aniamteRun && stepA === stepB) step += 0.3;
                else{
                    step = 1;
                    stepB = stepA;
                }
                
                inertiaAnimate.play(() => {
                    speed *= inertiaLife;
                    setTop(event, _box.y + step * 20 * speed);
                    if(Math.abs(speed) < 0.001 || _box.y <= 0 || _box.my >= this.#maxSize.y) inertiaAnimate.stop();
                });
            },

            inertiaLeft = (event, speed) => {
                if(Math.abs(speed) < 1) return;
                stepA = speed < 0 ? "-left" : "left";
                if(aniamteRun && stepA === stepB) step += 0.3;
                else{
                    step = 1;
                    stepB = stepA;
                }
                inertiaAnimate.play(() => {
                    speed *= inertiaLife;
                    setLeft(event, _box.x + step * 20 * speed);
                    if(Math.abs(speed) < 0.001 || _box.x <= 0 || _box.mx >= this.#maxSize.x) inertiaAnimate.stop();
                });
            }
        }

        const setTop = (event, top) => {
            _box.y = top;
            this.#cir.redraw();
        },

        setLeft = (event, left) => {
            _box.x = left;
            this.#cir.redraw();
        },
        
        onMoveTop = event => {
            setTop(event, dPos - event.offsetY);
        },

        onMoveLeft = event => {
            setLeft(event, dPos - event.offsetX);
        },

        onUpTop = event => {
            document.body.removeEventListener('pointermove', onMoveTop);
            document.body.removeEventListener('pointerup', onUpTop);
            if(event !== null){
                onMoveTop(event);
                if(inertia === true) inertiaTop(event, (_box.y - sPos.y) / (Date.now() - sTime));
            }
        },

        onUpLeft = event => {
            document.body.removeEventListener('pointermove', onMoveLeft);
            document.body.removeEventListener('pointerup', onUpLeft);
            if(event !== null){
                onMoveLeft(event);
                if(inertia === true) inertiaLeft(event, (_box.x - sPos.x) / (Date.now() - sTime));
            }
        },

        eventTarget = {
            get index(){return -1;}, //最低优先
            get visible(){return true;},
            get box(){return _box;},
            get rotate(){return null},
        },

        a1 = Math.PI / 4, a2 = Math.PI / 2 + a1,

        onUp = event => {
            domElement.removeEventListener("pointerup", onUp);
            domElement.removeEventListener('pointermove', onMove);
        },

        onMove = event => {
            dPos++; if(dPos < 4) return;
            onUp(event);
            const a = Math.atan2(event.pageY - py, event.pageX - px);
            if((a < a2 && a >= a1) || (a < -a1 && a >= -a2)){ //y轴
                if(this.#maxSize.y > _box.h){
                    dPos = py + sPos.y;
                    document.body.addEventListener("pointermove", onMoveTop);
                    document.body.addEventListener("pointerup", onUpTop);
                }
            }
            else{ //x轴
                if(this.#maxSize.x > _box.w){
                    dPos = px + sPos.x;
                    document.body.addEventListener("pointermove", onMoveLeft);
                    document.body.addEventListener("pointerup", onUpLeft);
                }
            }
        }
    
        cie.add(eventTarget, "down", event => {
            px = event.offsetX;
            py = event.offsetY;
            dPos = 0;
            sPos.set(_box.x, _box.y);
            sTime = Date.now();

            if(inertia === true){
                aniamteRun = inertiaAnimate.running;
                inertiaAnimate.stop();
            }

            //防止没触发 move 或 up 事件;
            onUpLeft(null);
            onUpTop(null);
            onUp();
            
            domElement.addEventListener("pointermove", onMove);
            domElement.addEventListener("pointerup", onUp);
        });
    }

    bindScroll(box){
        var _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;
            else if(nm < this.#maxSize.x){
                if(om >= this.#maxSize.x) this.resetMaxSizeX();
            }
        },

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

        Object.defineProperties(box, {

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

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

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

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

        });
    }

    resetMaxSizeX(){
        this.#maxSize.x = 0;
        for(let k = 0, len = this.#cir.list.length, m; k < len; k++){
            m = this.#cir.list[k].box.mx;
            if(m > this.#maxSize.x) this.#maxSize.x = m;
        }
    }

    resetMaxSizeY(){
        this.#maxSize.y = 0;
        for(let k = 0, len = this.#cir.list.length, m; k < len; k++){
            m = this.#cir.list[k].box.my;
            if(m > this.#maxSize.y) this.#maxSize.y = m;
        }
    }

    cursorX(v = this.#cir.box.x){
        return v/this.#maxSize.x*this.#cir.box.w;
    }

    cursorY(v = this.#cir.box.y){
        return v/this.#maxSize.y*this.#cir.box.h;
    }

}




/* CanvasImage (CanvasImageRender 的渲染目标)
parameter: 
    image (构造器会调用一次 .setImage(image) 来处理 image 参数)

attribute:
    opacity: Float;     //透明度; 值0至1之间; 默认1;
    visible: Boolean;    //默认true; 完全隐藏(既不绘制视图, 也不触发绑定的事件)
    box: Box;             //.x.y 图像的位置, .w.h 图像的宽高;
    rotate: Roate;        //旋转; 默认 null (注意: 旋转的原点是相对于 box.x.y 的)
    暂未实现, 先用box.w.h代替缩放//scale: Box;            //缩放; .x.y中心点, .w.h缩放; 默认 null; (注意: 缩放的原点是相对于 box.x.y 的)
    x, y: Number;        //this.box 的 .x.y

    //以下属性不建议直接修改
    overlap: Object; //CanvasImageRender.computeOverlaps(ca) 方法更新
    index: Integer; //CanvasImageRender.index(ca) 修改

    //只读
    width, height, image; isRotate, isScale

method:
    setImage(image): this;         //设置图像 (image 如果是 CanvasImage 并它正在加载图像时, 则会在它加载完成时自动设置 image);
    loadImage(src, onload): this;    //加载并设置图像 (onload 如果是 CanvasImageRender 则加载完后自动调用一次 redraw 或 render 方法);
    loadVideo(src, onload, type = "mp4")
    pos(x, y): this;             //设置位置; x 可以是: Number, Object{x,y}

demo:
    //CanvasImageRender
    const cir = new CanvasImageRender({width: WORLD.width, height: WORLD.height});
    cir.domElement.style = `
        position: absolute;
        z-index: 9999;
        background: rgb(127,127,127);
    `;

    //values
    const ciA = cir.add(new CanvasImage()).pos(59, 59).load("view/examples/img/test.png", cir);
    ciA.opacity = 0.2; //设置透明度

    const ciB = cir.add(new CanvasImage(ciA)).pos(59, 120);
    ciB.rotate = new Rotate().toAngle(45); //旋转45度

    //event
    const cie = new CanvasImageEvent(cir); //注意: CanvasImage 的缩放和旋转都会影响到 CanvasImageEvent
    cie.add(ciB, "click", event => { //ciB 添加 点击事件
        console.log("click ciB: ", event);
    });


    //这个用于搭载H5视频 video
    cir.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(cir.box);

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

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

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

    });

*/
class CanvasImage{

    #box = new Box();
    #image = null;
    #isLoadImage = false;

    get name(){return this.constructor.name;}
    get box(){return this.#box;}
    get image(){return this.#image;}
    get isScale(){return this.#image.width !== this.box.w || this.#image.height !== this.box.h;}
    get isLoadImage(){return this.#isLoadImage;}
    get width(){return this.#image !== null ? this.#image.width : 0;}
    get height(){return this.#image !== null ? this.#image.height : 0;}
    get x(){return this.box.x;}
    get y(){return this.box.y;}
    
    constructor(image){
        this.opacity = 1;
        this.visible = true;
        this.rotate = null;
        //this.scale = null;

        //以下属性不建议直接修改
        this.overlap = false;
        this.index = -1;

        this.setImage(image);
    }

    pos(x, y){
        if(UTILS.isNumber(x)){
            this.box.x = x;
            this.box.y = y;
        }
        else if(UTILS.isObject(x)){
            this.box.x = x.x;
            this.box.y = x.y;
        }
        return this;
    }

    setImage(image){
        if(CanvasImageRender.isCanvasImage(image)){
            this.box.size(image.width, image.height);
            this.#image = image;
        }
        else if(CanvasImage.prototype.isPrototypeOf(image)){
            if(image.isLoadImage){
                if(Array.isArray(image.loadImage_cis)) image.loadImage_cis.push(this);
                else image.loadImage_cis = [this];
            }
            else this.setImage(image.image);
        }
        else{
            this.box.size(0, 0);
            this.#image = null;
        }
        return this;
    }

    loadImage(src, onload){
        this.#isLoadImage = 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.#isLoadImage = 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;
    }

    _loadSuccess(image, onload){
        this.setImage(image);
        this.#isLoadImage = false;

        if(Array.isArray(this.loadImage_cis)){
            this.loadImage_cis.forEach(ci => ci.setImage(image));
            delete this.loadImage_cis;
        }

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

    /* setScale(nx = 0, ny = 0, ratio = 1){
        this.scale.w = this.#box.w * ratio;
        this.scale.h = this.#box.h * ratio;
        this.scale.x = nx - ((nx - this.scale.x) * ratio + this.scale.x) + this.scale.x;
        this.scale.y = ny - ((ny - this.scale.y) * ratio + this.scale.y) + this.scale.y;
        return this;
    }

    setScaleToSameScaleFromBox(newWidth = this.#box.w){
        if(this.#image === null || this.scale === null) return this;

        const width = this.#image.width, 
        height = this.#image.height,
        ratio = width / height,
        scale = ratio < 1 ? ratio * newWidth / width : newWidth / width;

        this.scale.w = width * scale;
        this.scale.h = height * scale;
        
        return this;
    }

    setScaleToCenterFromBox(){
        if(this.scale === null) return this;

        this.scale.x = (this.#box.w - this.scale.w) / 2;
        this.scale.y = (this.#box.h - this.scale.h) / 2;

        return this;
    } */

}




/* CanvasImages

*/
class CanvasImages extends CanvasImage{

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

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

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

    next(){
        const len = this.images.length - 1;
        if(len !== -1){
            if(this.#i < len) this.#i++;
            else this.#i = 0;
            super.setImage(this.images[this.#i]);
        }
    }

    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;
                if(ty !== "" && typeof ty === "string"){
                    img = new Image();
                    img.onload = func;
                    this.images.push(img);
                    img.src = ty;
                }
                else c--;
            }
        }

        return this;
    }

}




/* CanvasImageCustom

demo:
    //CanvasImageRender
    const cir = new CanvasImageRender({width: WORLD.width, height: WORLD.height});
    cir.domElement.style = `
        position: absolute;
        z-index: 9999;
        background: rgb(127,127,127);
    `;

    //values
    cir.add(new CanvasImageCustom())
    .pos(59, 180)
    .load("view/examples/img/test.png", cir);

    cir.add(new CanvasImageCustom())
    .pos(59, 180)
    .text("value", "red")
    .rect().stroke()

*/
class CanvasImageCustom extends CanvasImage{

    constructor(canvas, autoSize = true){
        super(canvas);
        this.autoSize = autoSize;
        this.fontSize = parseFloat(CanvasImageRender.defaultStyles.font);
        this.fillStyle = CanvasImageRender.defaultStyles.fillStyle;
        this.strokeStyle = CanvasImageRender.defaultStyles.strokeStyle;
        this.shadowColor = CanvasImageRender.defaultStyles.shadowColor;
    }

    toImage(callback){
        var image = new Image();
        image.src = this.image.toDataURL("image/png");
        image.onload = callback;
    }

    shear(canvas, dx = 0, dy = 0){
        if(CanvasImageRender.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(CanvasImageRender.isCanvas(image)){ //image 如果是画布
            super.setImage(image);
            this.context = CanvasImageRender.getContext(image);
            this.size(image.width, image.height);
        }
        else{
            if(CanvasImageRender.isCanvasImage(image)){ //image 如果是图像
                this.context = CanvasImageRender.getContext();
                super.setImage(this.context.canvas);
                this.size(image.width, image.height);
                this.context.drawImage(image, 0, 0);
            }else{ //image 如果是其它对象
                if(image) super.setImage(image);
                else{
                    this.context = CanvasImageRender.getContext();
                    super.setImage(this.context.canvas);
                    this.size(this.width, this.height);
                }
            }
        }
        
        return this;
    }

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

    size(w, h){
        this.box.size(w, h);
        this.image.width = w;
        this.image.height = h;
        CanvasImageRender.setDefaultStyles(this.context);
        
        if(this.context.font !== parseFloat(this.fontSize)) this.context.font = this.fontSize+"px SimSun, Songti SC";//
        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.shadowColor !== this.shadowColor) this.context.shadowColor = this.shadowColor; //

        return this;
    }

    shadow(shadowColor = "rgba(0,0,0,0)", shadowBlur, shadowOffsetX, shadowOffsetY){
        const con = this.context;
        if(typeof shadowColor === "string" && this.shadowColor !== shadowColor) this.shadowColor = con.shadowColor = shadowColor;
        if(con.shadowBlur !== shadowBlur && typeof shadowBlur === "number") con.shadowBlur = shadowBlur;
        if(con.shadowOffsetX !== shadowOffsetX && typeof shadowOffsetX === "number") con.shadowOffsetX = shadowOffsetX;
        if(con.shadowOffsetY !== shadowOffsetY && typeof shadowOffsetY === "number") con.shadowOffsetY = shadowOffsetY;
        return this;
    }

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

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

    rect(r, box){
        const con = this.context, s = con.lineWidth;

        if(Box.prototype.isPrototypeOf(box)){
            var x = box.x,
            y = box.y,
            w = box.w,
            h = box.h;
            
        }else{
            var x = s / 2,
            y = s / 2,
            w = this.box.w - s,
            h = this.box.h - s;
        }

        if(UTILS.isNumber(r) === false || r <= 0){
            con.rect(x, y, w, h);
            return this;
        }

        const _x = x + r, 
        _y = y + r, 
        mx = x + w, 
        my = y + h, 
        _mx = mx - r, 
        _my = my - r;
        
        con.beginPath();

        //上
        con.moveTo(_x, y);
        con.lineTo(_mx, y);
        con.arcTo(mx, y, mx, _y, r);

        //右
        con.lineTo(mx, _y);
        con.lineTo(mx, _my);
        con.arcTo(mx, my, _x, my, r);

        //下
        con.lineTo(_x, my);
        con.lineTo(_mx, my);
        con.arcTo(x, my, x, _my, r);

        //左
        con.lineTo(x, _y);
        con.lineTo(x, _my);
        con.arcTo(x, y, _x, y, r);

        return this;
    }

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

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

    text(value, color = this.fillStyle, fontSize = this.fontSize, x = -1, y = -1){
        if(UTILS.isNumber(fontSize) && fontSize > 1 && this.fontSize !== fontSize){
            this.fontSize = fontSize;
            this.context.font = fontSize+"px SimSun, Songti SC";
        }
        
        const textWidth = this.context.measureText(value).width;
        if(this.autoSize === true && textWidth > this.box.w || this.fontSize > this.box.h){
            this.size(textWidth+4, this.fontSize+4);
            this.fontSize = fontSize;
            this.context.font = fontSize+"px SimSun, Songti SC";
        }

        if(x === -1) x = (this.box.w - textWidth) / 2;
        if(y === -1) y = (this.box.h - this.fontSize) / 2;

        if(color !== "" && this.fillStyle !== color) this.fillStyle = this.context.fillStyle = color;
        this.context.fillText(value, x, y);

        return this;
    }

    linearGradient(sx, sy, dx, dy){
        return this.context.createLinearGradient(sx || 0, sy || 0, dx || this.box.w, dy || 0);
    }

    gradientColors(gradient, colors, close = false){
        if(UTILS.emptyArray(colors)) return gradient;
        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]);
        }
        return gradient;
    }

    drawTransparentBG(r, box, size = 5){
        if(Box.prototype.isPrototypeOf(box)){
            var x = box.x,
            y = box.y,
            w = box.w,
            h = box.h;
        }else{
            var x = 0,
            y = 0,
            w = this.box.w,
            h = this.box.h;
        }

        const con = this.context, 
        c1 = "rgb(255,255,255)", c2 = "rgb(127,127,127)", 
        lenX = Math.ceil(w/size), lenY = Math.ceil(h/size);
        
        con.save();
        this.rect(r, box);
        con.clip();

        for(let ix = 0, iy = 0; ix < lenX; ix++){

            for(iy = 0; iy < lenY; iy++){

                con.fillStyle = (ix + iy) % 2 === 0 ? c1 : c2;
                con.fillRect(ix * size + x, iy * size + y, size, size);
                
            }

        }

        con.restore();
        return this;
    }

}



export {
    CanvasImageEvent,
    CanvasImageScroll,
    CanvasImageRender,
    CanvasImage, 
    CanvasImages,
    CanvasImageCustom,
}

 

"use strict";

import {
    UTILS, 
    TreeStruct,
    RGBColor,
    Box,
} from './Utils.js';

import {
    CanvasImageRender,
    CanvasImage,
    CanvasImages,
    CanvasImageCustom,
} from './CanvasImageRender.js';

var disableColor = "rgba(0,0,0,0.75)";

const emptyCIC = new CanvasImageCustom(null, false), 
bgColor = {down: "#b3b3b3", up: "#b3b3b3"}, //如果为null不创建背景
textColor = {down: "#999999", up: "#ffffff"},
borderColor = {down: "#ffffff", up: "#999999"},
padding = {x: 4, y: 4};

function isS(v){
    return UTILS.isNumber(v) && v >= 1 && v !== Infinity;
}

function getW(v){
    return emptyCIC.context.measureText(v).width+padding.x+padding.x;
}

function getH(w){
    return Math.max(emptyCIC.fontSize+padding.y+padding.y, Math.round(0.618*w));
}

function initCIC(w, h){
    emptyCIC.size(w, h).rect(Math.min(w, h) * 0.1);
    return emptyCIC;
}

function getItem(v, t){
    return emptyCIC.fill(bgColor[t])
    .text(v, textColor[t])
    .stroke(borderColor[t])
    .shear();
}

function but_rect(w, h, v){
    if(!isS(w)) w = getW(v);
    if(!isS(h)) h = getH(w);
    
    //up
    initCIC(w, h);
    const a = getItem(v, "up"),

    //disable
    c = emptyCIC.fill(disableColor).shear();

    //down
    emptyCIC.clear();
    const b = getItem(v, "down");
    
    return [a, b, c];
}

function but_circle(w, v){
    if(!isS(w)) w = getW(v);

    //up
    emptyCIC.size(w, w).rect(w / 2);
    const a = getItem(v, "up"),

    //disable
    c = emptyCIC.fill(disableColor).shear();

    //down
    emptyCIC.clear();
    const b = getItem(v, "down");

    return [a, b, c];
}

function bool_rect(w, h){
    if(!isS(w)) w = getW("✔");
    if(!isS(h)) h = w;
    
    //true
    initCIC(w, h);
    const a = getItem("✔", "up"),

    b = emptyCIC.fill(disableColor).shear();

    emptyCIC.clear();
    const c = getItem("✔", "down");
    
    //false
    emptyCIC.clear()
    const d = getItem("", "up"),

    e = emptyCIC.fill(disableColor).shear();

    emptyCIC.clear();
    const f = getItem("", "down");

    return [a, b, c, d, e, f];
}

function bool_fillet(w, h){
    const textW = emptyCIC.context.measureText("开").width;
    if(!isS(w)) w = textW*2+padding.x+padding.x + emptyCIC.fontSize;
    if(!isS(h)) h = Math.max(emptyCIC.fontSize+padding.y+padding.y, getH(w) / 2)
    
    emptyCIC.size(w, h).rect(Math.min(w, h) * 0.5);

    const halfW = w / 2, cx = (halfW-textW)/2,

    //true
    a = emptyCIC
    .fill(bgColor.up)
    .text("开", textColor.up, 0, cx)
    .text("关", textColor.disable, 0, halfW+cx)
    .stroke(borderColor.up)
    .shear(),

    b = emptyCIC.fill(disableColor).shear(),

    c = emptyCIC.clear()
    .fill(bgColor.down)
    .text("开", textColor.down, 0, cx)
    .text("关", textColor.down, 0, halfW+cx)
    .stroke(borderColor.down)
    .shear(),
    
    //false
    d = emptyCIC.clear()
    .fill(bgColor.up)
    .text("开", textColor.disable, 0, cx)
    .text("关", textColor.up, 0, halfW+cx)
    .stroke(borderColor.up)
    .shear(),
    e = emptyCIC.fill(disableColor).shear(),
    f = c;

    return [a, b, c, d, e, f];
}


class CanvasUI extends CanvasImages{

    static fontSize(v){
        v = UTILS.isNumber(v) && v > 0 && v !== Infinity ? v : 12;
        if(v === emptyCIC.fontSize) return v;
        emptyCIC.fontSize = v;
        emptyCIC.context.font = v+"px SimSun, Songti SC";
        return v;
    }

    constructor(images){
        super(images);
    }

}




/* CanvasButton 为画布预设按钮 (防止移动端多指混乱)
parameter: 
    value: String; //按钮名; 默认 "Button"
    width, height: Number; //默认自适应
    style: String; //可能值: 默认"rect", "circle"

attribute:
    enable: Bool;     //是否启用;
    value: String;     //只读

method:
    bindEvent(cir: CanvasImageRender, callback: Func, delay: Number): this;
    //cir: 内部使用cir来绑定或解绑事件和更新自己(cir.redrawTarget(this)); 必须
    //callback: 默认null
    //delay: 可以限制每次点击的延迟毫秒时间; 默认0

demo:
    //button
    const cb = cir.add(new CanvasButton({
        width: 80,
        value: "测试 TEST",
    }));

    cb.bindEvent(cir, event => console.log(1));
    cb.box.center(cir.box);
    console.log(cb);
*/
class CanvasUIButton extends CanvasUI{

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

    #enable = true;
    get enable(){return this.#enable;}
    set enable(v){
        if(v === false){
            this.cursor = 2;
            this.#enable = false;
        }
        else if(v === true){
            this.cursor = 0;
            this.#enable = true;
        }
    }

    constructor(value, width, height, style = "rect"){
        
        value = value !== "" && typeof value === "string" ? value : "Button";

        switch(style){
            case "circle": 
            var images = but_circle(width, value);
            break;

            case "rect": 
            default: 
            var images = but_rect(width, height, value);
            break;
        }
        
        super(images);
        this.#value = value;
        
    }

    bindEvent(cir, cie, callback, delay = 0){
        if(cir.eventDispatcher === null) return this;
        callback = typeof callback === "function" ? callback : null;
        
        var pointerId = -1, isDown = false, isDelay = false, sTime = 0;

        const ondelay = () => {
            if(this.cursor === 2){
                this.cursor = 0;
                cir.redrawTarget(this);
            }
            isDelay = false;
        },
        
        onup_body = event => {
            if(event.pointerId !== pointerId || this.enable === false) return;
            document.body.removeEventListener("pointerup", onup_body);
            isDown = false;
            if(this.cursor === 1){
                this.cursor = 0;
                if(cir.list.includes(this)) cir.redrawTarget(this);
            }
        },

        onup = event => {
            if(isDown && callback !== null && this.enable && event.pointerId === pointerId){
                const dTime = Date.now() - sTime;
                if(dTime < delay){
                    isDelay = true;
                    setTimeout(ondelay, delay - dTime);
                    this.cursor = 2;
                    cir.redrawTarget(this);
                }

                isDown = false;
                callback(event, this);
            }
        },

        ondown = event => {
            if(isDelay || event.button !== 0 || this.enable === false) return;
            pointerId = event.pointerId;
            document.body.addEventListener("pointerup", onup_body);
            this.cursor = 1;
            isDown = true;
            sTime = Date.now();
            cir.redrawTarget(this);
        },

        remove = () => {
            document.body.removeEventListener("pointerup", onup_body);
            cir.remove(this, "up", onup);
            cir.remove(this, "down", ondown);
            cir.eventDispatcher.deleteEvent("remove", remove);
        }

        cie.add(this, "down", ondown);
        cie.add(this, "up", onup);
        cir.eventDispatcher.register("remove", remove);
    
        return this;
    }
    
}


/* CanvasUIBool 开关控件
parameter:
    value: Bool; //默认 false
    width, height: Number; //默认自适应
    style: 默认 rect 矩形开关, fillet 圆角开关

attribute:
    enable: Bool;     //是否启用;
    value: String;     //设置控件的值;(注意: 它不会自动更新画布)

method:
    bindEvent(cir, callback, delay = 0): this;

*/
class CanvasUIBool extends CanvasUI{

    #value = false;
    get value(){return this.#value;}
    set value(v){
        if(this.#enable && typeof v === "boolean"){
            this.#value = v;
            this.cursor = v ? 0 : 3;
        }
    }

    #enable = true;
    get enable(){return this.#enable;}
    set enable(v){
        if(v === false){
            this.cursor = this.#value ? 1 : 4;
            this.#enable = false;
        }
        else if(v === true){
            this.cursor = this.#value ? 0 : 3;
            this.#enable = true;
        }
    }

    constructor(value, width, height, style = "rect"){
        value = typeof value === "boolean" ? value : false;

        switch(style){
            case "fillet": 
            var images = bool_fillet(width, height);
            break;

            case "rect": 
            default: 
            var images = bool_rect(width, height);
            break;
        }
        
        super(images);
        this.value = value;
        
    }

    bindEvent(cir, cie, callback, delay = 0){
        if(cir.eventDispatcher === null) return this;
        callback = typeof callback === "function" ? callback : null;
        
        var pointerId = -1, isDown = false, isDelay = false, sTime = 0;

        const ondelay = () => {
            if(this.cursor === 1){
                this.cursor = 0;
                cir.redrawTarget(this);
            }
            else if(this.cursor === 4){
                this.cursor = 3;
                cir.redrawTarget(this);
            }
            isDelay = false;
        },
        
        onup_body = event => {
            if(event.pointerId !== pointerId || this.enable === false) return;
            document.body.removeEventListener("pointerup", onup_body);
            if(this.cursor === 2){
                this.cursor = 0;
                cir.redrawTarget(this);
            }
            else if(this.cursor === 5){
                this.cursor = 3;
                cir.redrawTarget(this);
            }
            isDown = false;
        },

        onup = event => {
            if(isDown && this.enable && event.pointerId === pointerId){
                this.value = !this.#value;

                if(callback !== null){
                    const dTime = Date.now() - sTime;
                    if(dTime < delay){
                        isDelay = true;
                        setTimeout(ondelay, delay - dTime);
                        this.cursor = this.#value ? 1 : 4;
                    }
                    callback(event, this);
                }

                cir.redrawTarget(this);
                isDown = false;
            }
        },

        ondown = event => {
            if(isDelay || event.button !== 0 || this.enable === false) return;
            pointerId = event.pointerId;
            document.body.addEventListener("pointerup", onup_body);
            this.cursor = this.cursor === 0 ? 2 : 5;
            isDown = true;
            sTime = Date.now();
            cir.redrawTarget(this);
        },

        remove = () => {
            document.body.removeEventListener("pointerup", onup_body);
            cie.remove(this, "up", onup);
            cie.remove(this, "down", ondown);
            cir.eventDispatcher.deleteEvent("remove", remove);
        }

        cie.add(this, "down", ondown);
        cie.add(this, "up", onup);
        cir.eventDispatcher.register("remove", remove);
        
        return this;
    }

}


class CanvasUIText extends CanvasUI{

    constructor(value){
        super();

    }

}

class CanvasUINumber extends CanvasUI{

    constructor(value, min, max, style){
        super();

    }

}

class CanvasUIColor extends CanvasUI{

}


/* ColorTestViewer 颜色调试器
parameter:
    w, 默认 250 
    h, 默认 w*0.618 
    r, 默认 0

attribute:
    hsv: Object{h,s,v};
    alpha: Number;
    只读: value: RGBColor, width, height, x, y: Number;

method:
    visible(v: Bool): undefined;//显示或隐藏所以的ci
    pos(x, y): undefined;         //如果你不希望排版错乱的话用此方法设置它们的位置位置
    toArray(arr): undefined;     //把创建的 CanvasImage push到arr数组 (arr数组一般为某个 CanvasImageRender.list)
    update(): undefined;         //当颜色发送改变时更新: ctv.set("red").update()
    set(r, g, b, a): this;         //第一个参数r可以时字符串样式的颜色(rgb|rgba|十进制|英文)

    bindEvent(cir: CanvasImageRender, cie: CanvasImageEvent, onchange: Func): this;    //

demo:
    const ctv = new ColorTestViewer(),
    cir = new CanvasImageRender({width: ctv.box.w - 5, height: ctv.box.h - 5}),
    cie = new CanvasImageEvent(cir); //启用dom事件
    
    ctv.set("blue").update();
    ctv.toArray(cir.list);
    ctv.bindEvent(cir, cie);
    cir.render();
*/
class ColorTestViewer{

    static emptyColor = new RGBColor();
    static bgColor = "rgb(127,127,127)";
    static textColor = "#fff";

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

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

    #alpha = 1;
    get alpha(){
        return this.#alpha;
    }

    set alpha(v){
        this.#alpha = UTILS.floatKeep(v);
    }

    constructor(w, h, r = 4){
        if(!isS(w)) w = 250;
        if(!isS(h)) h = getH(w);

        this.hsv = {h:0, s:100, v:100};

        const colors = [], lw = w * 0.3, rw = w - lw, sh = 10,
        cursorImage = emptyCIC.size(10, 10).rect(5).fill("#fff").shear();


        //h
        this.ciH = new CanvasImageCustom().size(w, h).rect(r);

        colors.length = 0;
        for(let h = 0, c = ColorTestViewer.emptyColor; h < 6; h++){
            c.setFormHSV(h/6*360, 100, 100);
            colors[h] = `rgb(${c.r},${c.g},${c.b})`;
        }
        emptyCIC.size(rw-10, sh).rect(2).fill(emptyCIC.gradientColors(emptyCIC.linearGradient(0, sh, rw-10, sh), colors, true));
        this.ciH_scroll = new CanvasImage(emptyCIC.shear());

        this.cursorH = new CanvasImage(cursorImage);


        //sv 饱和度&明度
        emptyCIC.size(w, h).rect(r);
        colors.length = 0;
        for(let s = 0; s < 100; s++) colors[s] = `rgba(255,255,255,${1 - s / 99})`;
        emptyCIC.fill(emptyCIC.gradientColors(emptyCIC.linearGradient(0, h, w, h), colors));
        
        colors.length = 0;
        for(let v = 0; v < 100; v++) colors[v] = `rgba(0,0,0,${1 - v / 99})`;
        emptyCIC.fill(emptyCIC.gradientColors(emptyCIC.linearGradient(w, h, w, 0), colors));

        this.ciSV = new CanvasImage(emptyCIC.shear());

        this.cursorSV = new CanvasImage(emptyCIC.size(10, 10).rect(5).fill("rgba(255,255,255,0.4)").stroke("rgba(0,0,0,0.6)").shear());


        //a
        this.ciA = new CanvasImage(emptyCIC.size(rw-10, sh).drawTransparentBG(2, null, sh/2).shear());

        colors.length = 0;
        for(let a = 0; a < 10; a++) colors[a] = `rgba(0,0,0,${a / 9})`;
        emptyCIC.size(this.ciA.box.w, sh).rect(2).fill(emptyCIC.gradientColors(emptyCIC.linearGradient(0, sh, this.ciA.box.w, sh), colors));
        this.ciA_scroll = new CanvasImage(emptyCIC.shear());

        this.cursorA = new CanvasImage(cursorImage);

        //bottom bg
        this.bottomBG = new CanvasImage(emptyCIC.size(w, lw).rect(r).fill(ColorTestViewer.bgColor).shear());

        //result
        this.resultBG = new CanvasImage(emptyCIC.size(lw-10, lw-10).drawTransparentBG(2, null, 5).shear());
        this.resultColor = new CanvasImageCustom().size(this.resultBG.box.w, this.resultBG.box.h).rect(2);
        this.resultText = new CanvasImageCustom().size(this.ciA.box.w, this.resultColor.box.h - this.ciH_scroll.box.h - this.ciA_scroll.box.h - 15);
        
        const _box = new Box(), scope = this, _s = this.cursorSV.box.w / 2;
        this.#box = _box;
        Object.defineProperties(_box, {
            x: {get: () => {return scope.ciH.box.x - _s;}},
            y: {get: () => {return scope.ciH.box.y - _s;}},
            w: {get: () => {return scope.ciH.box.w + _s;}},
            h: {get: () => {return scope.ciH.box.h + scope.bottomBG.box.h + _s;}},
        });

        this.updateCIH();
        this.updateResult();
        this.pos(0, 0);
    }

    bindEvent(cir, cie, onchange = null){
        var sx = 0, sy = 0, v;
        const cursorSV_half = this.cursorSV.box.w / 2,


        //SV
        setSV = (x, y) => {
            if(x < this.#box.x) x = this.#box.x;
            else{
                v = this.ciSV.box.mx - cursorSV_half;
                if(x > v) x = v;
            }

            if(y < this.#box.y) y = this.#box.y;
            else{
                v = this.ciSV.box.my - cursorSV_half;
                if(y > v) y = v;
            }

            this.cursorSV.box.pos(x, y);
            
            x += cursorSV_half;
            y += cursorSV_half;
            this.hsv.s = (x - this.ciSV.box.x) / this.ciSV.box.w * 100;
            this.hsv.v = (1 - (y - this.ciSV.box.y) / this.ciSV.box.h) * 100;
            this.updateResult();

            if(onchange !== null) onchange(this);
            cir.redrawTarget(this.#box);
        },

        onmoveSV = event => {
            setSV(event.offsetX - sx, event.offsetY - sy);
        },

        onupSV = event => {
            document.body.removeEventListener('pointermove', onmoveSV);
            document.body.removeEventListener('pointerup', onupSV);
            setSV(event.offsetX - sx, event.offsetY - sy);
        },

        ondownSV = event => {
            sx = event.offsetX - this.cursorSV.box.x;
            sy = event.offsetY - this.cursorSV.box.y;
            onupSV(event);
            document.body.addEventListener("pointermove", onmoveSV);
            document.body.addEventListener("pointerup", onupSV);
        },


        //H
        setH = x => {
            v = this.ciH_scroll.box.x - cursorSV_half;
            if(x < v) x = v;
            else{
                v = this.ciH_scroll.box.mx - cursorSV_half;
                if(x > v) x = v;
            }

            this.cursorH.box.x = x;
            
            x += cursorSV_half;
            this.hsv.h = (x - this.ciH_scroll.box.x) / this.ciH_scroll.box.w * 360;
            this.updateCIH();
            this.updateResult();

            if(onchange !== null) onchange(this);
            cir.redrawTarget(this.#box);
        },

        onmoveH = event => {
            setH(event.offsetX - sx);
        },

        onupH = event => {
            document.body.removeEventListener('pointermove', onmoveH);
            document.body.removeEventListener('pointerup', onupH);
            setH(event.offsetX - sx);
        },

        ondownH = event => {
            sx = event.offsetX - this.cursorH.box.x;
            sy = event.offsetY - this.cursorH.box.y;
            onupH(event);
            document.body.addEventListener("pointermove", onmoveH);
            document.body.addEventListener("pointerup", onupH);
        },


        //A
        setA = x => {
            v = this.ciA_scroll.box.x - cursorSV_half;
            if(x < v) x = v;
            else{
                v = this.ciA_scroll.box.mx - cursorSV_half;
                if(x > v) x = v;
            }

            this.cursorA.box.x = x;
            
            x += cursorSV_half;
            this.alpha = (x - this.ciA_scroll.box.x) / this.ciA_scroll.box.w * 1;
            this.updateResult();

            if(onchange !== null) onchange(this);
            cir.redrawTarget(this.#box);
        },

        onmoveA = event => {
            setA(event.offsetX - sx);
        },

        onupA = event => {
            document.body.removeEventListener('pointermove', onmoveA);
            document.body.removeEventListener('pointerup', onupA);
            setA(event.offsetX - sx);
        },

        ondownA = event => {
            sx = event.offsetX - this.cursorA.box.x;
            sy = event.offsetY - this.cursorA.box.y;
            onupA(event);
            document.body.addEventListener("pointermove", onmoveA);
            document.body.addEventListener("pointerup", onupA);
        }


        cie.add(this.cursorSV, "down", ondownSV);
        cie.add(this.ciSV, "down", ondownSV);

        cie.add(this.cursorH, "down", ondownH);
        cie.add(this.ciH_scroll, "down", ondownH);

        cie.add(this.cursorA, "down", ondownA);
        cie.add(this.ciA_scroll, "down", ondownA);

        return this;
    }

    pos(x, y){
        this.ciH.box.pos(x, y);
        this.ciSV.box.pos(x, y);
        this.updateCursorSV();

        this.bottomBG.pos(this.ciH.x, this.ciH.box.my);
        this.resultBG.pos(this.bottomBG.x+5, this.bottomBG.y+5);
        this.resultColor.pos(this.resultBG.x, this.resultBG.y);

        this.ciH_scroll.pos(this.resultBG.box.mx + 5, this.resultBG.y + 5);
        this.updateCursorH();

        this.ciA.pos(this.ciH_scroll.x, this.ciH_scroll.box.my + 5);
        this.ciA_scroll.pos(this.ciA.x, this.ciA.y);
        this.updateCursorA();

        this.resultText.pos(this.ciA_scroll.x, this.ciA_scroll.box.my + 5);
    }

    visible(v){
        this.ciH.visible = this.ciSV.visible = this.cursorSV.visible = 
        this.bottomBG.visible = this.resultBG.visible = this.resultColor.visible = 
        this.resultText.visible = this.ciH_scroll.visible = this.cursorH.visible = 
        this.ciA.visible = this.ciA_scroll.visible = this.cursorA.visible = v;
    }

    toArray(arr){
        arr.push(this.ciH, this.ciSV, this.cursorSV, this.bottomBG, this.resultBG, this.resultColor, this.resultText, this.ciH_scroll, this.cursorH, this.ciA, this.ciA_scroll, this.cursorA);
    }

    set(r, g, b, a){
        if(typeof r !== "string"){
            ColorTestViewer.emptyColor.set(r, g, b).getHSV(this.hsv);
            this.alpha = a || 1;
        }
        else{
            this.alpha = ColorTestViewer.emptyColor.setFormString(r);
            ColorTestViewer.emptyColor.getHSV(this.hsv);
        }
        return this;
    }

    update(){
        this.updateCIH();
        this.updateResult();

        this.updateCursorSV();
        this.updateCursorH();
        this.updateCursorA();
    }

    updateCursorSV(){
        this.cursorSV.box.x = this.hsv.s / 100 * this.ciSV.box.w + this.ciSV.box.x - this.cursorSV.box.w / 2;
        this.cursorSV.box.y = (1 - this.hsv.v / 100) * this.ciSV.box.h + this.ciSV.box.y - this.cursorSV.box.h / 2;
    }

    updateCursorH(){
        this.cursorH.box.x = this.hsv.h / 360 * this.ciH_scroll.box.w + this.ciH_scroll.box.x - this.cursorH.box.w / 2;
        this.cursorH.box.y = this.ciH_scroll.box.y;
    }

    updateCursorA(){
        this.cursorA.box.x = this.alpha * this.ciA_scroll.box.w + this.ciA_scroll.box.x - this.cursorA.box.w / 2;
        this.cursorA.box.y = this.ciA_scroll.box.y;
    }

    updateCIH(){
        const c = ColorTestViewer.emptyColor.setFormHSV(this.hsv.h, 100, 100);
        this.ciH.fill(`rgb(${c.r},${c.g},${c.b})`);
    }

    updateResult(){
        this.#value.setFormHSV(this.hsv.h, this.hsv.s, this.hsv.v);
        this.resultColor.clear().fill(this.#value.getRGBA(this.alpha));
        this.resultText.clear().text(this.resultColor.fillStyle, ColorTestViewer.textColor);
    }

}


/* IconMenu 图标菜单
parameter:
    data: Array[Object{
        icon: Image,    //默认 null
        text: String,    //默认 "空"
        func: Func,     //默认 null
    }]

demo:
    new CanvasImage().loadImage("./test.png", ci => {
        const iconMenu = new IconMenu([
            {
                icon: ci.image,
                text: "StringStringStringStringString",
            },
            {
                icon: ci.image,
                text: "String",
                func: (cisA, cisB, data) => {
                    //cisA: 0:"✘", 1:"✔", 2:"●" 3:">"; .visible 默认 false;
                    //cisB: 0: 禁用, 1: 选取; .visible 默认 false;
                    cisA.next();
                    cisA.visible = true;
                },
            },
        ]);

        iconMenu.domElement.style = `
            background: #666;
            position: absolute;
            left: 100px;
            top: 100px;
            border-radius: 4px;
        `;

        iconMenu.render().bindEvent();
    });
*/
class IconMenu{

    static iconSize = 16;
    static selectColor = "rgba(85,146,209,0.4)";
    static disableColor = disableColor;
    static getImages(){
        const s = IconMenu.iconSize;
        emptyCIC.size(s, s);

        //0:"✘", 1:"✔", 2:"●" 3:">", 
        return [
            emptyCIC.clear().text("✘", textColor.up).shear(),
            emptyCIC.clear().text("✔", textColor.up).shear(),
            emptyCIC.clear().text("●", textColor.up).shear(),
            emptyCIC.path([1, 1, 1, s-1, s-1, s/2], true).clear().fill(textColor.up).shear(),
        ]
    }

    static getMaxWidth(data){
        const s = IconMenu.iconSize * 2 + padding.x * 2;
        var mx = 0, maxX = 0;
        data.forEach(o => {
            mx = getW(o.text) + s;
            if(maxX < mx) maxX = mx;
        });
        return maxX;
    }

    #box = null;
    #iconSize = 0;
    #paddingX = 0;
    #paddingY = 0;
    #len = 0;

    constructor(data){
        if(UTILS.emptyArray(data)) return;
        this.list = [];

        const mw = IconMenu.getMaxWidth(data), 
        iconSize = IconMenu.iconSize, 
        paddingX = padding.x, 
        paddingY = padding.y;
        
        const icons = IconMenu.getImages();

        initCIC(mw - paddingX * 2, iconSize);

        const mask = [
            emptyCIC.clear().fill(IconMenu.disableColor).shear(),
            emptyCIC.fill(IconMenu.selectColor).shear(),
        ];

        emptyCIC.size(mw, iconSize);
        data.forEach((o, i) => {
            emptyCIC.clear();
            if(CanvasImageRender.isCanvasImage(o.icon)) emptyCIC.context.drawImage(o.icon, 0, 0, iconSize, iconSize);
            if(typeof o.text === "string" && o.text !== "") emptyCIC.text(o.text, textColor.up, 0, iconSize+paddingX);

            const a = new CanvasImage(emptyCIC.shear()),
            b = new CanvasImages(icons),
            c = new CanvasImages(mask);
            
            b.visible = c.visible = false;
            c.cursor = 1;
            this.list.push(a, b, c);
        });

        this.#iconSize = iconSize;
        this.#paddingX = paddingX;
        this.#paddingY = paddingY;
        this.#len = this.list.length / 3;
        this.data = data;
        this.bg = new CanvasImageCustom().size(mw, this.#len * emptyCIC.box.h + paddingY * this.#len + paddingY).rect(4).fill("rgb(127,127,127)");
        this.#box = this.bg.box;
    }

    pos(x, y){
        for(let k = 0, len = this.list.length, i, _y; k < len; k += 3){
            i = k / 3;
            _y = this.#iconSize * i + this.#paddingY * i + this.#paddingY+y;
            this.list[k].pos(this.#paddingX+x, _y);
            this.list[k+1].pos(this.#box.w - this.#iconSize - this.#paddingX+x, _y),
            this.list[k+2].pos(this.#paddingX+x, _y);
        }

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

    toArray(arr){
        arr.push(this.bg);
        this.list.forEach(ci => arr.push(ci));
    }

    bindEvent(cir, cie){
        var pointerId = -1, i = -1, isDown = false, cis = null;

        const _box = this.#box,
        
        eventTarget = {
            get index(){return Infinity;},
            get visible(){return true;},
            get box(){return _box;},
            get rotate(){return null},
        },

        onup_body = () => {
            document.body.removeEventListener("pointerup", onup_body);

            if(cis && cis.visible === true && cis.cursor !== 0){
                cis.visible = false;
                cir.redrawTarget(cis);
                cis = null;
            }
        },

        onup = event => {
            if(isDown && event.pointerId === pointerId && i === Math.floor(event.offsetY/_box.h*this.#len) && this.list[i*3+2].cursor !== 0){
                const item = this.data[i];
                if(UTILS.isObject(item) && typeof item.func === "function") item.func(this.list[i*3+1], cis, item);
            }

            isDown = false;
        },

        ondown = event => {
            onup_body();
            if(event.button !== 0) return;
            i = Math.floor((event.offsetY + cir.box.y - _box.y)/_box.h*this.#len);
            cis = this.list[i*3+2];
            if(cis && cis.visible === false && cis.cursor !== 0){
                cis.cursor = 1;
                cis.visible = true;
                cir.redrawTarget(cis);
                pointerId = event.pointerId;
                isDown = true;
                document.body.addEventListener("pointerup", onup_body);
            }
        }

        cie.add(eventTarget, "down", ondown);
        cie.add(eventTarget, "up", onup);
        return this;
    }

}


/* TreeIconMenu 树结构图标菜单

*/
class TreeIconMenu extends TreeStruct{

    constructor(data){
        
    }

}




/* Carousel 轮播图 (支持pc和mobile端)

*/
class CanvasCarousel extends CanvasImageRender{

    constructor(){
        super();
        
    }

    init(images){
        const len = images.length;
        for(let k = 0; k < len; k++) this.context.drawImage(images[k], k*this.box.w, 0, this.box.w, this.box.h);
        
    }

}




/* CanvasTab 

*/
class CanvasTab{

    constructor(){
        
    }

}


export {
    CanvasUI,
    CanvasUIButton,
    CanvasUIBool,
    IconMenu,
    TreeIconMenu,
    ColorTestViewer,
}

 

API: 

/* ColorTestViewer 颜色调试器
parameter:
    w, 默认 250 
    h, 默认 w*0.618 
    r, 默认 0

attribute:
    hsv: Object{h,s,v};
    alpha: Number;
    只读: value: RGBColor, width, height, x, y: Number;

method:
    visible(v: Bool): undefined;//显示或隐藏所以的ci
    pos(x, y): undefined;         //如果你不希望排版错乱的话用此方法设置它们的位置位置
    toArray(arr): undefined;     //把创建的 CanvasImage push到arr数组 (arr数组一般为某个 CanvasImageRender.list)
    update(): undefined;         //当颜色发送改变时更新: ctv.set("red").update()
    set(r, g, b, a): this;         //第一个参数r可以时字符串样式的颜色(rgb|rgba|十进制|英文)

    bindEvent(cir: CanvasImageRender, cie: CanvasImageEvent, onchange: Func): this;    //

demo:
    const ctv = new ColorTestViewer(),
    cir = new CanvasImageRender({width: ctv.box.w - 5, height: ctv.box.h - 5}),
    cie = new CanvasImageEvent(cir); //启用dom事件
    
    ctv.set("blue").update();
    ctv.toArray(cir.list);
    ctv.bindEvent(cir, cie);
    cir.render();
*/

 

 

main.js:

"use strict";
import { UTILS } from './Utils.js';
import { CanvasImage, CanvasImageRender, CanvasImageEvent, CanvasImageScroll } from './CanvasImageRender.js';
import { IconMenu, ColorTestViewer } from './CanvasUI.js';

document.body.style = `
    width: ${innerWidth}px;
    height: ${innerHeight}px;
    overflow: hidden;
    background: #000;
`;

//CanvasImageRender
const cir = new CanvasImageRender({width: innerWidth, height: innerHeight})
.initEventDispatcher(), //初始化自定义事件
cie = new CanvasImageEvent(cir), //启用dom事件
cis = new CanvasImageScroll(cir, cie, {scrollEventType: "touch"}), //启用滚动条

//随机创建 CanvasImage
ci = new CanvasImage().loadImage("lan.png", cir); //图片加载完后更新一次画布
for(let k = 0, pi2 = Math.PI*2, ca; k < 1000; k++){
    ca = cir.list[k] = new CanvasImage(ci);                     //添加至渲染列表
    ca.pos(UTILS.random(0, 5000), UTILS.random(0, 5000));    //随机位置
    //ca.rotate = new Rotate(0, 0, UTILS.random(0, pi2));         //随机旋转
}

//颜色调试器
const ctv = new ColorTestViewer();
ctv.pos(200, 100);
ctv.toArray(cir.list);
ctv.bindEvent(cir, cie);
ctv.set("blue").update();

//带图标的菜单
new CanvasImage().loadImage("hong.png", ci => {
    const im = new IconMenu([
        {
            icon: ci.image,
            text: "string",
        },
        {
            icon: ci.image,
            text: "stringstringstringstringstring",
        },
        {
            icon: ci.image,
            text: "string",
        },
    ]);

    im.pos(ctv.box.x, ctv.box.my+10);
    im.toArray(cir.list);
    im.bindEvent(cir, cie);
    cir.redraw();
});

//为什么要用 initList() ? 因为for循环中是直接把ca加入到了列表, 没对ca做任何初始化操作;
//如果全用.add() 就不需要在调用 initList(); 但 .add() 方法不适合一次性添加多个 CanvasImage;
cir.initList(); 

 

如果一个canvas只装一个颜色调试器(让canvas的宽高等于调试器的宽高):

"use strict";

import { CanvasImageRender, CanvasImageEvent } from './CanvasImageRender.js';
import { ColorTestViewer } from './CanvasUI.js';

document.body.style = `
    width: ${innerWidth}px;
    height: ${innerHeight}px;
    overflow: hidden;
    background: #000;
`;

const ctv = new ColorTestViewer(),
cir = new CanvasImageRender({width: ctv.box.w - 5, height: ctv.box.h - 5}),
cie = new CanvasImageEvent(cir); //启用dom事件

cir.domElement.style = `
    position: absolute;
    left: 200px;
    top: 100px;
`;

ctv.toArray(cir.list);
ctv.bindEvent(cir, cie, ()=>console.log(1));
cir.render();

 

结果图: