畫布的scrollfunction如果畫布太大

我正在使用可視化arborjs，我試圖實現縮放功能。這不包含在可視化本身中，所以我不得不嘗試一些不同的方法。畫布的scrollfunction如果畫布太大

我無法使用html5 canvasfunction .scale，因爲由此可視化給出的位置與實際位置不再匹配。目前，我只是增加畫布的高度和寬度來放大。這不會給定位問題帶來任何問題，但我無法在畫布中滾動。

我必須解決的唯一問題是scrollfunction使這項工作。所以我的問題是：當畫布變得太大時，我可以向畫布添加滾動條嗎？最初畫布的寬度爲100％，高度爲100％，所以不需要滾動條，但是當我放大這個時，我需要那些滾動條。

我試過CSS樣式溢出：滾動畫布和周圍的div，但沒有結果。

下面是相關代碼：

HTML：

<div class="explore_area"> 
    <canvas class="explore_area" id="viewport"> 
    </canvas> 
</div>

的javascript：

zoom: function(){ 
      var canvas = document.getElementById("viewport"); 
      var ctx = canvas.getContext('2d'); 
      sys.screenSize((canvas.width*1.5), (canvas.height*1.5)); 
     }

CSS：

div.explore_area { 
    position:relative; 
    width:100%; 
    height:600px; 
    overflow:hidden; 
} 

canvas.explore_area{ 
    float:left; 
    height:550px; 
    width:100%; 
}

來源

2011-12-20 Consec

使用css設置畫布的寬度和高度不是一個好主意。爲了達到你所要求的，你不應該在CSS中給出畫布的寬度和高度。即使你改變尺寸的CSS會重置它。

所以首先你需要給維這樣

<canvas class="explore_area" id="viewport" width="400" height="300">

CSS集裝箱

div.explore_area { 
    position:relative; 
    width:400px; 
    height:300px; 
    overflow:auto; 
}

在這裏看到演示：http://jsfiddle.net/diode/sHbKD/22/（不使用arborjs）

來源

2011-12-20 18:40:02 Diode

當你刪除溢出：汽車從你演示，它的工作原理非常感謝你。我的應用程序中的它不起作用。與您的示例唯一不同的是寬度和高度的分配：爲此，我使用像這樣的arbor功能.screenSize： var canvas = document.getElementById（「viewport」）; \t \t \t var ctx = canvas.getContext（'2d'）; （（canvas.width * 1.5），（canvas.height * 1.5））;}} 因爲定位問題 – Consec 2011-12-20 18:53:36

希望你已經刪除了畫布的CSS。僅爲容器div提供css。 – Diode 2011-12-20 19:00:17

我做過了，這是目前css文件的內容： div.explore_area { position：relative; 寬度：100％; height：600px; } canvas.explore_area { } – Consec 2011-12-20 19:05:40

我可以」 t使用html5 canvasfunction .scale，因爲由此，可視化給出的位置與實際位置不再匹配。

你是什麼意思？如果你想畫的圖像相同的地方，但放大，你可以這樣做：

ctx.save(); 
ctx.scale(ratio, ratio); 
ctx.drawImage(myImage, x/ratio, y/ratio) ; 
ctx.restore();

或者，如果你想從圖像的中間放大：

ctx.save(); 
ctx.translate(x + myImage.width/2, y + myImage.height/2); 
ctx.scale(ratio, ratio); 
ctx.drawImage(myImage, - myImage.width/(2*ratio), - myImage.width/(2*ratio)) ; 
ctx.restore();

的Rq：爲了清楚起見，我沒有在drawImage座標上使用Math.floor（），但是在你的比例（或座標）不是整數的情況下，這樣做可以節省繪製時間。

來源

2012-10-24 13:40:09 GameAlchemist

我的解決方案是追加覆蓋畫布的<div>(position:absolute)。如果畫布具有互動性，這並不好。

來源

2014-02-18 03:35:49 fisch

畫布的scrollfunction如果畫布太大

回答

相關問題