SVG多邊形比例和相應設置點
[英]SVG polygon scale and set points accordingly
問題描述
嗨堆棧溢出:)
我正在與svg多邊形對象作斗爭，我需要能夠調整大小（按比例），並保存/設置新的點值。 目前，我可以通過將CSS轉換應用於SVG對象來實現此目的，但這不會更改points屬性值。 這有可能嗎？ 我的SVG多邊形如下所示：
<svg viewBox="0 0 100 100" style="width: 100px; height: 100px;"> <polygon fill="black" points="0,0 50,0 100,100 0,100" /> </svg>
提前致謝 ：）
1 個解決方案
解決方案1
1 已采納 2016-07-22 16:29:00
好了，您可以通過偏移（+/-）像素值來擴展/收縮多邊形，這將改變其點值。 所討論的多邊形必須是凸的。 同樣，下面的示例可以縮放多邊形，然后在縮放后使用矩陣變換重新計算其點。
嘗試以下
<!DOCTYPE HTML> <html> <head> <title>Resize Convex Polygon</title> </head> <body> <center> Offset(+/-) px.<input type="text" style="width:50px" id=offsetValue value=10 /><button onClick=resizeMyPolygon()>Resize Polygon</button> <br> <button onClick=scalePolygon() >Scale Polygon</button> <br> <svg xmlns="http://www.w3.org/2000/svg" id="mySVG" width="600" height="600"> <polygon id="myPolygon" fill="yellow" stroke="black" stroke-width="1" points="380,80 200,10 40,80 100,320 300,350"></polygon> <svg> </center> <script> //---button--- function scalePolygon() { //---scale from center of polygon-- var bb=myPolygon.getBBox() var bbx=bb.x var bby=bb.y var bbw=bb.width var bbh=bb.height var cx=bbx+.5*bbw var cy=bby+.5*bbh myPolygon.setAttribute("transform","translate("+cx+" "+cy+")scale(1.2)translate("+(-cx)+" "+(-cy)+")") screenPolygon(myPolygon) console.log(myPolygon.getAttribute("points")) } function screenPolygon(myPoly) { var sCTM = myPoly.getCTM() var svgRoot = myPoly.ownerSVGElement var pointsList = myPoly.points; var n = pointsList.numberOfItems; for(var m=0; m < n; m++) { var mySVGPoint = svgRoot.createSVGPoint(); mySVGPoint.x = pointsList.getItem(m).x mySVGPoint.y = pointsList.getItem(m).y mySVGPointTrans = mySVGPoint.matrixTransform(sCTM) pointsList.getItem(m).x=mySVGPointTrans.x pointsList.getItem(m).y=mySVGPointTrans.y }; //---force removal of transform-- myPoly.setAttribute("transform","") myPoly.removeAttribute("transform") } //---button--- function resizeMyPolygon() { var pointList=myPolygon.points //---clockwise or counterclockwise-- function polygonArea() { var area = 0; for (var i = 0; i < pointList.length; i++) { j = (i + 1) % pointList.length; area += pointList.getItem(i).x * pointList.getItem(j).y; area -= pointList.getItem(j).x * pointList.getItem(i).y; } return area / 2; } var clockwise = polygonArea() > 0; //---false is ccw points-- var offset=parseFloat(offsetValue.value) if((offset>0&& clockwise==true)||(offset<0&&clockwise==false)) { //--reverse polygon points--- var pointArray=[] for(var k=pointList.numberOfItems-1;k>=0;k--) { var lastPnt=pointList.getItem(k) pointArray.push([lastPnt.x,lastPnt.y]) } myPolygon.setAttribute("points",pointArray.join() ) pointList=myPolygon.points } var changedPoints=resizePolygon(pointList,offset,mySVG) myPolygon.setAttribute("points",changedPoints.join() ) console.log(myPolygon.getAttribute("points")) } function resizePolygon(pointsList,offset,rootSVG) { var m=pointsList.numberOfItems //---first find centroid--- var total_area = 0; var centroid = [0, 0]; var a = pointsList.getItem(0); for (i = 0; i < m - 2; i++) { var b = pointsList.getItem(i + 1) var c = pointsList.getItem(i + 2); var area = 0.5 * Math.abs((ax - cx) * (by - ay) - (ax - bx) * (cy - ay)); total_area += area; centroid[0] += area * (ax + bx + cx); centroid[1] += area * (ay + by + cy); } centroid[0] /= total_area * 3; centroid[1] /= total_area * 3; var points_offset = []; for (i = 0; i < m; i++) { //--- ab is a line segment on the convex polygon--- var a = pointsList.getItem(i); var b = pointsList.getItem(i == m - 1 ? 0 : i + 1); //---Determine the normal to the line segment--- var slope = -1 / ((by - ay) / (bx - ax)); //---Construct a new line d--e that is the line a--b shifted 'offset'--- //---units in the direction of the normal--- var w, h; if (ay == by) w = 0; else w = (ay < by ? -1 : 1) * Math.sqrt(offset * offset / (1 + slope * slope)); if (w == 0) h = (ax > bx ? -1 : 1) * offset; else h = slope * w; //---root svg element--- var d=rootSVG.createSVGPoint() var e=rootSVG.createSVGPoint() dx = ax + w dy = ay + h if (slope == 0) { ex = dx ey=dy + 10 } else { ex = dx + 10, ey=dy - 10 / slope } //---Intersect the line d--e with centroid--a, which is the point on--- //---the inflated convex polygon--- //---http://en.wikipedia.org/wiki/Line-line_intersection--- points_offset.push([ ((dx * ey - dy * ex) * (centroid[0] - ax) - (dx - ex) * (centroid[0] * ay - centroid[1] * ax)) / ((dx - ex) * (centroid[1] - ay) - (dy - ey) * (centroid[0] - ax)), ((dx * ey - dy * ex) * (centroid[1] - ay) - (dy - ey) * (centroid[0] * ay - centroid[1] * ax)) / ((dx - ex) * (centroid[1] - ay) - (dy - ey) * (centroid[0] - ax)) ]); } return points_offset } </script> </body> </html>
如何為 SVG 多邊形點設置動畫？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.