如何重置HTML5的axix Canvas

我對html5非常陌生。事實上，這是我的第一份工作。如何重置HTML5的axix Canvas

我正在研究一個小項目。該項目的一部分是讀出已經在它

<Graphic> 
    <object_type>LINE</object_type> 
    <field_1>3.6082475185394287</field_1> 
    <field_2>541.23712158203125</field_2> 
    <field_3>28.86598014831543</field_3> 
    <field_4>474.48452758789062</field_4> 
    <field_6 /> 
    <field_7 /> 
    <field_8 /> 
    <field_9 /> 
    </Graphic> 
    <Graphic> 
    <object_type>LINE</object_type> 
    <field_1>10.824742317199707</field_1> 
    <field_2>562.8865966796875</field_2> 
    <field_3>3.6082475185394287</field_3> 
    <field_4>541.23712158203125</field_4> 
    <field_6 /> 
    <field_7 /> 
    <field_8 /> 
    <field_9 /> 
    </Graphic>

形狀讀取XML文件，我公司通過座標迭代後的XML文件。並在html5畫布上繪製該對象。

我有兩個麻煩....

1）照片被畫倒掛...所以我需要旋轉畫布 Image can be viewed here

2）我需要縮放整個對象在畫布內。現在我將每個座標除以8來縮小它。我怎麼能根據屏幕分辨率和畫布縮放...

做數學位後不能讓我的頭圍繞這個

來源

2013-06-26 A Gilani

如果你能夠獲取對象的寬度和高度，你只需要計算與畫布比例因子：

var scaleFactorW = canvas.width/obj.width, 
    scaleFactorH = canvas.height/obj.height; 

context.scale(scaleFactorW , scaleFactorH); 
startDrawing(obj);

看到這個DEMO在jsfiddle.net

編輯：

爲了保持不同畫布分辨率的對象比例，我們需要計算比例因子，以根據畫布寬高比和對象比例驗證最大比例。

var canvasAspectRatio = canvas.width/canvas.height; 
var objAspectRatio = obj.width/obj.height; 

var scaleFactor = 1; 

if (canvasAspectRatio > objAspectRatio) {   
    scaleFactor = canvas.height/obj.height;   
} else { 
    scaleFactor = canvas.width/obj.width;   
} 
context.scale(scaleFactor, scaleFactor); 

startDrawing(obj)

來源

2013-06-26 14:49:18

感謝您的回覆......我能夠在您提供的幫助下完成所有工作。不過，我仍然面臨幾個問題... 1）當頁面第一次加載時，我檢查屏幕的寬度和高度，並相應地調整我的畫布大小。那麼當有人調整窗口大小時，我正在調整畫布的大小......這樣做是因爲您提供的縮放方法會使圖形變扁。我已經嘗試重畫，仍然是同樣的問題...任何洞察力 –

在上面的例子中，我不在乎長寬比。無論是畫布的縱橫比，我只是將對象放在畫布上。所以，我會嘗試更新答案來做到這一點。 –

@agilani：回答更新（包括小提琴）。 –

找到答案的第一個問題...

我的畫布是

<canvas id="myCanvas" width="800" height="500" style="background: #FFFFFF; border: 5px solid black;" role="img"> 
     Your browser does not support the canvas element. 
    </canvas>

和JavaScript成爲...

 startDrawing(obj); 

     // rotate 180 degrees clockwise 
     context.rotate(180*(Math.PI/180)); 

     // translate context to opposite of your actual canvas 
     context.translate(-800, -500);

還是需要回答第二個問題....縮放

來源

2013-06-26 13:27:39

如何重置HTML5的axix Canvas

回答

相關問題