Я новичок в paper.js и столкнулся с некоторыми проблемами.
<script type="text/paperscript" canvas="canvas">
function onMouseDrag(event) {
// The radius is the distance between the position
// where the user clicked and the current position
// of the mouse.
var path = new Path.Circle({
center: event.downPoint,
radius: (event.downPoint - event.point).length,
fillColor: 'white',
strokeColor: 'black'
});
// Remove this path on the next drag event:
path.removeOnDrag();
};
</script>
В этом коде (event.downPoint - event.point).length работает хорошо, но я хочу напрямую использовать javascript, поэтому я сделал:
<script type="text/javascript">
paper.install(window);
// Keep global references to both tools, so the HTML
// links below can access them.
var line_tool, circle_tool;
window.onload = function() {
paper.setup('myCanvas');
line_tool = new Tool();
line_tool.onMouseDrag = function (event) {
var path = new Path.Line({
from: event.downPoint,
to: event.point,
strokeColor: 'black'
});
path.removeOnDrag();
};
circle_tool = new Tool();
circle_tool.onMouseDrag = function (event) {
var path = new Path.Circle({
center: event.downPoint,
radius: (event.downPoint - event.point).length,
fillColor: 'white',
strokeColor: 'black'
});
path.removeOnDrag();
};
}
</script>
«Инструмент линии» работает, как и ожидалось, но здесь, в «инструменте круга» (event.downPoint — event.point), возвращается NaN. Я предполагаю, что он пытается сделать «{ x: 110, y: 200 }-{ x: 100, y: 300 }» и терпит неудачу, потому что, очевидно, он ожидает два числа, но в документации Paper.js говорится, что он может обрабатывать векторы в этом формате (и это действительно работает в первом фрагменте кода). Должен ли я каким-то образом вызывать paper.js для расчета операций такого типа? Наверное, это глупо, но я ничего не мог найти о такой ситуации. Есть ли что-то вроде бумаги (//сделайте этот фрагмент кода так, как будто он был частью сценария 'text/paperscript')? Спасибо!
