用原生js canvas 播放视频示例

前言:

　　为什么要用canvas渲染视频?

　　个人理解，不喜勿喷!

　　用来测试的视频是我在某个视频网站按F12偷来的(它们并不想用户下载视频),

　　所以用canvas渲染视频增加视频盗取的难度吧!

　　H5的video控件太丑,不可自定义, 所以也可以用canvas创建自定义的视频控件

　　... 

创建 canvas:

　　 //CanvasImageRender
    const cir = new CanvasImageRender({
        width: window.innerWidth,   //canvas 的宽高
        height: window.innerHeight,
    }); console.log(cir);

    //.domElement 是一个 canvas
    cir.domElement.style = `
        position: absolute;
        z-index: 9999;
        background: rgb(127,127,127);
    `;

 

主要代码:

    //这用于搭载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();

    });
    

 

结果图:

 

 

 

 

 

依赖的内裤源码:

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

}



/* AnimateLoop 动画循环

*/
class AnimateLoop{

    #id = NaN;
    #animate = null;

    get running(){
        return !isNaN(this.#id);
    }

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

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

    pause(){
        if(!isNaN(this.#id)){
            cancelAnimationFrame(this.#id);
            this.#id = NaN;
        }
        return this;
    }

    play(onupdate){
        if(typeof onupdate === "function") this.onupdate = onupdate;
        if(this.onupdate !== null && isNaN(this.#id)){
            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);

    }

}

Object.defineProperties(TreeStruct.prototype, {
    
    isTreeStruct: {
        configurable: false,
        enumerable: false,
        writable: false,
        value: true,
    }

});




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

attribute
    x, y: Number;

method:
    set(x, y): this;
    angle(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;
    } */

}

Object.defineProperties(Point.prototype, {

    isPoint: {
        configurable: false,
        enumerable: false,
        writable: false,
        value: true,
    }

});




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

Object.defineProperties(Box.prototype, {

    isBox: {
        configurable: false,
        enumerable: false,
        writable: false,
        value: true,
    },

});




/* Circle 圆形
parameter:
attribute:
    x,y: Number; 中心点
    r: Number; 半径

    //只读
    r2: Number; //返回直径 r*2

method:
    set(x, y, r): this;
    pos(x, y): this;
    copy(circle: Circle): this;
    clone(): Circle;
    distance(x, y): Number;
    equals(circle: Circle): Bool;
    containsPoint(x, y): Bool; 
    intersectsCircle(circle: Circle): Bool;
    intersectsBox(box: Box): Bool;
    setFromBox(box, inner = true): this;

*/
class Circle{

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

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

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

        return this;
    }

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

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

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

        return this;
    }

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

        return this;
    }

    clone(){

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

    }

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

    }

    equals(circle){

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

    }

    containsPoint(x, y){

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

    }

    intersectsCircle(circle){

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

    }

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

}

Object.defineProperties(Circle.prototype, {

    isCircle: {
        configurable: false,
        enumerable: false,
        writable: false,
        value: true,
    }

});




/* Polygon 多边形

parameter: 
    path: Array[x, y];

attribute:

    //只读属性
    path: Array[x, y]; 

method:
    add(x, y): this;             //x,y添加至path;
    containsPoint(x, y): Bool;    //x,y是否在多边形的内部(注意: 在路径上也返回 true)
    
*/
class Polygon{

    #position = null;
    #path2D = null;

    get path(){
        
        return this.#position;

    }

    constructor(path = []){
        this.#position = path;

        this.#path2D = new Path2D();
        
        var len = path.length;
        if(len >= 2){
            if(len % 2 !== 0){
                len -= 1;
                path.splice(len, 1);
            }

            const con = this.#path2D;
            con.moveTo(path[0], path[1]);
            for(let k = 2; k < len; k+=2) con.lineTo(path[k], path[k+1]);
            
        }

    }

    add(x, y){
        this.#position.push(x, y);
        this.#path2D.lineTo(x, y);
        return this;
    }

    containsPoint(x, y){
        
        return UTILS.emptyContext.isPointInPath(this.#path2D, x, y);

    }

    isInPolygon(checkPoint, polygonPoints) {
        var counter = 0;
        var i;
        var xinters;
        var p1, p2;
        var pointCount = polygonPoints.length;
        p1 = polygonPoints[0];
        for (i = 1; i <= pointCount; i++) {
            p2 = polygonPoints[i % pointCount];
            if (
                checkPoint[0] > Math.min(p1[0], p2[0]) &&
                checkPoint[0] <= Math.max(p1[0], p2[0])
            ) {
                if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
                    if (p1[0] != p2[0]) {
                        xinters =
                            (checkPoint[0] - p1[0]) *
                                (p2[1] - p1[1]) /
                                (p2[0] - p1[0]) +
                            p1[1];
                        if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
                            counter++;
                        }
                    }
                }
            }
            p1 = p2;
        }
        if (counter % 2 == 0) {
            return false;
        } else {
            return true;
        }
    }

    containsPolygon(polygon){
        const path = polygon.path, len = path.length;
        for(let k = 0; k < len; k += 2){
            if(this.containsPoint(path[k], path[k+1]) === false) return false;
        }

        return true;
    }

    toPoints(){
        const path = this.path, len = path.length, result = [];
        
        for(let k = 0; k < len; k += 2) result.push(new Point(path[k], path[k+1]));

        return result;
    }

    toLines(){
        const path = this.path, len = path.length, result = [];
        
        for(let k = 0, x = NaN, y; k < len; k += 2){

            if(isNaN(x)){
                x = path[k];
                y = path[k+1];
                continue;
            }

            const line = new Line(x, y, path[k], path[k+1]);
            
            x = line.x1;
            y = line.y1;

            result.push(line);

        }

        return result;
    }

    merge(polygon){

        const linesA = this.toLines(), linesB = polygon.toLines(), nodes = [], newLines = [],
        
        pointA = new Point(), pointB = new Point(),

        forEachNodes = (pathA, pathB, funcA = null, funcB = null) => {
            for(let k = 0, lenA = pathA.length, lenB = pathB.length; k < lenA; k++){
                if(funcA !== null) funcA(pathA[k]);

                for(let i = 0; i < lenB; i++){
                    if(funcB !== null) funcB(pathB[i], pathA[k]);
                }
    
            }
        }

        if(this.containsPolygon(polygon)){console.log('this -> polygon');
            forEachNodes(linesA, linesB, lineA => newLines.push(lineA), (lineB, lineA) => {
                if(lineA.intersectPoint(lineB, pointA) === pointA) newLines.push(pointA.clone());
            });

            return newLines;
        }

        //收集所有的交点 (保存至 line)
        forEachNodes(linesA, linesB, lineA => lineA.nodes = [], (lineB, lineA) => {
            if(lineB.nodes === undefined) lineB.nodes = [];
            if(lineA.intersectPoint(lineB, pointA) === pointA){
                const node = {
                    lineA: lineA, 
                    lineB: lineB, 
                    point: pointA.clone(),
                    disA: pointA.distanceCompare(pointB.set(lineA.x, lineA.y)),
                    disB: pointA.distanceCompare(pointB.set(lineB.x, lineB.y)),
                }
                lineA.nodes.push(node);
                lineB.nodes.push(node);
                nodes.push(node);
            }
        });

        //交点以原点为目标排序
        for(let k = 0, sotr = function (a,b){return a.disA - b.disA;}, countA = linesA.length; k < countA; k++) linesA[k].nodes.sort(sotr);
        for(let k = 0, sotr = function (a,b){return a.disB - b.disB;}, countB = linesB.length; k < countB; k++) linesB[k].nodes.sort(sotr);

        var _loopTypeA, _loopTypeB;
        const result_loop = {
            lines: null,
            loopType: '',
            line: null,
            count: 0,
            indexed: 0,
        },
        
        //遍历某条线
        loop = (lines, index, loopType) => {
            const length = lines.length, indexed = lines.length, model = lines === linesA ? polygon : this;
        
            var line, i = 1;
            while(true){
                if(loopType === 'next') index = index === length - 1 ? 0 : index + 1;
                else if(loopType === 'back') index = index === 0 ? length - 1 : index - 1;
                line = lines[index];

                result_loop.count = line.nodes.length;
                if(result_loop.count !== 0){
                    result_loop.lines = lines;
                    result_loop.loopType = loopType;
                    result_loop.line = line;
                    result_loop.indexed = index;
                    if(loopType === 'next') addLine(line, model);

                    return result_loop;
                }
                
                addLine(line, model);
                if(indexed === i++) break;

            }
            
        },

        //更新或创建交点的索引
        setNodeIndex = (lines, index, loopType) => {
            const line = lines[index], count = line.nodes.length;
            if(loopType === undefined) loopType = lines === linesA ? _loopTypeA : _loopTypeB;

            if(loopType === undefined) return;
            
            if(line.nodeIndex === undefined){
                line.nodeIndex = loopType === 'next' ? 0 : count - 1;
                line.nodeState = count === 1 ? 'end' : 'start';
            
            }

            else{
                if(line.nodeState === 'end' || line.nodeState === ''){
                    line.nodeState = '';
                    return;
                }

                if(loopType === 'next'){
                    line.nodeIndex += 1;

                    if(line.nodeIndex === count - 1) line.nodeState = 'end';
                    else line.nodeState = 'run';
                }

                else if(loopType === 'back'){
                    line.nodeIndex -= 1;

                    if(line.nodeIndex === 0) line.nodeState = 'end';
                    else line.nodeState = 'run';
                }

            }

        },

        //只有在跳线的时候才执行此方法, 如果跳线的话: 某条线上的交点必然在两端;
        getLoopType = (lines, index, nodePoint) => {
            const line = lines[index], lineNext = lines[index === lines.length - 1 ? 0 : index + 1],

            model = lines === linesA ? polygon : this,
            isLineBack = newLines.includes(line) === false && model.containsPoint(line.x, line.y) === false,
            isLineNext = newLines.includes(lineNext) === false && model.containsPoint(lineNext.x, lineNext.y) === false;
            
            if(isLineBack && isLineNext){
                const len = line.nodes.length;
                if(len >= 2){
                    if(line.nodes[len - 1].point.equals(nodePoint)) return 'next';
                    else if(line.nodes[0].point.equals(nodePoint)) return 'back';
                }
                
                else console.warn('路径复杂', line);
                
            }

            else if(isLineNext){
                return 'next';
            }

            else if(isLineBack){
                return 'back';
            }

            return '';
        },

        //添加线至新的形状数组
        addLine = (line, model) => {
            //if(newLines.includes(line) === false && model.containsPoint(line.x, line.y) === false) newLines.push(line);
            if(line.nodes.length === 0) newLines.push(line);
            else if(model.containsPoint(line.x, line.y) === false) newLines.push(line);
            
        },

        //处理拥有交点的线
        computeNodes = v => {
            if(v === undefined || v.count === 0) return;
            
            setNodeIndex(v.lines, v.indexed, v.loopType);
        
            //添加交点
            const node = v.line.nodes[v.line.nodeIndex];
            if(newLines.includes(node.point) === false) newLines.push(node.point);
            else return;

            var lines = v.lines === linesA ? linesB : linesA, 
            line = lines === linesA ? node.lineA : node.lineB, 
            index = lines.indexOf(line);

            setNodeIndex(lines, index);
        
            //选择交点状态
            var nodeState = line.nodeState !== undefined ? line.nodeState : v.line.nodeState;
            if((v.count <= 2 && line.nodes.length > 2) || (v.count > 2 && line.nodes.length <= 2)){
                if(line.nodeState === 'start'){
                    const backLine = v.loopType === 'next' ? v.lines[v.indexed === 0 ? v.lines.length-1 : v.indexed-1] : v.lines[v.indexed === v.lines.length-1 ? 0 : v.indexed+1];
                    
                    if(newLines.includes(backLine) && backLine.nodes.length === 0){
                        nodeState = 'run';
                    }

                }
                else if(line.nodeState === 'end'){
                    const nextLine = v.loopType === 'next' ? v.lines[v.indexed === v.lines.length-1 ? 0 : v.indexed+1] : v.lines[v.indexed === 0 ? v.lines.length-1 : v.indexed-1];
                    const model = v.lines === linesA ? polygon : this;
                    if(model.containsPoint(nextLine.x, nextLine.y) === false && nextLine.nodes.length === 0){
                        nodeState = 'run';
                    }
                    
                }
            }

            switch(nodeState){

                //不跳线
                case 'run': 
                    if(v.loopType === 'back') addLine(v.line, v.lines === linesA ? polygon : this);
                    return computeNodes(loop(v.lines, v.indexed, v.loopType));

                //跳线
                case 'start': 
                case 'end': 
                    const loopType = getLoopType(lines, index, node.point);
                    if(loopType !== ''){
                        if(lines === linesA) _loopTypeA = loopType;
                        else _loopTypeB = loopType;
                        if(loopType === 'back') addLine(line, v.lines === linesA ? this : polygon);
                        return computeNodes(loop(lines, index, loopType));
                    }
                    break;

            }

        }
        
        //获取介入点
        var startLine = null;
        for(let k = 0, len = nodes.length, node; k < len; k++){
            node = nodes[k];
            if(node.lineA.nodes.length !== 0){
                startLine = node.lineA;
                if(node.lineA.nodes.length === 1 && node.lineB.nodes.length > 1){
                    startLine = node.lineB.nodes[0].lineB;
                    result_loop.lines = linesB;
                    result_loop.loopType = _loopTypeB = 'next';
                }
                else{
                    result_loop.lines = linesA;
                    result_loop.loopType = _loopTypeA = 'next';
                }
                result_loop.line = startLine;
                result_loop.count = startLine.nodes.length;
                result_loop.indexed = result_loop.lines.indexOf(startLine);
                break;
            }
        }

        if(startLine === null){
            console.warn('Polygon: 找不到介入点, 终止了合并');
            return newLines;
        }

        computeNodes(result_loop);
    
        return newLines;
    }

}




/* 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){
        alpha = typeof alpha === 'number' ? alpha : 1;
        return 'rgba('+this.r+','+this.g+','+this.b+','+alpha+')';
    }

    stringToColor(str){
        var _color = "";
        for(let k = 0, len = str.length; k < len; k++){
            if(str[k] === " ") continue;
            _color += str[k];
        }
        
        if(_color[0] === "#" || (_color[0] === "r" && _color[1] === "g" && _color[2] === "b")) return _color;

        return ColorRefTable[_color] || "";
    }

}

Object.defineProperties(RGBColor.prototype, {

    isRGBColor: {
        configurable: false,
        enumerable: false,
        writable: false,
        value: true,
    }

});




/* Timer 定时器 

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

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

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

demo:
    //每 3000 毫秒 打印一次 timer.number
    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 = []){
        const _dots = SeekPath._dots;
        result.length = 0;
        result[0] = this.#map[ix][iy];
        count += 1;
        
        while(result.length < count){
            for(let k = 0, i, n, d, len = result.length; k < len; k++){
                n = result[k];
                this.getDots(n.x, n.y, this.angle, _dots);
                for(i = 0; i < this.angle; i += 2){
                    d = this.#map[_dots[i]][_dots[i+1]];
                    if(d.is === 1 && this.mapRange.containsPoint(d.x, d.y) && !result.includes(d)){
                        if(Math.abs(n.x - d.x) + Math.abs(n.y - d.y) === 2 && this._check(n, d)){
                            result.push(d);
                        }
                    }
                }
            }
        }
    
        result.splice(0, 1);
        return result;
    }

    getLinePoints(now, next, count, result = []){
        if(count === 1) return result[0] = next;
        if(count % 2 === 0) count += 1;

        const len = Math.floor(count / 2), 
        nowPoint = UTILS.emptyPoint, 
        angle90 = UTILS.toAngle(90);

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

        nowPoint.set(now.x, now.y).rotate(next, angle90); //now 以 next 为原点顺时针旋转 90 度
        var disX = nowPoint.x - next.x, 
        disY = nowPoint.y - next.y;
        
        for(i = 0; i < len; i++){
            ix = disX + disX * i + next.x;
            iy = disY + disY * i + next.y;

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

        result[len] = next;
        nn = next

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

        for(i = 0; i < len; i++){
            ix = disX + disX * i + next.x;
            iy = disY + disY * i + next.y;

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

        return result;
    }

    getDots(x, y, a, r = []){ //获取周围的点 x,y, a:8|16, r:存放结果数组
        r.length = 0;
        const x_1 = x-1, x1 = x+1, y_1 = y-1, y1 = y+1;
        if(a === 16) r.push(x_1, y_1, x, y_1, x1, y_1, x_1, y, x1, y, x_1, y1, x, y1, x1, y1);
        else r.push(x, y_1, x, y1, x_1, y, x1, y);
    }

    _updateID(){ //更新标记
        this._id++;
        this._openID = "o_"+this._id;
        this._closeID = "c_"+this._id;
    }

    _check(dotA, dotB){ //检测 a 是否能到 b
        //获取 dotB 周围的4个点 并 遍历这4个点
        this.getDots(dotB.x, dotB.y, 8, SeekPath.dots4);
        for(let k = 0, x, y; k < 8; k += 2){
            x = SeekPath.dots4[k]; 
            y = SeekPath.dots4[k+1];
            if(this.mapRange.containsPoint(x, y) === false) continue;

            //找出 dotA 与 dotB 相交的两个点:
            if(Math.abs(dotA.x - x) + Math.abs(dotA.y - y) === 1){
                //如果其中一个交点是不可走的则 dotA 到 dotB 不可走, 既返回 false
                if(this.#map[x][y].is === 0) return false;
            }

        }

        return true;
    }

    run(x, y, x1, y1, path = this.#path){
        path.length = 0;
        if(this.#map === null || this.mapRange.containsPoint(x, y) === false) return path;
        
        var _n = this.#map[x][y];
        if(_n.is === 0) return path;

        const _sort = SeekPath._sort,
        _open = SeekPath._open,
        _dots = SeekPath._dots, 
        time = Date.now();

        //var isDot = true, 
        var suc = _n, k, mhd, g, h, f, _d;

        _n.g = 0;
        _n.h = _n.h = Math.abs(x1 - x) * 10 + Math.abs(y1 - y) * 10; 
        _n.f = _n.h;
        _n.p = null;
        this._updateID();
        _n.id = this._openID;
        _open.push(_n);
        
        while(_open.length !== 0){
            if(Date.now() - time > this.timeout) break;

            _open.sort(_sort);
            _n = _open.shift();
            if(_n.x === x1 && _n.y === y1){
                suc = _n;
                break;
            }
            
            if(suc.h > _n.h) suc = _n;
            _n.id = this._closeID;
            this.getDots(_n.x, _n.y, this.angle, _dots);
            
            for(k = 0; k < this.angle; k += 2){
                
                _d = this.#map[_dots[k]][_dots[k+1]];
                if(_d.id === this._closeID || _d.is === 0 || this.mapRange.containsPoint(_d.x, _d.y) === false) continue;

                mhd = Math["abs"](_n["x"] - _d.x) + Math["abs"](_n["y"] - _d.y);
                g = _n["g"] + (mhd === 1 ? 10 : 14);
                h = Math["abs"](x1 - _d.x) * 10 + Math["abs"](y1 - _d.y) * 10;
                f = g + h;
            
                if(_d.id !== this._openID){
                    //如果是斜角和8方向:
                    if(mhd !== 1 && this.angle === 16){
                        if(this._check(_n, _d)){
                            _d.g = g;
                            _d.h = h;
                            _d.f = f;
                            _d.p = _n;
                            _d.id = this._openID;
                            _open.push(_d);
                        }
                    }else{
                        _d.g = g;
                        _d.h = h;
                        _d.f = f;
                        _d.p = _n;
                        _d.id = this._openID;
                        _open.push(_d);
                    }
                }

                else if(g < _d.g){
                    _d.g = g;
                    _d.f = g + _d.h;
                    _d.p = _n;
                }
    
            }
        }

        this.#success = suc === _n;

        while(suc !== null){
            path.unshift(suc);
            //path.unshift(this.toScene("x", suc["x"]), suc["height"], this.toScene("y", suc["y"]));
            suc = suc["p"];
        }

        _open.length = _dots.length = 0;
        
        return path;
    }

}




/* RunningList
    如果触发过程中删除(回调函数中删除正在遍历的数组), 不仅 len 没有变(遍历前定义的len没有变, 真实的len随之减少), 而且还会漏掉一个key;

*/
class RunningList{

    /* static getProxy(runName){

        return new Proxy(new RunningList(runName), {

            get(tar, key){
                
            },

            set(tar, key, val){
                
            }
            
        });

    } */

    constructor(runName = 'update'){
        this._running = false;
        this._list = [];
        this._delList = [];
        this._runName = runName;
    }

    get length(){

        return this._list.length;

    }

    add(v){

        if(!this._list.includes(v)) this._list.push(v);

    }

    clear(){
        this._list.length = 0;
        this._delList.length = 0;
    }

    push(...v){

        v.forEach(_v => this._list.push(_v));

    }

    splice(v){
        if(this._running === true){
            if(!this._delList.includes(v)) this._delList.push(v);
        }

        else{
            const i = this._list.indexOf(v);
            if(i !== -1) this._list.splice(i, 1);
        }

    }

    update(){

        var k, len = this._list.length;

        this._running = true;
        if(this._runName !== ''){
            for(k = 0; k < len; k++) this._list[k][this._runName]();
        }else{
            for(k = 0; k < len; k++) this._list[k]();
        }
        this._running = false;

        var i;
        len = this._delList.length;
        for(k = 0; k < len; k++){
            //this.splice(this._delList[k]);
            i = this._list.indexOf(this._delList[k]);
            if(i !== -1) this._list.splice(i, 1);
        }
        this._delList.length = 0;
        
    }

}




/* TweenValue (从 原点 以规定的时间到达  终点)

parameter: origin, end, time, onUpdate, onEnd;

attribute:
    origin: Object; //原点(起点)
    end: Object; //终点
    time: Number; //origin 到 end 花费的时间
    onUpdate: Function; //更新回调; 一个回调参数 origin; 默认null;
    onEnd: Function; //结束回调; 没有回调参数; 默认null; (如果返回的是"restart"将不从队列删除, 你可以在onEnd中更新.end不间断的继续补间)

method:
    reset(origin, end: Object): undefined; //更换 .origin, .end; 它会清除其它对象的缓存属性
    reverse(): undefined; //this.end 复制 this.origin 的原始值
    update(): undefined; //Tween 通过此方法统一更新 TweenValue

demo: 
    //init Tween:
    const tween = new Tween(),
    animate = function (){
        requestAnimationFrame(animate);
        tween.update();
    }

    //init TweenValue:
    const v1 = new Tween.Value({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v));
    
    animate();
    tween.start(v1);

*/
class TweenValue{

    constructor(origin = {}, end = {}, time = 500, onUpdate = null, onEnd = null, onStart = null){
        this.origin = origin;
        this.end = end;
        this.time = time;

        this.onUpdate = onUpdate;
        this.onEnd = onEnd;
        this.onStart = onStart;
        
        //以下属性不能直接设置
        this._r = null;
        this._t = 0;
        this._v = Object.create(null);

    }

    _start(){
        var v = "";
        for(v in this.origin) this._v[v] = this.origin[v];

        this._t = Date.now();
        //this.update();

    }

    reset(origin, end){
        this.origin = origin;
        this.end = end;
        this._v = Object.create(null);

    }

    reverse(){
        var n = "";
        for(n in this.origin) this.end[n] = this._v[n];

    }

    update(){

        if(this["_r"] !== null){

            var ted = Date["now"]() - this["_t"];

            if(ted >= this["time"]){

                for(ted in this["origin"]) this["origin"][ted] = this["end"][ted];

                if(this["onEnd"] !== null){

                    if(this["onEnd"](this) === "restart"){
                        if(this["onUpdate"] !== null) this["onUpdate"](this["origin"]);
                        this["_start"]();
                    }

                    else this["_r"]["stop"](this);
                    
                }

                else this["_r"]["stop"](this);

            }

            else{
                ted = ted / this["time"];
                let n = "";
                for(n in this["origin"]) this["origin"][n] = ted * (this["end"][n] - this["_v"][n]) + this["_v"][n];
                if(this["onUpdate"] !== null) this["onUpdate"](this["origin"]);
            }

        }

    }

}

Object.defineProperties(TweenValue.prototype, {

    isTweenValue: {
        configurable: false,
        enumerable: false,
        writable: false,
        value: true,
    }

});




/* TweenAlone (相对于 TweenValue 此类可以独立补间, 不需要 Tween)

demo:
    const v1 = new TweenAlone({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v)),
    animate = function (){
        requestAnimationFrame(animate);
        v1.update();
    }

    animate();
    v1.start();

*/
class TweenAlone extends TweenValue{

    constructor(origin, end, time, onUpdate, onEnd, onStart){
        super(origin, end, time, onUpdate, onEnd, onStart);
        
    }

    start(){
        if(this.onStart !== null) this.onStart();
        this._r = this;
        this._start();

    }

    stop(){
        this._r = null;
        
    }

}





/* Tween 动画补间 (TweenValue 的root, 可以管理多个TweenValue)

parameter:
attribute:
method:
    start(value: TweenValue): undefined;
    stop(value: TweenValue): undefined;

static:
    Value: TweenValue;

demo:
    //init Tween:
    const tween = new Tween(),
    animate = function (){
        requestAnimationFrame(animate);
        tween.update();
    }

    //init TweenValue:
    const v2 = new Tween.Value({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v), v => {
        v2.reverse(); //v2.end 复制起始值
        return "restart"; //返回"restart"表示不删除队列, 需要继续补间
    });
    
    animate();
    tween.start(v2);

*/
class Tween extends RunningList{

    static Value = TweenValue;

    constructor(){
        super();

    }

    start(value){
        if(value.onStart !== null) value.onStart();
        if(value._r === null) this.push(value);
        value._r = this;
        value._start(this);

    }

    stop(value){
        if(value._r !== null) this.splice(value);
        value._r = null;
        
    }

}




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

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

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

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

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

    }, 1000, Infinity);

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

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

*/
class TweenTarget{

    #distance = 1;
    #distancePow2 = 1;
    #axis = {};

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

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

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

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

        }

        len = Math.sqrt(len);

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

        }
    }

    update(){
        var n, len = 0;

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

        if(len > this.#distancePow2){

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

        }

        else{

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

}




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

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

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

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

    eventDispatcher.trigger("test");

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

    }

    clearEvents(eventName){ 

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

        else this._eventsList = {}

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

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

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

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

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

}




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

 

"use strict";

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


/* 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, maxSize){
        this._running = "";
        this._delList = [];
        this.initEvent(domElement, box, maxSize);
        CanvasImageEvent.bind(this);
    }

    initEvent(domElement, box, maxSize = null){
        this.disposeEvent();

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

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

        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;

    }

}




/* CanvasImageRender (渲染 CanvasImage)
parameter: 
    option = {
        canvas             //默认 新的canvas
        width, height     //默认 1
        className, id    //默认 ""

        //一下属性 scroll 为 true 才有效
        scroll             //是否启用滚动轴; 默认 false
        scrollSize        //滚动轴的宽或高; 默认 6; (如果想隐藏滚动条最好用 scrollVisible, 而不是把此属性设为0)
        scrollVisible    //滚动轴的显示类型; 可能值 "auto" || "visible" || 默认"";

        scrollEventType    //可能的值: 默认"", "default", "touch";
        inertia            //是否启用移动端滚动轴的惯性; 默认 false
        inertiaLife        //移动端滚动轴惯性生命(阻力强度); 0 - 1; 默认 0.04;
    }

attribute:
method:

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);
    }
    
demo:
    //CanvasImageRender
    const cir = new CanvasImageRender({
        width: WORLD.width, 
        height: WORLD.height,

        //一下属性 scroll 为 true 才有效
        scroll: true,             //是否启用滚动轴; 默认 false
        scrollSize: 10,        //滚动轴的宽或高; 默认 6;
        scrollVisible: "auto",    //滚动轴的显示类型; 可能值 默认"auto" || "visible" || ""; (scroll视图不影响scroll的运行,所以在移动端可以把视图干掉既 scrollVisible: "")

        scrollEventType: "pc",    //可能的值: 默认 disable 禁用, pc, mobile;
        //inertia: true,            //移动端滚动轴是否启用惯性; 默认 false
        //inertiaLife: 0.04,        //移动端滚动轴惯性生命(阻力强度); 0 - 1; 默认 0.04;
    });
    cir.domElement.style = `
        position: absolute;
        z-index: 9999;
        background: rgb(127,127,127);
    `;

    const ciA = cir.add(new CanvasImage()).pos(59, 59).load("view/examples/img/test.png", cir),
    pi2 = Math.PI*2;

    for(let k = 0, ca; k < 1000000; k++){
        ca = new CanvasImage(ciA);
        cir.list.push(ca);
        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 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(0,0,0,0.6)",
        strokeStyle: "#ffffff",
    }

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

    }

    #canvasImageEvent = new CanvasImageEvent();
    #eventDispatcher = new EventDispatcher();
    #box = new Box();
    #length = 0;
    get box(){return this.#box;}
    get length(){return this.#length;}
    
    #maxSize = null;
    get maxSize(){return this.#maxSize;}

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

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

            x: {
                get: () => {return _x;},
                set: v => {
                    if(v < 0 || this.#maxSize === null) v = 0;
                    else if(v + this.#box.w > this.#maxSize.x) v = this.#maxSize.x - this.#box.w;
                    _x = v;
                }
            },

            y: {
                get: () => {return _y;},
                set: v => {
                    if(v < 0 || this.#maxSize === null) v = 0;
                    else if(v + this.#box.h > this.#maxSize.y) v = this.#maxSize.y - this.#box.h;
                    _y = v;
                }
            },

        });

        //event
        this.#canvasImageEvent.initEvent(this);
        const eventParam = {target: this}, 
        eventParam1 = {target: this, value: null}
        this.#eventDispatcher
        .customEvents("pos", eventParam)
        .customEvents("initList", eventParam)
        .customEvents("size", eventParam)
        .customEvents("add", eventParam1)
        .customEvents("remove", eventParam1);

        //scroll
        if(option.scroll === true){
            this.#maxSize = new Point();
            this.scrollSize = UTILS.isNumber(option.scrollSize) ? option.scrollSize : 6;

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

                default: 
                this.scrollVisible = "";
                break;
            }
    
            switch(option.scrollEventType){
                case "default": 
                this._createScrollEventPC();
                break;

                case "touch": 
                this._createScrollEventMobile(option.inertia, option.inertiaLife);
                break;

                default: 
                break;
            }
        }

        this.size(option.width, option.height);
    }

    addEvent(ca, eventName, callback){
        if(ca) this.#canvasImageEvent.add(ca, eventName, callback);
        else this.#eventDispatcher.register(eventName, callback);
    }

    removeEvent(ca, eventName, callback){
        if(ca) this.#canvasImageEvent.remove(ca, eventName, callback);
        else this.#eventDispatcher.deleteEvent(eventName, callback);
    }

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

    pos(x = 0, y = 0){
        this.domElement.style.left = x + "px";
        this.domElement.style.top = y + "px";
        this.#eventDispatcher.trigger("pos");
        return this;
    }

    size(w = 1, h = 1){
        this.domElement.width = w;
        this.domElement.height = h;
        CanvasImageRender.setDefaultStyles(this.context);
        this.box.size(w, h);
        this.#eventDispatcher.trigger("size");
        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.#maxSize !== null) this._bindScroll(ca);
            this.#length++;
            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.#maxSize !== null) this._unbindScroll(ca);
            this.#length--;
            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;
        this.#length = this.list.length;

        for(let k = i; k < this.#length; k++) this.list[k].index = k;

        if(this.#maxSize !== null){
            this._resetMaxSizeX();
            this._resetMaxSizeY();
        }
        
        this.#eventDispatcher.trigger("initList");
        return this;
    }

    clear(){

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

    }

    draw(){
        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.#maxSize !== null && this.scrollVisible !== "") this._drawScroll();
    }

    clearTarget(ca){
        this["_computeOverlap"](ca);
        ca["overlap"]["draw"] = false;
        this["_drawTarget"](ca);
    }

    drawTarget(ca){
        this["_computeOverlap"](ca);
        this["_drawTarget"](ca);
    }

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


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

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

            if(box["intersectsBox"](tar["box"]) === true){
                if(tar["overlap"]["draw"] !== true) tar["overlap"]["draw"] = 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"]["draw"] !== true) tar["overlap"]["draw"] = 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"]["draw"] !== false) tar["overlap"]["draw"] = 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(ca){
        const len = this["list"]["length"];
        this["context"]["clearRect"](ca["overlap"]["box"]["x"], ca["overlap"]["box"]["y"], ca["overlap"]["box"]["w"], ca["overlap"]["box"]["h"]);

        for(let k = 0; k < len; k++){
            ca = this["list"][k];
            if(ca["overlap"]["draw"] === true) this._draw(ca);
        }

        if(this.#maxSize !== null && this.scrollVisible !== "") this._drawScroll();
    }

    //关于scroll
    _drawScroll(){
        if(this.scrollVisible === "visible" || (this.scrollVisible === "auto" && this.#maxSize.x > this.#box.w)){
            this.context.fillRect(this._cursorX(), this.#box.h - this.scrollSize, this.#maxSize.x <= this.#box.w ? this.#box.w : this.#box.w / this.#maxSize.x * this.#box.w, this.scrollSize);
        }

        if(this.scrollVisible === "visible" || (this.scrollVisible === "auto" && this.#maxSize.y > this.#box.h)){
            this.context.fillRect(this.#box.w - this.scrollSize, this._cursorY(), this.scrollSize, this.#maxSize.y <= this.#box.h ? this.#box.h : this.#box.h / this.#maxSize.y * this.#box.h);
        }
    }

    _createScrollEventPC(){
        var dPos = -1;

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

        setLeft = (event, left) => {
            this.#box.x = left / this.box.w * this.#maxSize.x;
            this.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);

            this.domElement.removeEventListener('pointermove', onMoveTop);
            this.domElement.removeEventListener('pointerup', onUpTop);

            if(event !== null) onMoveTop(event);
        },

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

            this.domElement.removeEventListener('pointermove', onMoveLeft);
            this.domElement.removeEventListener('pointerup', onUpLeft);

            if(event !== null) onMoveLeft(event);
        },

        scope = this, _box = this.#box,

        //伪 CanvasImage, 是 CanvasImageEvent 使用的必须属性
        boxX = new Box(),
        eventTargetX = {
            get index(){return scope.length+1;},
            get visible(){return true;},
            get box(){return boxX},
            get rotate(){return null},
        },
        
        boxY = new Box(),
        eventTargetY = {
            get index(){return scope.length+2;},
            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
        this.#canvasImageEvent.add(eventTargetX, "down", event => {
            dPos = event.offsetX - this._cursorX();
            
            onUpLeft(null);

            document.body.addEventListener("pointermove", onMoveLeft);
            document.body.addEventListener("pointerup", onUpLeft);

            this.domElement.addEventListener("pointermove", onMoveLeft);
            this.domElement.addEventListener("pointerup", onUpLeft);
        });

        this.#canvasImageEvent.add(eventTargetY, "down", event => {
            dPos = event.offsetY - this._cursorY();

            onUpTop(null);

            document.body.addEventListener("pointermove", onMoveTop);
            document.body.addEventListener("pointerup", onUpTop);

            this.domElement.addEventListener("pointermove", onMoveTop);
            this.domElement.addEventListener("pointerup", onUpTop);
        });

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

    }

    _createScrollEventMobile(inertia, inertiaLife){
        var px, py, dPos = 0, sPos = new Point(), step = 1, aniamteRun = false, stepA = "", stepB = "";

        if(inertia === true){
            inertiaLife = 1 - ((UTILS.isNumber(inertiaLife) && inertiaLife >= 0 && inertiaLife <= 1) ? inertiaLife : 0.04);
            var animate = new AnimateLoop(null), sTime = 0,
        
            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;
                }
                
                animate.play(() => {
                    speed *= inertiaLife;
                    setTop(event, this.#box.y + step * 20 * speed);
                    if(Math.abs(speed) < 0.001 || this.#box.y <= 0 || this.#box.my >= this.#maxSize.y) animate.pause();
                });
            },

            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;
                }
                animate.play(() => {
                    speed *= inertiaLife;
                    setLeft(event, this.#box.x + step * 20 * speed);
                    if(Math.abs(speed) < 0.001 || this.#box.x <= 0 || this.#box.mx >= this.#maxSize.x) animate.pause();
                });
            }
        }

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

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

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

        onUpTop = event => {
            this.domElement.removeEventListener('pointermove', onMove);

            document.body.removeEventListener('pointermove', onMoveTop);
            document.body.removeEventListener('pointerup', onUpTop);

            this.domElement.removeEventListener('pointermove', onMoveTop);
            this.domElement.removeEventListener('pointerup', onUpTop);

            if(event !== null){
                onMoveTop(event);
                if(inertia === true) inertiaTop(event, (this.#box.y - sPos.y) / (Date.now() - sTime));
            }
        },

        onUpLeft = event => {
            this.domElement.removeEventListener('pointermove', onMove);

            document.body.removeEventListener('pointermove', onMoveLeft);
            document.body.removeEventListener('pointerup', onUpLeft);

            this.domElement.removeEventListener('pointermove', onMoveLeft);
            this.domElement.removeEventListener('pointerup', onUpLeft);

            if(event !== null){
                onMoveLeft(event);
                if(inertia === true) inertiaLeft(event, (this.#box.x - sPos.x) / (Date.now() - sTime));
            }
        },

        _box = this.#box,

        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 => {
            this.domElement.removeEventListener("pointerup", onUp);
            this.domElement.removeEventListener('pointermove', onMove);
        },

        onMove = event => {
            dPos++; if(dPos < 10) 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 > this.#box.h){
                    dPos = py + sPos.y;
                    document.body.addEventListener("pointermove", onMoveTop);
                    document.body.addEventListener("pointerup", onUpTop);
                }
            }
            else{ //x轴
                if(this.#maxSize.x > this.#box.w){
                    dPos = px + sPos.x;
                    document.body.addEventListener("pointermove", onMoveLeft);
                    document.body.addEventListener("pointerup", onUpLeft);
                }
            }
        }
    
        this.#canvasImageEvent.add(eventTarget, "down", event => {
            px = event.offsetX;
            py = event.offsetY;
            dPos = 0;
            sPos.set(this.#box.x, this.#box.y);
            sTime = Date.now();

            if(inertia === true){
                aniamteRun = animate.running;
                animate.pause();
            }

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

    _bindScroll(ca){
        ca.__bindObj.writeBoxX = (nm, om) => {
            if(nm > this.#maxSize.x) this.#maxSize.x = nm;
            else if(nm < this.#maxSize.x){
                if(om >= this.#maxSize.x) this._resetMaxSizeX();
            }
        };

        ca.__bindObj.writeBoxY = (nm, om) => {
            if(nm > this.#maxSize.y) this.#maxSize.y = nm;
            else if(nm < this.#maxSize.y){
                if(om >= this.#maxSize.y) this._resetMaxSizeY();
            }
        };

        ca.__bindObj.writeBoxX(ca.box.mx);
        ca.__bindObj.writeBoxY(ca.box.my);
    }

    _unbindScroll(ca){
        ca.__bindObj.writeBoxX = null;
        ca.__bindObj.writeBoxY = null;
        if(ca.box.mx >= this.#maxSize.x) this._resetMaxSizeX();
        if(ca.box.my >= this.#maxSize.y) this._resetMaxSizeY();
    }

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

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

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

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

}




/* CanvasImage 
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);
    });
*/
class CanvasImage{

    static bindBox(obj, box){
        var _x = box.x, _y = box.y, _w = box.w, _h = box.h, oldV;

        Object.defineProperties(box, {

            x: {
                get: () => {return _x;},
                set: v => {
                    oldV = _x;
                    _x = v;
                    if(obj.writeBoxX !== null) obj.writeBoxX(v+_w, oldV+_w);
                }
            },

            y: {
                get: () => {return _y;},
                set: v => {
                    oldV = _y;
                    _y = v;
                    if(obj.writeBoxY !== null) obj.writeBoxY(v+_h, oldV+_h);
                }
            },

            w: {
                get: () => {return _w;},
                set: v => {
                    oldV = _w;
                    _w = v;
                    if(obj.writeBoxX !== null) obj.writeBoxX(v+_x, oldV+_x);
                }
            },

            h: {
                get: () => {return _h;},
                set: v => {
                    oldV = _h;
                    _h = v;
                    if(obj.writeBoxY !== null) obj.writeBoxY(v+_y, oldV+_y);
                }
            },

        });
    }

    #box = new Box();
    #image = null;
    #isLoadImage = false;
    #__bindObj = {
        writeBoxX: null,
        writeBoxY: null,
    }

    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 width(){return this.#image !== null ? this.#image.width : 0;}
    get height(){return this.#image !== null ? this.#image.height : 0;}
    get isLoadImage(){return this.#isLoadImage;}
    get __bindObj(){return this.#__bindObj;}
    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 = null;
        this.index = -1;

        CanvasImage.bindBox(this.#__bindObj, this.#box);
        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){
            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){
        super(canvas);
    }

    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);
        this.fontSize = parseFloat(CanvasImageRender.defaultStyles.font);
        this.fillStyle = CanvasImageRender.defaultStyles.fillStyle;
        this.strokeStyle = CanvasImageRender.defaultStyles.strokeStyle;
        this.shadowColor = CanvasImageRender.defaultStyles.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){
        const con = this.context, s = con.lineWidth;
        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.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, lineWidth){
        if(typeof color === "string" && 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){
        if(typeof color === "string" && this.fillStyle !== color) this.fillStyle = this.context.fillStyle = color;
        this.context.fill();
        return this;
    }

    text(value, color, fontSize = 12, x = -1, y = -1){
        if(this.fontSize !== fontSize){
            this.fontSize = fontSize;
            this.context.font = fontSize+"px SimSun, Songti SC";
        }

        const textWidth = this.context.measureText(value).width;
        if(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(typeof color === "string" && this.fillStyle !== color) this.fillStyle = this.context.fillStyle = color;
        this.context.fillText(value, x, y);

        return this;
    }

}




export {
    CanvasImageRender,
    CanvasImage, 
    CanvasImages,
    CanvasImageCustom,
}