svg.js縮放和移動/中心的奇怪交互

Question

我對在js中使用svgs不太熟悉，但這絕對是一件很奇怪的事情。 我有一個箭頭，然后是一條應該將箭頭填充到一定程度的路徑。 看起來像這樣： 現在我的目標是能夠縮放白色部分，但它仍應留在該箭頭內 。 現在奇怪的是，我無法弄清楚如何將白色部分移回正確的位置。 我嘗試了不同的嘗試。 這是我當前的代碼（它適用於scaleFactor 1，但不適用於其他任何代碼）：

var draw = SVG('arrow').size(500, 500);
    var arrowPath=draw.polyline('10,243.495 202.918,15.482 397.199,245.107').fill('none').stroke({ width: 20 });

    var arrow=draw.group();
    arrow.add(arrowPath.clone());

    var scaleFactor=0.5;

    var fillArrow=draw.path('M357.669,198.387c-41.747,35.357-95.759,56.678-154.751,56.678c-58.991,0-113.003-21.32-154.75-56.676l154.75-182.907  L357.669,198.387z');
    fillArrow.fill('#ffffee');
    var moveX=(arrowPath.width()/2-fillArrow.width()/2)/scaleFactor+9.5;
    console.log(moveX);
    fillArrow.center(arrowPath.cx(), arrowPath.cy()).scale(scaleFactor);
//another attempt was
fillArrow.move(moveX,0);

Answer 1

在SVG中縮放，旋轉和平移時，您正在執行坐標變換。 也就是說，實際上您不是在更改要繪制的對象，而是要在其中繪制對象的坐標系。可以將其視為像素在屏幕上具有一定的大小，如果您執行svgObject.scale(0.5)該像素變成一半的大小。

因此，如果您按path('M10,10 L20,10 L20,20 L10,20 z')繪制正方形path('M10,10 L20,10 L20,20 L10,20 z')然后應用scale(0.5) ，則看起來就像您繪制的路徑看起來像path('M5,5 L10,5 L10,10 L5,10 Z')

一開始聽起來可能很奇怪，但是當您執行此操作時，許多幾何計算會變得更加簡單。

您想要圍繞箭頭的尖端縮放（確保不會移動）。 然后，應將該點放置在origo (0,0)並圍繞該點繪制對象。 分組進行。 因為這樣您才能將組坐標系平移到正確的位置。

var draw = SVG('arrow').size(600, 600);

// create a group
var arrow = draw.group();

// Draw the arrow path in the group
// I have placed the "tip" of the arrow in (0,0)
var arrowPath = arrow.polyline('-250,250 0,0 250,250').fill('none').stroke({
    width: 20
});

// Draw the fill arrow in the group. Again, the point 
// I which to scale around is placed at (0,0)
var fillArrow = arrow.path('M0,0L150,150,-150,150z').fill('#ffffee');

// Move the group to the position we like to display it in the SVG
arrow.move(260, 20);

var scaleFactor = 0.5
fillArrow.scale(scaleFactor);

這是一個工作示例，您可以在其中測試和更改比例因子。 http://jsfiddle.net/ZmGQk/1/

這是有關平移，旋轉和縮放如何工作的很好的解釋。 http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System