Событие OnClick()
При загрузке страницы на канве рисуется фигура и ее можно всячески модифицировать. Надо сделать так, чтобы фигура появлялась при нажатии на кнопку. Рисую на canvas. Использую событие onclick:
<input type="button" value="Blob" onClick="createBlob(center, maxRadius, points)" > , но ничего не происходит <!DOCTYPE html> <html> <head> <title></title> <script src="lib/paper.js" type="text/javascript" charset="utf-8"></script> <script type="text/paperscript" canvas="canvas-1"> var values = { paths: 1, // всего фигур minPoints: 5, // минимум точек на фигуре maxPoints: 5, // макс тосек на фигуре minRadius: 40, maxRadius: 50 }; var hitOptions = { segments: true, stroke: true, // чтобы можно было менять фигуру по точкам fill: true, // сдвинуть фигуру с места tolerance: 5 // насколько алгоритм может отойти от первонач-го пути }; var radiusDelta = values.maxRadius - values.minRadius; var pointsDelta = values.maxPoints - values.minPoints; for (var i = 0; i < values.paths; i++) { var radius = values.minRadius + Math.random() * radiusDelta; var points = values.minPoints + Math.floor(Math.random() * pointsDelta); var path = createBlob(view.size * 0.5, radius, points); // creates a blob on a one place var lightness = 0.5; var hue = 0.56 * 360; // задает цвет фигуры path.style = { fillColor: new HslColor(hue, 0.5, lightness), //design blob strokeColor: path.hue }; }; // creates a blob function createBlob(center, maxRadius, points) { var path = new Path(); // constructor path.closed = true; // connects the first and last segments for (var i = 0; i < points; i++) { var delta = new Point({ length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5), angle: (360 / points) * i }); path.add(center + delta); } path.smooth(); return path; } var segment, path; var movePath = false; function onMouseDown(event) { segment = path = null; var hitResult = project.hitTest(event.point, hitOptions); if (event.modifiers.shift) { if (hitResult.type == 'segment') { hitResult.segment.remove(); }; return; } if (hitResult) { path = hitResult.item; if (hitResult.type == 'segment') { segment = hitResult.segment; } else if (hitResult.type == 'stroke') { var location = hitResult.location; segment = path.insert(location.index + 1, event.point); path.smooth(); } } movePath = hitResult.type == 'fill'; if (movePath) project.activeLayer.addChild(hitResult.item); } function onMouseMove(event) { var hitResult = project.hitTest(event.point, hitOptions); project.activeLayer.selected = false; if (hitResult && hitResult.item) hitResult.item.selected = true; } function onMouseDrag(event) { if (segment) { segment.point = event.point; path.smooth(); } if (movePath) path.position += event.delta; }</script> </head> <!-- Определяет имя класса, которое позволяет связать тег со стилевым оформлением--> <body class="fullscreen"> <input type="button" value="Blob" onClick="createBlob(center, maxRadius, points)" > <div class="canvas"><canvas resize="true" id="canvas-1" style="background:white"></canvas></div> </body> </html> |
Цитата:
|
danik.js,
они объявлены в самом скрипте и они используются при создании фигуры (макс радиус, центр фигуры и количество точек на фигуре(с помощью них фигурой можно манипулировать)) в коде это 25,26,36-48 строки |
Я вижу где они используются. Но где объявлены, и где им задаются значения - нет. Выдает undefined (не определено)
<!DOCTYPE html> <html> <head> <title></title> <script src="lib/paper.js" type="text/javascript" charset="utf-8"></script> <script type="text/paperscript" canvas="canvas-1"> var values = { paths: 1, // всего фигур minPoints: 5, // минимум точек на фигуре maxPoints: 5, // макс тосек на фигуре minRadius: 40, maxRadius: 50 }; var hitOptions = { segments: true, stroke: true, // чтобы можно было менять фигуру по точкам fill: true, // сдвинуть фигуру с места tolerance: 5 // насколько алгоритм может отойти от первонач-го пути }; var radiusDelta = values.maxRadius - values.minRadius; var pointsDelta = values.maxPoints - values.minPoints; for (var i = 0; i < values.paths; i++) { var radius = values.minRadius + Math.random() * radiusDelta; var points = values.minPoints + Math.floor(Math.random() * pointsDelta); var path = createBlob(view.size * 0.5, radius, points); // creates a blob on a one place var lightness = 0.5; var hue = 0.56 * 360; // задает цвет фигуры path.style = { fillColor: new HslColor(hue, 0.5, lightness), //design blob strokeColor: path.hue }; }; // creates a blob function createBlob(center, maxRadius, points) { var path = new Path(); // constructor path.closed = true; // connects the first and last segments for (var i = 0; i < points; i++) { var delta = new Point({ length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5), angle: (360 / points) * i }); path.add(center + delta); } path.smooth(); return path; } var segment, path; var movePath = false; function onMouseDown(event) { segment = path = null; var hitResult = project.hitTest(event.point, hitOptions); if (event.modifiers.shift) { if (hitResult.type == 'segment') { hitResult.segment.remove(); }; return; } if (hitResult) { path = hitResult.item; if (hitResult.type == 'segment') { segment = hitResult.segment; } else if (hitResult.type == 'stroke') { var location = hitResult.location; segment = path.insert(location.index + 1, event.point); path.smooth(); } } movePath = hitResult.type == 'fill'; if (movePath) project.activeLayer.addChild(hitResult.item); } function onMouseMove(event) { var hitResult = project.hitTest(event.point, hitOptions); project.activeLayer.selected = false; if (hitResult && hitResult.item) hitResult.item.selected = true; } function onMouseDrag(event) { if (segment) { segment.point = event.point; path.smooth(); } if (movePath) path.position += event.delta; }</script> </head> <!-- Определяет имя класса, которое позволяет связать тег со стилевым оформлением--> <body class="fullscreen"> <input type="button" value="Blob" onClick="alert(typeof center); alert(typeof maxRadius);alert(typeof points);createBlob(center, maxRadius, points)" > <div class="canvas"><canvas resize="true" id="canvas-1" style="background:white"></canvas></div> </body> </html> |
Вложений: 1
danik.js,
maxRadius 12 строчка кода points 26 строчка (points считается с помощью minPoints и pointsDelta (9 и 23 строки соотв-но)) а center я даже не знаю...но я тут использую библиотеку paper.js и там есть center,может оттуда берется значение? |
У меня одного при клике по Blob выскакивает UNDEFINED ???
|
danik.js,
у меня тоже |
Вы ссылаетесь на код в скрипте text/paperscript. Браузер не выполняет скрипт такого типа. Так что я бы не надеялся что все переменные будут объявлены в глобале.
Кроме того, функция createBlob также не глобальная. <!DOCTYPE html> <html> <head> <title></title> <script src="http://paperjs.org/static/js/paper.js?1320949252000" type="text/javascript" charset="utf-8"></script> <script type="text/paperscript" canvas="canvas-1"> var values = { paths: 1, // всего фигур minPoints: 5, // минимум точек на фигуре maxPoints: 5, // макс тосек на фигуре minRadius: 40, maxRadius: 50 }; var hitOptions = { segments: true, stroke: true, // чтобы можно было менять фигуру по точкам fill: true, // сдвинуть фигуру с места tolerance: 5 // насколько алгоритм может отойти от первонач-го пути }; var radiusDelta = values.maxRadius - values.minRadius; var pointsDelta = values.maxPoints - values.minPoints; for (var i = 0; i < values.paths; i++) { var radius = values.minRadius + Math.random() * radiusDelta; var points = values.minPoints + Math.floor(Math.random() * pointsDelta); var path = createBlob(view.size * 0.5, radius, points); // creates a blob on a one place var lightness = 0.5; var hue = 0.56 * 360; // задает цвет фигуры path.style = { fillColor: new HslColor(hue, 0.5, lightness), //design blob strokeColor: path.hue }; }; // creates a blob function createBlob (center, maxRadius, points) { var path = new Path(); // constructor path.closed = true; // connects the first and last segments for (var i = 0; i < points; i++) { var delta = new Point({ length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5), angle: (360 / points) * i }); path.add(center + delta); } path.smooth(); return path; } var segment, path; var movePath = false; function onMouseDown(event) { segment = path = null; var hitResult = project.hitTest(event.point, hitOptions); if (event.modifiers.shift) { if (hitResult.type == 'segment') { hitResult.segment.remove(); }; return; } if (hitResult) { path = hitResult.item; if (hitResult.type == 'segment') { segment = hitResult.segment; } else if (hitResult.type == 'stroke') { var location = hitResult.location; segment = path.insert(location.index + 1, event.point); path.smooth(); } } movePath = hitResult.type == 'fill'; if (movePath) project.activeLayer.addChild(hitResult.item); } function onMouseMove(event) { var hitResult = project.hitTest(event.point, hitOptions); project.activeLayer.selected = false; if (hitResult && hitResult.item) hitResult.item.selected = true; } function onMouseDrag(event) { if (segment) { segment.point = event.point; path.smooth(); } if (movePath) path.position += event.delta; }</script> </head> <!-- Определяет имя класса, которое позволяет связать тег со стилевым оформлением--> <body class="fullscreen"> <input type="button" value="Blob" onClick="alert(typeof center); alert(typeof maxRadius);alert(typeof points);alert(typeof createBlob)" > <div class="canvas"><canvas resize="true" id="canvas-1" style="background:white"></canvas></div> </body> </html> |
danik.js,
т. е. надо переделывать весь blob.js? |
Нужно просто прочитать документацию.
|
Часовой пояс GMT +3, время: 20:30. |