javascript - 在同一位置放置动态形状

Question

当我每次点击按钮时，它都会给出不同的形状。所有的形状都是动态的。它可以是多边形或圆形(数百种形状)。

形状由一组线组成。

这里的问题是每个形状都被定位在不同的位置并且比另一个更小。我希望它们被归一化。所有形状都应具有适当的缩放效果并位于相同的 x 位置。有些形状居中，有些则偏向左上角。

具有相同变换矩阵和比例的代码如下所示。形状的位置不同。问题可能出在线的坐标上。在第一个代码片段中，它从 (0,0) 开始，最后一个形状线从 (15, 5)

我可以将所有形状的组 g 定位在相同的位置吗？我应该相对于某物放置吗？

var draw = SVG('drawing').viewbox(0, 0, 400, 400).attr("preserveAspectRatio", "xMidYMid meet");
var group = draw.group().translate(90, 90).scale(3)
var obj = {
    "type": "Polygon",
    "coords": [
        [
            [0, 0],
            [30, 0],
            [30, 20],
            [60, 20],
            [60, 40],
            [0, 40],
            [0, 0]
        ],
        [
            [0, 0],
            [10, 50],
            [50, 10],
            [0, 0]
        ],
        [
            [0, 0],
            [60, 0],
            [80, 40],
            [0, 40],
            [0, 0]
        ],
        [
            [0, 0],
            [50, 0],
            [50, 20],
            [0, 20],
            [0, 0]
        ],
        [
            [50, 10],
            [40, 40],
            [20, 40],
            [10, 20],
            [50, 10]
        ],
        [
            [15, 5],
            [40, 10],
            [10, 20],
            [5, 10],
            [15, 5]
        ],
        [
            [20, 35],
            [10, 30],
            [10, 10],
            [30, 5],
            [45, 20],
            [20, 35]
        ]
    ]
};

shapehandler()
function shapehandler() {
    if (obj.coords.length) {
        group.clear();
        drawShape(obj.coords[0]);
        obj.coords.shift();

    }
}


function drawShape(coords) {
    var lineCoords = [];
    var pointListString = coords.toString();
    var pointListArray = JSON.parse("[" + pointListString + "]");
    for (let i = 0; i < pointListArray.length - 2; i += 2) {
        let [x1, y1, x2, y2] = pointListArray.slice(i, i + 4)
        lineCoords.push({
            x1,
            y1,
            x2,
            y2
        });
    }

    lineCoords.forEach(function (lin, i) {
        let colorShade = [
            '#FFDC0B',
            '#002438',
            '#9B56BB',
            '#c6c7e2',
            '#318700',
            '#fe854f',
            '#FF8400',
            '#31d0c6',
            '#7c68fc',
            '#61549C',
            '#6a6c8a',
            '#4b4a67',
            '#3c4260',
            '#33334e',
            '#222138'
        ];
        group.line(lin.x1, lin.y1, lin.x2, lin.y2).stroke({ color: colorShade[i], width: 4, linecap: 'square' });
    });

}

html, body {
    margin: 0;
    padding: 0;
    font-family: Arial;
}
svg {
    width: 100%;
    height: 100%;
  }
#drawing{
    margin: 20px;
    display: inline-block;
    position: relative;
    border: 1px solid darkgrey;
    overflow:hidden;
    box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.js"></script>
 <div id="toolbar">
    <button type="button" id="btn-show-shape" onclick="shapehandler()">Show Polygon Shapes</button>
  </div>
  <div id="drawing">
  </div>

Answer 1

我会保留您的 HTML。

CSS 是你的，但我已经添加了线条规则。它设置了 stroke-width。为了更好的效果，stroke-linecap 是round。

最重要的是:我正在使用 vector-effect:non-scaling-stroke。由于我不知道要将组缩放多少，因此我需要 vector-effect:non-scaling-stroke 使对象的笔划宽度不受变换和缩放的影响。

在 javaScript 中，我保留了所有数据(点和颜色)，但我重写了其余部分。

最重要的是；我正在计算取决于组边界框宽度的比例。我正在平移 SVG Canvas 中心的组并对其进行缩放。

希望这就是您所需要的。

const SVG_NS = 'http://www.w3.org/2000/svg';
const W = 400,cx = W/2;
const H = 400,cy = H/2;

let obj = {
    type: "polygon",
    coords: [
        [
            [0, 0],
            [30, 0],
            [30, 20],
            [60, 20],
            [60, 40],
            [0, 40],
            [0, 0]
        ],
        [
            [0, 0],
            [10, 50],
            [50, 10],
            [0, 0]
        ],
        [
            [0, 0],
            [60, 0],
            [80, 40],
            [0, 40],
            [0, 0]
        ],
        [
            [0, 0],
            [50, 0],
            [50, 20],
            [0, 20],
            [0, 0]
        ],
        [
            [50, 10],
            [40, 40],
            [20, 40],
            [10, 20],
            [50, 10]
        ],
        [
            [15, 5],
            [40, 10],
            [10, 20],
            [5, 10],
            [15, 5]
        ],
        [
            [20, 35],
            [10, 30],
            [10, 10],
            [30, 5],
            [45, 20],
            [20, 35]
        ]
    ]
};

let colorShade = [
            '#FFDC0B',
            '#002438',
            '#9B56BB',
            '#c6c7e2',
            '#318700',
            '#fe854f',
            '#FF8400',
            '#31d0c6',
            '#7c68fc',
            '#61549C',
            '#6a6c8a',
            '#4b4a67',
            '#3c4260',
            '#33334e',
            '#222138'
        ];


// create a new SVG element
let svg = drawSVGElmt(
"svg",
{
viewbox:`0 0 ${W} ${H}`,
preserveAspectRatio:"xMidYMid meet",
}, 
drawing);

// create a group element
let group = drawSVGElmt(
"g",
{/*transform:"translate(90,90) scale(3)"*/},
svg
)


// draw a red dot in the middle of the canvas
drawSVGElmt("circle",{cx:cx,cy:cy,r:5,fill:"red"},svg)


let n = 0;



function drawAndScale(n){
  //first remove all the lines from the group
  while (group.firstChild) {
    group.removeChild(group.firstChild);
  }
  
  // for all the points in obj.coords[n] draw a line
  for(let i = 0, l = obj.coords[n].length -1; i < l; i++){
    
  let p0 = obj.coords[n][i];
  let p1 =  obj.coords[n][i + 1];
  let x1 = p0[0],y1 = p0[1];
  let x2 = p1[0],y2 = p1[1];
  let stroke = colorShade[i];
    
  drawSVGElmt("line", {x1:x1,y1:y1,x2:x2,y2:y2,stroke:stroke}, group)
}

//get the size of the bounding box of the group
let BB = group.getBBox();

// set the scate using the width of the bounding box
let scale = (W * .75) / BB.width;
  
// scale & translate the group in the crnter of the SVG element
group.setAttributeNS(null,"transform",
`translate(${ scale * (-BB.x -BB.width/2)}, ${ scale * (-BB.y -BB.height/2)}) 
scale(${scale})
translate(${cx/scale}, ${cy/scale})`); 
}



drawAndScale(n);

function shapehandler(){
  if(n < obj.coords.length - 2){ n++; }else{n = 0};
  drawAndScale(n);
}
       


// a function to draw an SVG element
function drawSVGElmt(type, o, _parent) {
  let elmt = document.createElementNS(SVG_NS, type);
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      elmt.setAttributeNS(null, name, o[name]);
    }
  }
  _parent.appendChild(elmt);
  return elmt;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: Arial;
}
svg {
    width: 100%;
    height: 100%;
  }
#drawing{
    margin: 20px;
    display: inline-block;
    position: relative;
    border: 1px solid;
    overflow:hidden;
    box-sizing: border-box;
    width:400px;
    height:400px;
}


line{
  stroke-width:50px;
  stroke-linecap: round;
  /* vector-effect:non-scaling-stroke causes an object's stroke-width to be unaffected by transformations and zooming */
  vector-effect:non-scaling-stroke;}

<div id="toolbar">
<button type="button" id="btn_show_shape" onclick="shapehandler()">Show Polygon Shapes</button>
</div>
<div id="drawing">
</div>