Question

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

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

首先，我正在尝试实现的是可行的吗？

我可以使用javascript将我的画布位置移动到包装器中吗？

为什么假滚动条？

画布是一个“活动”区域，用户可以在其中绘制和移动形状。
原生滚动条在ipad上不起作用。
Css自定义

我看到很多Jquery libs做类似的事情，但是他们让内容可以拖动，而我只希望滚动条“bar”可以拖动。

以下是我的尝试演示：

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

Answer 1

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

设W为画布的宽度，让D为包含div和滚动条的宽度，B为滚动条“bar”的宽度。 W＆GT; d

相对于包含div的Initiall，画布的左边是0，滚动条的“bar”左边= 0。

可查看画布的分数是D / W，因此B = D * D / W

“bar”的左手边缘范围是0到D-B，当“bar”向右移动时，画布按比例向左移动。

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

即（bar）.style.left = L（画布）.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"} );

请注意，通过设置W和D可以在代码中覆盖包含div，画布，滚动条和条的宽度，以便更改这些值。

Answer 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>

溢出时假滚动条：隐藏

2 个答案: