如何在基于拉斐尔的画布周围放置滚动条

how to put scrollbars around a raphael based canvas

本文关键字：布周围 滚动条 于拉斐      更新时间：2023-09-26

我认为这是一个经典的问题：考虑到网页中的大画布，如何将其放在带有滚动条的小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用户！

谢谢

奥利维尔

求解：

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

相关文章：