как разместить полосы прокрутки вокруг холста на основе Рафаэля

Question

как разместить полосы прокрутки вокруг холста на основе Рафаэля

0

Я думаю, что это классический вопрос: учитывая большой холст на веб-странице, как я могу поместить его в маленький 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>

мой вопрос: какие изменения мне нужно сделать, чтобы заставить его работать? и если мой код идет в неправильном направлении, то какой правильный метод (с кодом, пожалуйста, я чистый продвинутый пользователь javascript!)

благодаря

оливье

lolveley 11 нояб. 2013, в 14:46

Источник

Теги:

javascript

html

css

raphael

1 ответ

Ещё вопросы

lolveley · Accepted Answer · 2013-11-11T10-50-00.000Z

решил:

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