라파엘 기반 캔버스 주위에 스크롤바를 배치하는 방법

Lolveley

나는 이것이 고전적인 질문이라고 생각한다. 웹 페이지의 큰 캔버스를 고려할 때 스크롤바가있는 작은 DIV에 어떻게 넣을 수 있습니까? 스택 오버플로에서 이와 같은 질문을 많이 찾았지만 초보자이므로 IDE에서 예제를 재현 할 수 없습니다.

여기에 몇 가지 답변이 있습니다.- 여기

- 그리고 여기

다음은 내 작동하지 않는 코드입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <title></title>
    <script type="text/javascript" src="raphael-min.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

        function graphiques(){

        var paper = Raphael('holder', 800, '100%');
        // add your graphics to the paper object here
        var rect=paper.rect(50,50,70,20,5).attr("fill":"#cc3");
        var height = $(paper.canvas).outerHeight();
        paper.setSize(800, height);
        $(paper.canvas).parent().height("100px");
  }
    </script>
  </head>
  <body onload="graphiques();">
      <div id="holder" style="overflow-y:auto;overflow-x:auto;">
      <script>graphiques();</script>
      </div>

  </body>
</html>

내 질문은 : 작동하려면 어떤 변경을해야합니까? 내 코드가 잘못된 방향으로 진행되면 올바른 방법은 무엇입니까 (코드를 사용하면 고급 자바 스크립트 사용자입니다!)

감사

올리비에

Lolveley

해결 :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Rapha�l tutorial - Getting Started - Example 1</title>
<script type="text/javascript" src="raphael-min.js"></script>
<style type="text/css">
  #paper1{
    width: 100px;
    height: 100px;
    overflow: auto;
  }
</style>
</head>
<body>
<div id="paper1"></div>
<!-- the html element where to put the paper -->
<!-- a script that create's a paper and a rectangle -->
<script type="text/javascript">
var paper = Raphael("paper1", 500,500);

var rect1 = paper.rect(20,30,500,500).attr({fill: "orange"});

</script>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

캔버스 크기에 맞게 tkinter 스크롤바 크기를 업데이트하는 방법

분류에서Dev

모바일 및 데스크톱 장치에서 캔버스 크기를 조정하는 방법

분류에서Dev

캔버스를 만드는 방법-마우스 위치에 따라 채우기 및 채우기 요소

분류에서Dev

배경 이미지 위에 캔버스를 중앙에 배치하는 방법

분류에서Dev

HTML5 캔버스 옆에 div를 배치하는 방법

분류에서Dev

슬라이더를 사용하여 HTML에서 캔버스 브러시 크기를 변경하는 방법

분류에서Dev

Python 3.8을 사용하여 Tkinter에서 캔버스에 스크롤바를 만드는 방법

분류에서Dev

자바 스크립트에서 strokeStyle 캔버스에 그라디언트를 추가하는 방법

분류에서Dev

CSS : 스크롤바를 가져 오는 대신 창을 사용하여 수평으로 크기를 조정하기 위해 배치 된 div를 얻는 방법

분류에서Dev

오버플로를 숨기는 방법 : 가운데 div에서 스크롤바 스크롤

분류에서Dev

캔버스 Easeljs의 포인트 위에 툴팁을 배치하는 방법

분류에서Dev

openshift에 배포하기 전에 플라스크 기반 서버를 로컬로 실행하는 방법

분류에서Dev

스크롤 가능한 브라우저 창 내 캔버스 (위치 잡기)

분류에서Dev

오버플로 스크롤에서 스크롤바를 제어하는 방법

분류에서Dev

인라인 CSS 만 사용하여 이미지 위에 스크롤 상자를 배치하는 방법

분류에서Dev

스크롤 할 위치가 없을 때 Microsoft Chrome에서 오버플로 스크롤바를 숨기는 방법은 무엇입니까?

분류에서Dev

더 큰 jframe에 작은 캔버스를 중앙에 배치하는 방법

분류에서Dev

캔버스에서 거북이를 튕기는 방법

분류에서Dev

자바 스크립트를 사용하여 반응 형 시차 사이트에서 요소의 완료된 스크롤 위치를 결정하는 방법

분류에서Dev

기능을 파괴하지 않고 브라우저 간 스크롤바를 숨기는 방법

분류에서Dev

화면 크기에 따라 캔버스 크기를 올바르게 조정하는 방법은 무엇입니까? 자바 스크립트 (p5.js) [해결됨]

분류에서Dev

캔버스 크기를 조정하는 방법

분류에서Dev

버전 16.04 이상에서 스크롤바 숨기기를 비활성화하는 방법

분류에서Dev

버전 16.04 이상에서 스크롤바 숨기기를 비활성화하는 방법

분류에서Dev

Python에서 IP 주소를 기반으로 서버 위치를 얻는 방법

분류에서Dev

위치를 얻는 방법 : 고정; 스크롤바 동작

분류에서Dev

Flutter 캔버스, 자식 위젯 위에 칠하는 방법?

분류에서Dev

캔버스에서 도형을 주문하는 방법-JavaScript

분류에서Dev

배열에 배치하기 위해 자바 스크립트 문자열을 패턴 분할하는 방법

Related 관련 기사

  1. 1

    캔버스 크기에 맞게 tkinter 스크롤바 크기를 업데이트하는 방법

  2. 2

    모바일 및 데스크톱 장치에서 캔버스 크기를 조정하는 방법

  3. 3

    캔버스를 만드는 방법-마우스 위치에 따라 채우기 및 채우기 요소

  4. 4

    배경 이미지 위에 캔버스를 중앙에 배치하는 방법

  5. 5

    HTML5 캔버스 옆에 div를 배치하는 방법

  6. 6

    슬라이더를 사용하여 HTML에서 캔버스 브러시 크기를 변경하는 방법

  7. 7

    Python 3.8을 사용하여 Tkinter에서 캔버스에 스크롤바를 만드는 방법

  8. 8

    자바 스크립트에서 strokeStyle 캔버스에 그라디언트를 추가하는 방법

  9. 9

    CSS : 스크롤바를 가져 오는 대신 창을 사용하여 수평으로 크기를 조정하기 위해 배치 된 div를 얻는 방법

  10. 10

    오버플로를 숨기는 방법 : 가운데 div에서 스크롤바 스크롤

  11. 11

    캔버스 Easeljs의 포인트 위에 툴팁을 배치하는 방법

  12. 12

    openshift에 배포하기 전에 플라스크 기반 서버를 로컬로 실행하는 방법

  13. 13

    스크롤 가능한 브라우저 창 내 캔버스 (위치 잡기)

  14. 14

    오버플로 스크롤에서 스크롤바를 제어하는 방법

  15. 15

    인라인 CSS 만 사용하여 이미지 위에 스크롤 상자를 배치하는 방법

  16. 16

    스크롤 할 위치가 없을 때 Microsoft Chrome에서 오버플로 스크롤바를 숨기는 방법은 무엇입니까?

  17. 17

    더 큰 jframe에 작은 캔버스를 중앙에 배치하는 방법

  18. 18

    캔버스에서 거북이를 튕기는 방법

  19. 19

    자바 스크립트를 사용하여 반응 형 시차 사이트에서 요소의 완료된 스크롤 위치를 결정하는 방법

  20. 20

    기능을 파괴하지 않고 브라우저 간 스크롤바를 숨기는 방법

  21. 21

    화면 크기에 따라 캔버스 크기를 올바르게 조정하는 방법은 무엇입니까? 자바 스크립트 (p5.js) [해결됨]

  22. 22

    캔버스 크기를 조정하는 방법

  23. 23

    버전 16.04 이상에서 스크롤바 숨기기를 비활성화하는 방법

  24. 24

    버전 16.04 이상에서 스크롤바 숨기기를 비활성화하는 방법

  25. 25

    Python에서 IP 주소를 기반으로 서버 위치를 얻는 방법

  26. 26

    위치를 얻는 방법 : 고정; 스크롤바 동작

  27. 27

    Flutter 캔버스, 자식 위젯 위에 칠하는 방법?

  28. 28

    캔버스에서 도형을 주문하는 방법-JavaScript

  29. 29

    배열에 배치하기 위해 자바 스크립트 문자열을 패턴 분할하는 방법

뜨겁다태그

보관