javascript – 如果画布太大,画布的scrollfunction

发布时间：2020-12-14 22:46:08 所属栏目：资源来源：网络整理

导读：我正在使用可视化arborjs,我正在尝试实现缩放功能.这不包含在可视化本身中,所以我不得不尝试一些不同的方法. 我不能使用html5 canvasfunction .scale,因为可视化给出的位置不再与实际位置匹配. 目前我只是增加画布的高度和宽度来放大.这不会给定位问题带来任

我正在使用可视化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)

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!