drawUtils.js

const bwidth = 200;
const count = 2;
const picList = {}; //
const hasRect = false;
import _ from 'underscore';
export default {
    methods: {
        /**
         * 初始化绘制列表 
         */
        drawPolyImage(data, group) {
            let that = this;
            picList[data.id] = {};
            picList[data.id].imgRatio = bwidth / data.width;
            picList[data.id].width = bwidth;
            picList[data.id].height = data.height * picList[data.id].imgRatio;
            let dots = [
                { x: 1, y: 1 },
                { x: 1 + bwidth, y: 1 },
                { x: 1 + bwidth, y: 1 + picList[data.id].height },
                { x: 1, y: 1 + picList[data.id].height }
            ];

            picList[data.id].dots = zrender.util.clone(dots);
            picList[data.id].fdots = dots;
            picList[data.id].cameraPoints = [{
                x: 0,
                y: 0
            }, {
                x: data.width,
                y: 0
            }, {
                x: data.width,
                y: data.height
            }, {
                x: 0,
                y: data.height
            }];
            picList[data.id].idots = this.rectsplit(count, dots[0], dots[1], dots[2], dots[3]);

            let saveDots;
            if (data.coordinates && data.coordinates.mapPoints) {
                saveDots = _.map(data.coordinates.mapPoints, dot => {
                    return {
                        x: 0.01 * dot.x * that.width,
                        y: 0.01 * dot.y * that.height,
                    }
                })
            }
            this.drawCircle(data.id, saveDots);
            this.setText(data.id);
            this.renderPartList(data.id);

        },
        drawCircle(gateId, sdots) {
            let that = this;
            let group = _.findWhere(this.groupList, { gateId });
            let fdots = picList[gateId].fdots;
            let dots = zrender.util.clone(fdots);
            let postGateData = _.debounce(that.saveGateData, 100);
            let tempZ = group.z + 2;
            _.each(dots, (item, index) => {
                let circle = new zrender.Circle({
                    type: 'circle',
                    cursor: index % 2 ? 'sw-resize' : 'se-resize',
                    z: tempZ,
                    shape: {
                        cx: item.x,
                        cy: item.y,
                        r: 20, //(dots[1].x - dots[0].x) / 8
                    },
                    style: {
                        fill: 'transparent',
                        //stroke: '#f00',
                        stroke: 'transparent',
                    }
                });
                circle.on('mousedown', function(evt1) {
                    evt1.cancelBubble = true;
                    let dragable = true;
                    let downPoint = [evt1.event.zrX, evt1.event.zrY];
                    let initPoint = zrender.util.clone(this.position);
                    this.attr('z', 99999);
                    this.attr('shape', { r: 120 });
                    this.on('mousemove', function(evt2) {
                        if (dragable) {
                            let pos = [evt2.event.zrX - downPoint[0], evt2.event.zrY - downPoint[1]];
                            let position = [initPoint[0] + pos[0], initPoint[1] + pos[1]];
                            this.attr('position', position);
                            picList[gateId].dots[index].x = fdots[index].x + position[0];
                            picList[gateId].dots[index].y = fdots[index].y + position[1];
                            that.setText(gateId);
                            that.renderPartList(gateId);
                        }
                    });
                    this.on('mouseup', function(evt3) {
                        dragable = false;
                        postGateData(gateId);
                        this.attr('z', tempZ);
                        this.attr('shape', { r: 20 });
                        //that.saveGateData(gateId)
                    })
                    this.on('mouseout', function(evt3) {
                        dragable = false;
                        this.attr('z', tempZ);
                        this.attr('shape', { r: 20 });
                    })
                })
                if (sdots) {
                    let position = [sdots[index].x - circle.shape.cx, sdots[index].y - circle.shape.cy];
                    circle.attr('position', position);
                    picList[gateId].dots[index].x = fdots[index].x + position[0];
                    picList[gateId].dots[index].y = fdots[index].y + position[1];
                }
                group.add(circle)
            });
            if (sdots) {
                that.setText(gateId);
                that.renderPartList(gateId);
            }
        },
        saveGateData(gateId) {
            let that = this;
            if (this.ajaxing && this.ajaxing == gateId) {
                console.info('正在请求')
                    //return false;
            }
            this.ajaxing = gateId;
            let gateObj = _.findWhere(this.gateList, { id: gateId });
            let group = _.findWhere(this.groupList, { gateId });
            let mapPoints = gateObj.coordinates && gateObj.coordinates.mapPoints;
            let upload = mapPoints ? false : true;
            let dots = _.map(picList[gateId].dots, (dot, index) => {
                let x = Math.round((group.position[0] + dot.x) * 100 / that.width);
                let y = Math.round((group.position[1] + dot.y) * 100 / that.height);
                if (!upload && (x != mapPoints[index].x || y != mapPoints[index].y)) {
                    upload = true
                }
                return {
                    x,
                    y
                }
            });
            gateObj.coordinates = JSON.stringify({
                centerPoint: { x: 0, y: 0 },
                marginPoint: { x: 0, y: 0 },
                cameraPoints: picList[gateId].cameraPoints,
                mapPoints: dots
            });
            this.$api.management.editGate(gateId, gateObj).then(res => {
                this.ajaxing = false;
            });
        },
        setText(gateId) {
            let that = this;
            let group = _.findWhere(this.groupList, { gateId });
            let gateObj = _.findWhere(this.gateList, { id: gateId });
            let dots = picList[gateId].dots;
            /*****************************************/
            if (group.polygon) group.remove(group.polygon);
            group.polygon = new zrender.Polygon({
                z: group.z + 1,
                style: {
                    stroke: '#f00',
                    fill: 'transparent'
                },
                shape: {
                    points: dots.map(item => [item.x, item.y])
                },
            })
            group.add(group.polygon)
                /*****************************************/
            let xAis = [dots[0].x, dots[1].x, dots[2].x, dots[3].x];
            let yAis = [dots[0].y, dots[1].y, dots[2].y, dots[3].y];
            let [x, y] = [_.max(xAis) - _.min(xAis), _.max(yAis) - _.min(yAis)];
            let text = picList[gateId].text;
            let name = gateObj.name; //+ '\n' + gateObj.serialnum;
            if (text) {
                let width = text.getBoundingRect().width;
                text.attr('position', [_.min(xAis), _.min(yAis)]);
                text.attr('style', {
                    x: (x - width) / 2,
                    y: y / 2
                });
            } else {
                text = new zrender.Text({
                    position: [_.min(xAis), _.min(yAis)],
                    z: group.z + 1,
                    //silent: true,
                    style: {
                        x: x / 2,
                        y: y / 2,
                        textAlign: 'center',
                        verticalAlign: 'middle',
                        text: name,
                        fill: '#f00',
                        fontSize: 13,
                    }
                })
                let width = text.getBoundingRect().width;
                text.attr('style', {
                    x: (x - width) / 2
                });
                picList[gateId].text = text;
                group.add(text);
            }

        },
        /**
         * 绘制监控点图像 
         */
        renderPartList(gateId) {
            let group = _.findWhere(this.groupList, { gateId });
            group.eachChild(function(item) {
                if (item.type == 'image') {
                    group.remove(item);
                }
            })
            let dots = picList[gateId].dots;
            let idots = picList[gateId].idots;
            let ndots = this.rectsplit(count, dots[0], dots[1], dots[2], dots[3]);

            _.each(ndots, (d, i) => {
                    //获取平行四边形的四个点
                    let dot1 = ndots[i];
                    let dot2 = ndots[i + 1];
                    let dot3 = ndots[i + count + 2];
                    let dot4 = ndots[i + count + 1];

                    //获取初始平行四边形的四个点
                    let idot1 = idots[i];
                    let idot2 = idots[i + 1];
                    let idot3 = idots[i + count + 2];
                    let idot4 = idots[i + count + 1];
                    // if ((i + 1) % (count + 1) != 0 && i < (count + 1) * count) {
                    //     this.renderImage(idot3, dot3, idot2, dot2, idot4, dot4, idot1, group);
                    // }
                    if (dot2 && dot3 && i % (count + 1) < count) {
                        //绘制矩形的下半部分
                        this.renderImage(idot3, dot3, idot2, dot2, idot4, dot4, idot1, group);
                        //绘制三角形的上半部分
                        this.renderImage(idot1, dot1, idot2, dot2, idot4, dot4, idot1, group);
                    }
                    // if (hasDot) {
                    //     ctx.fillStyle = 'red';
                    //     ctx.fillRect(d.x - 1, d.y - 1, 2, 2);
                    // }
                })
                // _.each(group._children, item => {
                //     if (item.type == 'image') {
                //         item.attr('style', {
                //             opacity: 0.9
                //         })
                //     }
                // })
        },
        /**
         * 计算矩阵，同时渲染图片
         * @param arg_1
         * @param _arg_1
         * @param arg_2
         * @param _arg_2
         * @param arg_3
         * @param _arg_3
         */
        renderImage(arg_1, _arg_1, arg_2, _arg_2, arg_3, _arg_3, vertex, group) {
            //传入变换前后的点坐标，计算变换矩阵
            let result = this.getMatrix.apply(this, arguments);
            let imgRatio = picList[group.gateId].imgRatio;
            let idots = picList[group.gateId].idots;
            let width = picList[group.gateId].width;
            let height = picList[group.gateId].height;
            let w = width / count;
            let h = height / count;
            let style = {
                image: group.picUrl,
                sx: (vertex.x - idots[0].x) / imgRatio - 1,
                sy: (vertex.y - idots[0].y) / imgRatio - 1,
                sWidth: w / imgRatio + 2,
                sHeight: h / imgRatio + 2,
                x: vertex.x - 1,
                y: vertex.y - 1,
                //opacity: 0.1,
                width: w + 2,
                height: h + 2
            };
            let image = new zrender.Image({
                //invisible: true,
                z: group.z,
                //silent: true,
                type: 'image',
                //position: [vertex.x, vertex.y],
                style
            });
            image.setClipPath(new zrender.Polygon({
                shape: {
                    points: [
                        [arg_1.x, arg_1.y],
                        [arg_2.x, arg_2.y],
                        [arg_3.x, arg_3.y]
                    ]
                }
            }));
            image.setLocalTransform([result.a, result.b, result.c, result.d, result.e, result.f]);
            //image.setLocalTransform([1, 0.0174551, 0.0559414, 0.8, 79, 8])
            image.updateTransform();
            group.add(image);
            this.zr.add(group);
            // //变形
            // ctx.transform(result.a, result.b, result.c, result.d, result.e, result.f);

            // var w = img.width / count;
            // var h = img.height / count;

            // //绘制图片
            // ctx.drawImage(
            //     img,
            //     (vertex.x - idots[0].x) / imgRatio - 1,
            //     (vertex.y - idots[0].y) / imgRatio - 1,
            //     w / imgRatio + 2,
            //     h / imgRatio + 2,
            //     vertex.x - 1,
            //     vertex.y - 1,
            //     w + 2,
            //     h + 2
            // );
        },
        /**
         * 根据变化前后的点坐标，计算矩阵
         * @param arg_1     变化前坐标1
         * @param _arg_1    变化后坐标1
         * @param arg_2     变化前坐标2
         * @param _arg_2    变化后坐标2
         * @param arg_3     变化前坐标3
         * @param _arg_3    变化后坐标3
         * @returns {{a: number, b: number, c: number, d: number, e: number, f: number}}
         */
        getMatrix(arg_1, _arg_1, arg_2, _arg_2, arg_3, _arg_3) {
            //传入x值解第一个方程 即  X = ax + cy + e 求ace
            //传入的四个参数，对应三元一次方程：ax+by+cz=d的四个参数：a、b、c、d，跟矩阵方程对比c为1
            var arr1 = [arg_1.x, arg_1.y, 1, _arg_1.x];
            var arr2 = [arg_2.x, arg_2.y, 1, _arg_2.x];
            var arr3 = [arg_3.x, arg_3.y, 1, _arg_3.x];

            var result = this.equation(arr1, arr2, arr3);

            //传入y值解第二个方程 即  Y = bx + dy + f 求 bdf
            arr1[3] = _arg_1.y;
            arr2[3] = _arg_2.y;
            arr3[3] = _arg_3.y;
            var result2 = this.equation(arr1, arr2, arr3);
            //获得a、c、e
            var a = result.x;
            var c = result.y;
            var e = result.z;

            //获得b、d、f
            var b = result2.x;
            var d = result2.y;
            var f = result2.z;

            return {
                a: a,
                b: b,
                c: c,
                d: d,
                e: e,
                f: f
            };
        },
        /**
         * 解三元一次方程，需要传入三组方程参数
         * @param arr1        第一组参数
         * @param arr2        第二组参数
         * @param arr3        第三组参数
         * @returns {{x: number, y: number, z: number}}
         */
        equation(arr1, arr2, arr3) {
            var a1 = +arr1[0];
            var b1 = +arr1[1];
            var c1 = +arr1[2];
            var d1 = +arr1[3];

            var a2 = +arr2[0];
            var b2 = +arr2[1];
            var c2 = +arr2[2];
            var d2 = +arr2[3];

            var a3 = +arr3[0];
            var b3 = +arr3[1];
            var c3 = +arr3[2];
            var d3 = +arr3[3];

            //分离计算单元
            var m1 = c1 - (b1 * c2 / b2);
            var m2 = c2 - (b2 * c3 / b3);
            var m3 = d2 - (b2 * d3 / b3);
            var m4 = a2 - (b2 * a3 / b3);
            var m5 = d1 - (b1 * d2 / b2);
            var m6 = a1 - (b1 * a2 / b2);

            //计算xyz
            var x = ((m1 / m2) * m3 - m5) / ((m1 / m2) * m4 - m6);
            var z = (m3 - m4 * x) / m2;
            var y = (d1 - a1 * x - c1 * z) / b1;
            return {
                x: x,
                y: y,
                z: z
            }
        },
        /**
         * 将 abcd 四边形分割成 n 的 n 次方份，获取 n 等分后的所有点坐标
         * @param n     多少等分
         * @param a     a 点坐标
         * @param b     b 点坐标
         * @param c     c 点坐标
         * @param d     d 点坐标
         * @returns {Array}
         */
        rectsplit(n, a, b, c, d) {
            // ad 向量方向 n 等分
            var ad_x = (d.x - a.x) / n;
            var ad_y = (d.y - a.y) / n;
            // bc 向量方向 n 等分
            var bc_x = (c.x - b.x) / n;
            var bc_y = (c.y - b.y) / n;

            var ndots = [];
            var x1, y1, x2, y2, ab_x, ab_y;

            //左边点递增，右边点递增，获取每一次递增后的新的向量，继续 n 等分，从而获取所有点坐标
            for (var i = 0; i <= n; i++) {
                //获得 ad 向量 n 等分后的坐标
                x1 = a.x + ad_x * i;
                y1 = a.y + ad_y * i;
                //获得 bc 向量 n 等分后的坐标
                x2 = b.x + bc_x * i;
                y2 = b.y + bc_y * i;

                for (var j = 0; j <= n; j++) {
                    // ab 向量为：[x2 - x1 , y2 - y1]，所以 n 等分后的增量为除于 n
                    ab_x = (x2 - x1) / n;
                    ab_y = (y2 - y1) / n;

                    ndots.push({
                        x: x1 + ab_x * j,
                        y: y1 + ab_y * j,
                    });
                }
            }

            return ndots;
        }
    }
}