Как можно объединить rafael.js и paper.js в одном html?
Пока я пытался использовать две библиотеки (rafael.js и paper.js) на одной html-странице, я получал различные ошибки.
Случай 1. Uncaught ReferenceError: Рафаэль не определен. В файле "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: ошибка Uncaught: невозможно найти холст с идентификатором "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>
Та же самая ошибка также произошла, когда у меня был rafael и бумажный код в одном файле.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" является аналогичным.
1 ответ
Во всех случаях, которые вы упомянули, скрипт-тег для myrafaelpaper.js не закрыто (</script>).