画布的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如果画布太大

回答

相关问题