3

我有一个大画布包裹在一个较小的 div 容器中，并隐藏了溢出。

我想创建一个（假 div/css 甚至画布？）滚动条来移动包装器内的画布位置，就好像它是一个真实的（溢出：自动）滚动条一样。

首先，我试图实现的目标是否可行？

我可以用 javascript 在包装器内“移动”我的画布位置吗？

为什么是假滚动条？

  • 画布是一个“活动”区域，用户可以在其中绘制和移动形状。

  • 原生滚动条在 ipad 上不起作用。

  • CSS 自定义

我看到很多 Jquery 库在做类似的事情，但它们使内容可拖动，而我只希望滚动条“栏”是可拖动的。

这是我尝试的演示：

http://jsbin.com/otinuy/1/edit

4

2 回答 2

5

是的，您只需要使画布的左侧位置与水平滚动条“栏”的左侧位置相关，如下所示

令 W 为画布的宽度，令 D 为包含 div 和滚动条的宽度，B 为滚动条“条”的宽度。W>D

相对于包含 div 的初始值，画布的左侧为 0，并且滚动条的“bar”为 left=0。

可查看的画布比例为 D/W，因此 B=D*D/W

“条”左侧边缘的范围是 0 到 DB，随着“条”向右移动，画布按比例向左移动。

令 L 为滚动条左侧边缘的“条”的当前位置，移动的分数为 L/D，因此画布向左移动 L*W/D

即当 (bar).style.left= L (canvas).style.left=-L*W/D

这是一个使用 JQuery 的小提琴，希望能满足您的要求。

http://jsfiddle.net/GdsEa/

Javascript代码如下所示

var W=2000;
var D=500;
var B=D*D/W;
document.getElementById("wrap1").style.width=D+"px";
document.getElementById("hbar").style.width=B+"px";
var canv=document.getElementById("mycanvas");
canv.width=W;
var ctx=canv.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.closePath();
ctx.fillStyle="rgb(255,0,0)";
ctx.fill();

ctx.beginPath();
ctx.moveTo(W-100,100);
ctx.lineTo(W,100);
ctx.lineTo(W,200);
ctx.lineTo(W-100,200);
ctx.closePath();
ctx.fillStyle="rgb(0,0,255)";
ctx.fill();

$( ".bar" ).draggable({ containment:"parent" });
$( ".bar" ).on( "drag", function( event, ui ) {var L=ui.position.left;
                                               canv.style.left=(-L*W/D)+"px"} );

请注意，包含 div、canvas、scrollbar 和 bar 的宽度在代码中通过设置 W 和 D 被覆盖，以便于更改这些值。

于 2013-02-18T21:19:18.877 回答
2

要在大于屏幕的画布上导航，您可以将大画布放在屏幕外，然后在屏幕上放置第二个较小的画布。

通过显示较大画布的一部分，第二个画布就像一个进入较大画布的视口。

您可以创建导航系统以允许用户通过视口滚动浏览更大的画布。

这是代码和小提琴：http: //jsfiddle.net/m1erickson/BBwW8/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctxCanvas=canvas.getContext("2d");
        var view=document.getElementById("view");
        var ctxView=view.getContext("2d");

        var col=0;
        var row=0;

        var img=new Image();
        img.onload=function(){
            ctxCanvas.drawImage(this,0,0,canvas.width,canvas.height);
            drawToViewport();
        }
        img.src="http://www.gospelgifs.com/art_pages_15/imgs/house2.gif";

        $("#left").click(left);
        $("#right").click(right);
        $("#up").click(up);
        $("#down").click(down);

        function drawToViewport(){
            ctxView.clearRect(0,0,view.width,view.height);
            ctxView.drawImage(canvas,
                col*canvas.width/4,row*canvas.height/4,view.width,view.height,
                0,0,view.width,view.height);   
        }
        function right(){
            if(col+1<=3){ col++; drawToViewport(); }
        }
        function left(){
            if(col-1>=0){ col--; drawToViewport(); }
        }
        function down(){
            if(row+1<=3){ row++; drawToViewport(); }
        }
        function up(){
            if(row-1>=0){ row--; drawToViewport(); }
}

    }); // end $(function(){});
</script>

</head>

<body>

<canvas id="canvas" width=300 height=300></canvas><br/>
<canvas id="view" width=97 height=67></canvas>
<button id="left">Left</button>
<button id="right">Right</button>
<button id="up">Up</button>
<button id="down">Down</button>


</body>
</html>
于 2013-02-18T19:07:02.890 回答