오버플로 위조 스크롤 막대 : hidden

오버플로가 숨겨진 작은 div 컨테이너 안에 큰 캔버스가 있습니다.오버플로 위조 스크롤 막대 : hidden

실제 (오버플로 : 자동) 스크롤바 인 것처럼 래퍼 내부에서 캔버스 위치를 이동하려면 (가짜 div/CSS 또는 심지어 캔버스?) 스크롤바를 만들고 싶습니다.

먼저 내가 달성하려고하는 것은 실현 가능합니까?

javascript를 사용하여 래퍼 내 캔버스 위치를 옮길 수 있습니까?

왜 가짜 스크롤 막대입니까?

캔버스는 사용자가 모양을 그릴 수있는 '활성'영역입니다.
기본 스크롤바는 ipad에서 작동하지 않습니다.
CSS는 사용자 정의

나는 비슷한 일을 JQuery와 libs와 많이 보았다하지만 난 단지 스크롤 "바"드래그로 원하는 반면, 그들은 콘텐츠를 드래그합니다.

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

출처

2013-02-18 coulix

보자 W를 다음과 같이 예는 캔버스의 왼쪽 위치를 구성하는 수평 스크롤 "바"의 왼쪽 위치에 관계 필요 캔버스의 너비를 D, 포함 div의 너비와 스크롤 막대, B를 스크롤 막대 "바"의 너비로합니다. W> D

포함 div에 상대적인 시작 부분 캔버스의 왼쪽은 0이고 "막대"는 스크롤 막대에 대해 0을 유지합니다.

볼 캔버스 분획 은 "바"의 왼쪽 끝의 범위 DB와 같이 0

은 "바"오른쪽으로 이동 W

D/W 등 B = D * D/IS 캔버스가 왼쪽으로 비례하여 이동합니다.

하자 L은 스크롤 바의 왼쪽 에지에서 "바"의 현재 위치 일 이동 분획은 L/D이고 그래서 캔버스 왼쪽

에 L의 * W/d를 이동 즉 때 (bar) .style.left = L (캔버스). 스타일.왼쪽 = -L * W/D

다음은 JQuery를 사용하여 잘하면 필요한 것을 수행하는 바이올린입니다.

http://jsfiddle.net/GdsEa/

자바 스크립트 코드

가되도록 이들 변화하기 쉬운 컨테이너 div, 캔버스, 스크롤 바의 폭 W 및 D 설정 코드에 겹쳐 있는지

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"});

참고 아래 도시 값.

출처

2013-02-18 21:19:18 jing3142

위대한, 그게 내가 찾고 있었는데, 지금은 그냥 이벤트를 연결하고 내가 태블릿에 요소를 드래그 할 수 있는지 확인해야합니다. – coulix

는보다 큰 화면 캔버스 탐색 들어, 오프 스크린 당신의 큰 캔버스를 가지고 다음 두 번째 작은 캔버스 화면을 가질 수 있습니다 : 여기

내 시도의 데모입니다.

두 번째 캔버스는 큰 캔버스의 부분을 표시하여 큰 캔버스에 뷰포트 역할을합니다.

사용자가 뷰포트를 통해 더 큰 캔버스를 스크롤 할 수 있도록 내비게이션 시스템을 만들 수 있습니다.

는 다음 코드와 바이올린의 : 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

그렇습니다. 일반적인 비 대화 형 캔버스의 경우 좋은 해결책이지만, fabricj를 사용하는 제 카사에서는 뷰포트에서 개체를 조작 할 수 있어야합니다. ImageData 복사는 표시 부분 만 처리합니다. – coulix

오버플로 위조 스크롤 막대 : hidden

답변

관련 문제