讓半圈多橢圓

我有灰色的弧形和藍色/綠色弧線。

我試圖讓他們更橢圓型，如：

enter image description here

，我沒有成功。

我讀這一個：http://jsbin.com/ovuret/2/edit，並試圖使我的jsfiddle，但我沒有成功，因爲圓弧-S在功能繪：DrawCircle和DrawEllipseForProjection。有兩個功能：blueArc和grayarc。通過radian angle，函數circleInArc中有一個計算，它將圓弧中的小的淺藍色圓圈和小灰色圓圈（當您將鼠標懸停在畫布上時）放置在圓弧中。

我希望這些功能在更改後工作，但我沒有成功。

這些都是藍色和灰色圓弧S：

function grayArc(strokeColor, cx, cy, radius, ctx, linewidth) { 
    ctx.beginPath(); 
    ctx.arc(cx, cy, radius, Math.PI, Math.PI * 2); 
    ctx.lineWidth = linewidth; 
    ctx.strokeStyle = strokeColor; 
    ctx.stroke(); 
} 

function blueArc(strokeColor, radianStart, radianEnd, cx, cy, radius, ctx, linewidth) { 
    ctx.beginPath(); 
    ctx.arc(cx, cy, radius, radianStart, radianEnd); 
    ctx.lineWidth = linewidth; 
    ctx.strokeStyle = strokeColor; 
    ctx.stroke(); 
}

，這是circleInArc功能：

function circleInArc(fillColor, radianAngle, cx, cy, radius, ctx, linewidth) { 
    var x = cx + radius * Math.cos(radianAngle); 
    var y = cy + radius * Math.sin(radianAngle); 
    ctx.beginPath(); 
    ctx.arc(x, y, linewidth/2, 0, Math.PI * 2); 
    ctx.closePath(); 
    ctx.fillStyle = fillColor; 
    ctx.fill(); 
    return ({ 
     x: x, 
     y: y, 
     radius: linewidth/2 
    }); 
}

任何幫助表示讚賞！

來源

2013-12-16 Alon Shmiel

你可以試着畫弧半徑更大而不是從Math.PI 2 * Math.PI但是這一次

ctx.arc(cx, cy, radius, Math.PI*5/4, Math.PI * 7/4);

，不要忘記上下移動的圓弧半徑爲大小

grayArc("rgb(177,177,177)", cx, cy+radius, radius*2, ctx, linewidth);

希望這將有助於

來源

2013-12-16 12:44:01 IgorCh

我周圍有點擺弄，你會propably不得不調整一些值，但這裏有一個例子：Fiddle（只有灰色的弧形調整）

基本策略是保存上下文的狀態，然後根據自己的喜好縮放它。如果你只能縮放一個軸..voilá，省略號。

另外，在縮放之前，我將畫布的原點翻譯爲圓弧的中心，因爲它們會與縮放比例相關。圓弧的中心是0, 0。

之後，上下文可以像任何事情一樣恢復，你可以撫摸你的變形弧。

ctx.save(); 
ctx.translate(cx,cy); 
ctx.scale(1.3, 1); 
ctx.arc(0, 0, radius, 1.2*Math.PI, 1.8*Math.PI); 
ctx.restore();

你會想要玩弄半徑，比例縮放比例以及弧線的範圍，以適應你的需求。

編輯：我減少了繪製的弧的範圍，以防止省略號的粗短末端顯示。在當前情況下，從1.2*PI到1.8*PI而不是1*PI to 2*PI似乎看起來沒問題。 :)

對於將來的問題，請嘗試提取您的問題的一個更基本的例子，以幫助那些想要幫助的人更容易。 :)

來源

2013-12-16 12:45:19 MildlySerious

讓半圈多橢圓

回答

相關問題