我正在使用可视化arborjs,我正在尝试实现缩放功能.这不包含在可视化本身中,所以我不得不尝试一些不同的方法.
我不能使用html5 canvasfunction .scale,因为可视化给出的位置不再与实际位置匹配.
目前我只是增加画布的高度和宽度来放大.这不会给定位问题带来任何问题,但是我无法在画布中滚动.
我必须解决的唯一问题是使这项工作的滚动功能.所以我的问题是：当画布变得太大时,我可以向画布添加滚动条.
最初画布的宽度为100％,高度为100％,因此不需要滚动条,但是当我放大这个时,我需要那些滚动条.
我尝试了css风格的溢出：滚动画布和周围的div,但没有结果.
这是相关代码：
HTML：
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%;
}
最佳答案
使用css设置画布的宽度和高度不是一个好主意.为了达到你的要求,你不应该在css中给出画布的宽度和高度.即使您更改尺寸,css也会重置它.
所以首先你需要给这样的维度
css for container
div.explore_area {
position:relative;
width:400px;
height:300px;
overflow:auto;
}
看这里的演示：http://jsfiddle.net/diode/sHbKD/22/(不使用arborjs)
原文链接：https://www.f2er.com/html/425812.html