svg class

最新推荐文章于 2023-02-16 15:41:01 发布

overseer

最新推荐文章于 2023-02-16 15:41:01 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/overseer/article/details/78999295

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生命周期链</title>
</head>
<body>
    <div id="life-cycle" style="height:1000px;width:1000px;">
            <svg id = "playground" xmlns="http://www.w3.org/2000/svg" version="1.1" height="100%" width="100%">
            </svg>
    </div>
</body>
<script src="main.js"></script>
</html>

const NAMESPACE = "http://www.w3.org/2000/svg";

class Pencil {
    constructor(origin_x, origin_y, line_width, color) {
        this.x = origin_x;
        this.y = origin_y;
        this.line_width = line_width;
        this.color = color;
        this.seq = 0;
        this.seq_draw = [];
        Pencil.prototype.x = this.x;
        Pencil.prototype.y = this.y;
    }

    drawBottomToRightArc(arc, direct) { //direction: 0 正向，1 逆向
        // <path d="M35 125 A 45 45,0,0,0,80 80 M 80 80 Z" stroke="black" stroke-width="5" fill="transparent"/>
        let pen = document.createElementNS(NAMESPACE,'path');
        let direction = direct || 0;
        pen.setAttribute('d',`M${this.x} ${this.y} A ${arc} ${arc},0,0,${direction},${this.x+arc} ${this.y-arc} M ${this.x+arc} ${this.y-arc} Z`);
        pen.setAttribute('stroke',this.color);
        pen.setAttribute('stroke-width',this.line_width);
        pen.setAttribute('fill','transparent');
        if(!this.seq) {
            return line;
        } else {
            this.x = this.x+arc;
            this.y = this.y-arc
            this.seq_draw.push(pen);
            return this;
        }
    }

    drawLeftToBottomArc(arc, direct) {
        let pen = document.createElementNS(NAMESPACE,'path');
        let direction = direct || 0;
        pen.setAttribute('d',`M${this.x} ${this.y} A ${arc} ${arc},0,0,${direction},${this.x+arc} ${this.y+arc} M ${this.x+arc} ${this.y+arc} Z`);
        pen.setAttribute('stroke',this.color);
        pen.setAttribute('stroke-width',this.line_width);
        pen.setAttribute('fill','transparent');
        if(!this.seq) {
            return line;
        } else {
            this.x = this.x+arc;
            this.y = this.y+arc
            this.seq_draw.push(pen);
            return this;
        }
    }

    drawRightToUpArc(arc, direct) {
        let pen = document.createElementNS(NAMESPACE,'path');
        let direction = direct || 0;
        pen.setAttribute('d',`M${this.x} ${this.y} A ${arc} ${arc},0,0,${direction},${this.x-arc} ${this.y-arc} M ${this.x-arc} ${this.y-arc} Z`);
        pen.setAttribute('stroke',this.color);
        pen.setAttribute('stroke-width',this.line_width);
        pen.setAttribute('fill','transparent');
        if(!this.seq) {
            return line;
        } else {
            this.x = this.x-arc;
            this.y = this.y-arc
            this.seq_draw.push(pen);
            return this;
        }
    }

    drawUpToLeftArc(arc, direct) {
        let pen = document.createElementNS(NAMESPACE,'path');
        let direction = direct || 0;
        pen.setAttribute('d',`M${this.x} ${this.y} A ${arc} ${arc},0,0,${direction},${this.x-arc} ${this.y+arc} M ${this.x-arc} ${this.y+arc} Z`);
        pen.setAttribute('stroke',this.color);
        pen.setAttribute('stroke-width',this.line_width);
        pen.setAttribute('fill','transparent');
        if(!this.seq) {
            return line;
        } else {
            this.x = this.x-arc;
            this.y = this.y+arc
            this.seq_draw.push(pen);
            return this;
        }
    }

    drawDownwardLine(len, direct) {
        let line = document.createElementNS(NAMESPACE,'line');
        let direction = direct || 0;
        let next_y;
        line.setAttribute('x1',this.x);
        line.setAttribute('y1',this.y);
        line.setAttribute('stroke',this.color);
        line.setAttribute('stroke-width',this.line_width);
        if(!direction) {
            next_y = this.y+len
            line.setAttribute('x2',this.x);
            line.setAttribute('y2',next_y);
        } else {
            next_y = this.y-len;
            line.setAttribute('x2',this.x);
            line.setAttribute('y2',next_y);
        }
        if(!this.seq) {
            return line;
        } else {
            this.y = next_y;
            this.seq_draw.push(line);
            return this;
        }
    }

    drawRightWardLine(len, direct) {
        let line = document.createElementNS(NAMESPACE,'line');
        let direction = direct || 0;
        let next_x;
        line.setAttribute('x1',this.x);
        line.setAttribute('y1',this.y);
        line.setAttribute('stroke',this.color);
        line.setAttribute('stroke-width',this.line_width);
        if(!direction) {
            next_x = this.x+len
            line.setAttribute('x2',next_x);
            line.setAttribute('y2',this.y);
        } else {
            next_x = this.x-len
            line.setAttribute('x2',next_x);
            line.setAttribute('y2',this.y);
        }
        if(!this.seq) {
            return line;
        } else {
            this.x = next_x;
            this.seq_draw.push(line);
            return this;
        }
    }

    drawCircle(radius) {
        // <circle cx="80" cy="70" r="10" stroke="black" stroke-width="5" fill="transparent"/>
        let circle = document.createElementNS(NAMESPACE,'circle');
        circle.setAttribute('cx',this.x);
        circle.setAttribute('cy',this.y);
        circle.setAttribute('r',radius);
        circle.setAttribute('stroke',this.color);
        circle.setAttribute('stroke-width',this.line_width);
        circle.setAttribute('fill','transparent');
        if(!this.seq) {
            return circle;
        } else {
            this.seq_draw.push(circle);
            return this;
        }
    }

    drawTextAnnotation(content, anchor, size, style) {
        // <text x="80" y="55" font-size="15" text-anchor="middle">文件审批</text>
        let text = document.createElementNS(NAMESPACE,'text');
        text.setAttribute('x',this.x);
        text.setAttribute('y',this.y-10);
        text.setAttribute('text-anchor',anchor);
        text.setAttribute('font-size',size);
        text.setAttribute('style',style);
        text.textContent = content;
        if(!this.seq) {
            return text;
        } else {
            this.seq_draw.push(text);
            return this;
        }
    }

    setAxis(new_x, new_y) {
        this.x = new_x;
        this.y = new_y;
        return this;
    }

    resetAxis() {
        this.x = Pencil.prototype.x;
        this.y = Pencil.prototype.y;
        return this;
    }

    seqDraw() {
        this.seq = 1;
        this.seq_draw = [];
        return this;
    }

    endDraw() {
        this.seq = 0;
        let group = document.createElementNS(NAMESPACE,'g');
        this.seq_draw.forEach(function(draw) {
            group.appendChild(draw);
        });
        return group;
    }

    getCurrentAxis() {
        return [this.x, this.y];
    }
}

let area = document.getElementById('playground');
let node = new Pencil(80,80,3,'grey');
area.appendChild(node.seqDraw().drawBottomToRightArc(45).drawCircle(5).drawTextAnnotation('审批节点','middle',15).drawLeftToBottomArc(45).endDraw());
area.appendChild(node.seqDraw().drawRightWardLine(135).endDraw());
area.appendChild(node.seqDraw().drawBottomToRightArc(45).drawCircle(5).drawTextAnnotation('审批节点','middle',15).drawLeftToBottomArc(45).endDraw());
area.appendChild(node.seqDraw().drawRightWardLine(135).endDraw());
area.appendChild(node.seqDraw().drawBottomToRightArc(45).drawCircle(5).drawTextAnnotation('审批节点','middle',15).drawLeftToBottomArc(45).endDraw());
area.appendChild(node.seqDraw().drawRightWardLine(135).endDraw());
area.appendChild(node.seqDraw().drawBottomToRightArc(45).drawCircle(5).drawTextAnnotation('审批节点','middle',15).drawLeftToBottomArc(45).endDraw());
area.appendChild(node.seqDraw().drawLeftToBottomArc(45,1).drawDownwardLine(45).endDraw());
let axis = node.getCurrentAxis();
area.appendChild(node.seqDraw().drawUpToLeftArc(45,1).endDraw());
area.appendChild(node.seqDraw().drawRightToUpArc(45,1).drawCircle(5).drawTextAnnotation('审批节点','middle',15).drawUpToLeftArc(45,1).endDraw());
area.appendChild(node.seqDraw().drawRightWardLine(60,1).endDraw());
area.appendChild(node.seqDraw().drawRightToUpArc(45,1).drawCircle(5).drawTextAnnotation('审批节点','middle',15).drawUpToLeftArc(45,1).endDraw());
area.appendChild(node.seqDraw().drawRightWardLine(60,1).endDraw());
area.appendChild(node.seqDraw().drawRightToUpArc(45,1).drawCircle(5).drawTextAnnotation('审批节点','middle',15).drawUpToLeftArc(45,1).endDraw());
area.appendChild(node.seqDraw().drawRightWardLine(60,1).endDraw());
area.appendChild(node.seqDraw().drawRightToUpArc(45,1).drawCircle(5).drawTextAnnotation('审批节点','middle',15).drawUpToLeftArc(45,1).endDraw());
area.appendChild(node.seqDraw().drawUpToLeftArc(45).drawDownwardLine(90).endDraw());
console.log(node.x,node.y);
area.appendChild(node.setAxis(axis[0],axis[1]).seqDraw().drawDownwardLine(135).endDraw());
area.appendChild(node.seqDraw().drawUpToLeftArc(45,1).endDraw());
area.appendChild(node.seqDraw().drawRightToUpArc(45,1).drawCircle(5).drawTextAnnotation('审批节点','middle',15).drawUpToLeftArc(45,1).endDraw());
area.appendChild(node.seqDraw().drawRightWardLine(60,1).endDraw());
area.appendChild(node.seqDraw().drawRightToUpArc(45,1).drawCircle(5).drawTextAnnotation('审批节点','middle',15).drawUpToLeftArc(45,1).endDraw());
area.appendChild(node.seqDraw().drawRightWardLine(60,1).endDraw());
area.appendChild(node.seqDraw().drawRightToUpArc(45,1).drawCircle(5).drawTextAnnotation('审批节点','middle',15).drawUpToLeftArc(45,1).endDraw());
area.appendChild(node.seqDraw().drawRightWardLine(60,1).endDraw());
area.appendChild(node.seqDraw().drawRightToUpArc(45,1).drawCircle(5).drawTextAnnotation('审批节点','middle',15).drawUpToLeftArc(45,1).endDraw());
area.appendChild(node.seqDraw().drawRightWardLine(60,1).endDraw());
area.appendChild(node.seqDraw().drawRightToUpArc(45,1).drawCircle(5).drawTextAnnotation('审批节点','middle',15).drawUpToLeftArc(45,1).endDraw());
area.appendChild(node.seqDraw().drawRightWardLine(60,1).endDraw());


class ApproveNode {
    constructor(origin_x, origin_y, line_width, color, arc_radius) {
        this.pen = new Pencil(origin_x, origin_y, line_width, color);
        this.arc_radius = arc_radius;
    }

    createApprovalNode(content) {
        this.pen.seqDraw().drawRightToUpArc(this.arc_radius,1).drawCircle(5).drawTextAnnotation(content,'middle',15).drawUpToLeftArc(arc_radius,1).endDraw();
    }

    createInnerApproveConnection(len) {
        this.pen.seqDraw().drawRightWardLine(len).endDraw();
    }

    createInterApproveConnection() {

    }
}

class ApproveChainResolver {
    constructor() {

    }

    resolveChain() {

    }

    setNodeActive() {

    }
}

overseer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
svg class

生命周期链 const NAMESPACE = "http://www.w3.org/2000/svg";class Pencil { constructor(origin_x, origin_y, line_width, color) { this.x = origin_x;
复制链接

扫一扫