Question

我正在使用可视化arborjs，我正在尝试实现缩放功能。这不包含在可视化本身中，所以我不得不尝试一些不同的方法。

我不能使用html5 canvasfunction .scale因为这样，可视化给出的位置不再与实际位置匹配。目前我只是增加画布的高度和宽度来放大。这不会给定位问题带来任何问题，但我无法在画布中滚动。

我必须解决的唯一问题是使这项工作的滚动功能。所以我的问题是：当画布变得太大时，我可以向画布添加滚动条。最初画布的宽度为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%;
}

Answer 1

使用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）

Answer 2

我不能使用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（），但这样做是为了节省绘图时间你的比率（或你的坐标）不是整数。

Answer 3

我的解决方案是附加一个覆盖画布的<div>(position:absolute)。如果canvas具有交互性，那就不好了。

如果画布太大，画布的scrollfunction

3 个答案: