如何将rafael.js和paper.js合并到一个html中？

debugcn 发表于 Dev

达里乌斯·米利亚斯卡斯（Darius Miliauskas）

当我试图在一个html页面中使用两个库（rafael.js和paper.js）时，出现了各种错误。

情况1. Uncaught ReferenceError：未定义Raphael。在文件“ rafael.js”中，该行：

var paper = Raphael(0, 0, 320, 200);

是错误的原因。但显然它是用html导入的：

<head>
...
<script src="js/paper-full.js" type="text/javascript"></script>
<script src="js/mypaper.js" type="text/paperscript" canvas="myCanvas">
</head>
<body>
<script src="js/rafael.js" type="text/javascript"></script>
<canvas id='myCanvas' resize></canvas>
<script src="js/myrafael.js"></script>
...
</body>

情况2。paper.js输出：未捕获错误：无法找到ID为“ myCanvas”的画布，但是画布在那里。这是html：

<head>
...
<script src="js/rafael.js" type="text/javascript"></script>
<script src="js/paper-full.js" type="text/javascript"></script>
<script src="js/mypaper.js" type="text/paperscript" canvas="myCanvas">
</head>
<body>
<canvas id='myCanvas' resize></canvas>
<script src="js/myrafael.js"></script>
...
</body>

当我在一个.js文件（“ myrafaelpaper.js”）中放置了拉斐尔和纸质代码时，尽管存在myCanvas，但也发生了同样的错误：

<head>
...
<script src="js/rafael.js" type="text/javascript"></script>
<script src="js/paper-full.js" type="text/javascript"></script>
<script src="js/myrafaelpaper.js" type="text/paperscript" canvas="myCanvas">
</head>
<body>
<canvas id='myCanvas' resize></canvas>
<script src="js/myrafaelpaper.js"></script>
...
</body>

另外，它们工作正常。

“ myrafaelpaper.js”在这里：

//rafael.js part
var paper = Raphael(0, 0, 320, 200);
var circle = paper.circle(0, 30, 50);
circle.attr("fill", "#f00");
console.log(circle.isPointInside(50, 30));

//paper.js part
var pathData = 'M100,50c0,27.614-22.386,50-50,50S0,77.614,0,50S22.386,0,50,0S100,22.386,100,50';
var path = new Path(pathData);
path.strokeColor = 'red';
path.strokeWidth = 5;
path.position+= new Point(100, 50);
path.segments[3].point.selected=true;

“ myrafael.js”和“ mypaper.js”的内容是类推的。

大安

在您提到的所有情况下，的脚本标签myrafaelpaper.js都没有关闭（</script>）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。