Question

完成第一部分，即使用SVG路径绘制省略号。我在第二部分需要帮助（如图2所示）。如何沿着SVG路径精确绘制圆圈？我正在使用JointJS，VectorizerJS和GeometryJS

<html>
<head>
    <link rel="stylesheet" href="joint.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    
<script type="text/javascript" src="loadash.js"></script>
<script type="text/javascript" src="backbone.js"></script>   
<script type="text/javascript" src="joint.js"></script> 

<script type="text/javascript" src="geometry.js"></script>
<script type="text/javascript" src="vectorizer.js"></script>

</head>

<body>

    <div id="paper"></div>





    <script type="text/javascript">
    // Joint JS example
    var graph = new joint.dia.Graph();
    var paper = new joint.dia.Paper({
        el: $('#paper'),
        width: 1200,
        height: 800,
        gridSize: 3,
        model: graph,
        drawGrid: true,
        perpendicularLinks: false,
        async: true
        //snapLinks: true,
        //markAvailable: true,
    });

    // draw orbits
    for(var i=0; i<10;i++){

        var c = V('ellipse', {
            id: i+"_dot",
            //class: 'pathCircle',
            rx: 100+(i*40),
            ry:50+(i*30),
            cx:500,
            cy:400,
            stroke: 'red',
            fill:'none'
        });
        var c=c.convertToPath();
        var orbitPath=c.convertToPathData();
        g.bezier.curveThroughPoints(orbitPath);
        V(paper.svg).append(c);

        //write label for this orbit
        var txt=V('text',{
            id:i+"_dot_label",
            x:500-(100+(i*40)),
            y:400,
            fill:'black'                
        });
        txt.text(String((i+1)),{ lineHeight: 'auto'});
        V(paper.svg).append(txt);  

        // draw planets
        for(var j = 0; j < 3; j++){
                /// NEED HELP 
        }      

    }

    //draw center rectangele
    var s = V('rect', {
            id: "startMetaboliteBox",
            width:'100',
            height:'50',
            fill:'yellow',
            stroke:'red',
            x:450,
            y:375
        });

    V(paper.svg).append(s);
    // write text on rectangle
    var txt=V('text',{
            id:i+"_dot_label",
            x:451,
            y:405,
            fill:'black'                
        });
    txt.text("Star metabolite",{ lineHeight: 'auto'});
    V(paper.svg).append(txt);


    </script>

</body>

我想在SVG路径上精确绘制SVG圆圈

0 个答案: