Поддельная полоса прокрутки при переполнении: скрытая

У меня есть большой холст, обернутый внутри контейнера меньшего размера с переполнением.Поддельная полоса прокрутки при переполнении: скрытая

Я хотел бы создать полосу прокрутки (fake div/css или даже canvas?), Чтобы переместить позицию холста внутри обертки так, как если бы она была реальной (переполненной: автоматической) полосой прокрутки.

Во-первых, это то, что я пытаюсь достичь, возможно?

Могу ли я «переместить» позицию моего холста внутри обертки с помощью javascript?

Почему поддельная полоса прокрутки?

Холст - это «активная» область, где пользователь может рисовать и перемещать фигуры.
Натурные полосы прокрутки не работают на ipad.
Css настройка

Я видел много Jquery LIBS делают подобные вещи, но они делают содержание перетаскиваемым тогда я только хочу, чтобы полоса прокрутки «бар», чтобы быть перетаскиваемым.

Вот демо моей попытки:

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

источник

2013-02-18 coulix

Да вам просто нужно сделать левую позицию холста относятся к левой позиции горизонтальной полосы прокрутки «бар» следующим

Пусть W быть шириной холста, пусть D - ширина содержащего div и полосы прокрутки, а B - ширина полосы прокрутки «bar». W> D

Исходное значение относительно содержащего div слева от холста равно 0, а для «полосы» слева - 0 для полосы прокрутки.

Доля холста видимой является Д/Ш и так В = Д * Д/Ш

Диапазон левой кромки «бар» составляет от 0 до БД и как «бар» перемещается вправо холст перемещается влево пропорционально.

Пусть Ь текущее положение «бар» от левого края полосы прокрутки, фракция перемещается является 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 так, что легко изменить эти значения.

источник

2013-02-18 21:19:18 jing3142

Отлично, это то, что я искал, теперь мне просто нужно подключить некоторые события и посмотреть, могу ли я перетащить элемент на планшеты. – coulix

Для навигации по большей, чем экран холста, вы можете иметь свой большой холст закадровый а затем второй меньший холст на экране.

Второй холст действует как видовой экран на большой холст, отображая участок более крупного холста.

Вы можете создать навигационную систему, чтобы пользователь мог прокручивать большой холст через окно просмотра.

Вот код и Fiddle: 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-18 19:07:02 markE

Да, это хорошее решение для обычного неинтерактивного холста, но в моем casa с fabricjs мне все равно нужно управлять объектами в окне просмотра. Copy ImageData просто позаботится о части дисплея. – coulix

Поддельная полоса прокрутки при переполнении: скрытая

ответ

Смежные вопросы