Raphael.JS 为什么要创建尺寸为 1000x1000 的纸张？

发布于 2024-10-11 05:14:46 字数 1429 浏览 8 评论 0原文

我有一个使用 raphael.js 的演示。它的代码非常简单，但是当在 Internet Explorer（小于版本 9）中查看时，我得到一个 1000px x 1000px 的 Raphael 画布，我不明白为什么。我正在使用 Raphael 的 1.5.2 版本。代码如下：

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Raphael Test</title>
    <link rel="stylesheet" type="text/css" href="test.css">
    <link href="../shared/img/favicon.png" rel="shortcut icon">
  </head>
  <body>
    <div id="graph"></div>
    <script src="../shared/js/raphael/raphael-min.js" type="text/javascript"> </script>
    <script src="test.js" type="text/javascript"> </script>
  </body>
</html>

CSS

/* Graph */
#graph { padding: 5px; width: 477px; height: 299; }

var holder = document.getElementById('graph')
  , width = holder.scrollWidth
  , height = Math.round(width * 0.5625) + 25
  , p = Raphael(10, 50, width, height)
  , c = p.circle(p.width - 50, p.height - 50, 50);
alert(p.width + ' & ' + p.height);

我在 Raphael 的 Google 小组也有同样的问题，但没有解决方案。

原文

I have a demo using raphael.js. The code for it is very simple but when viewed in Internet Explorer (less that version 9) I get a Raphael canvas that is 1000px by 1000px and I can't figure out why. I'm using version 1.5.2 of Raphael. Code below:

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Raphael Test</title>
    <link rel="stylesheet" type="text/css" href="test.css">
    <link href="../shared/img/favicon.png" rel="shortcut icon">
  </head>
  <body>
    <div id="graph"></div>
    <script src="../shared/js/raphael/raphael-min.js" type="text/javascript"> </script>
    <script src="test.js" type="text/javascript"> </script>
  </body>
</html>

CSS

/* Graph */
#graph { padding: 5px; width: 477px; height: 299; }

var holder = document.getElementById('graph')
  , width = holder.scrollWidth
  , height = Math.round(width * 0.5625) + 25
  , p = Raphael(10, 50, width, height)
  , c = p.circle(p.width - 50, p.height - 50, 50);
alert(p.width + ' & ' + p.height);

I found a discussion in Raphael's Google group with the same problem but no resolution.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

献世佛 2024-10-18 05:14:46

我遇到了同样的问题，并使用

var width = paper.canvas.clientWidth ? paper.canvas.clientWidth : paper.width;
var height = paper.canvas.clientHeight ? paper.canvas.clientHeight : paper.height;

而不是 paper.width 和 paper.height 解决了早于版本 9 的 ie 和所有其他浏览器的问题。

I had the same problem and using

var width = paper.canvas.clientWidth ? paper.canvas.clientWidth : paper.width;
var height = paper.canvas.clientHeight ? paper.canvas.clientHeight : paper.height;

instead of paper.width and paper.height solved it for ie older than version 9 and all the other browsers.

回复收藏 0 原文

~没有更多了~