Библиотека Raphaël
Здравсвуйте.
Очень нужна помощь, подскажите пожалуйста. Впервые начал использовать библиотеку Raphaël, задача в следующем: нужно нарисовать фигуру, например в виде буквы А и сделать ее красным цветом. Если не ошибаюсь, то мне нужна ф-я
var c = paper.path("M0 10L 360 200");
которая рисует прямую и с помощью это прямой мне нужно проложить путь в виде координат указанных в ф-ии path и тем самым рисовать А. Вопрос: пожалуйста подскажите, как это сделать, я не могу расшифровать цифры, которые находятся в скобках ("M0 10L 360 200"), что они значат и какие нужно добавить для того, чтобы покрасить фигуру А в красный? Если вы знаете другой лучше вариант, как можно нарисавать А с помощью это библиотеки, то пожалуйста подскажиье... :( |
если по англ. понимаете то можно посмотреть здесь и ниже http://www.w3.org/TR/SVG/paths.html#...ralInformation
M0 10 - moveto переместиться на координаты 0 10 L 360 200 lineto - рисуем линию до этих координат |
Цитата:
|
можно так
не забывайте в конце Z чтобы замкнуть контур фигуры
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<script type='text/javascript' src='https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js'></script>
<script>
window.onload=function(){
var paper = Raphael(0, 0, 150, 150);
var box = paper.path('M 10 10 L 100 10 L 100 100 L 10 100 Z');
box.attr("fill", "#f00");
}
</script>
</body>
</html>
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
можно изобразить точки маленькими окружностями, квадратами или отрезками линий, типа paper.path('M 10 10 L 10 11'); |
Цитата:
var paper = Raphael(0, 0, 150, 150);
var box = paper.path('M 10 10 L 100 10 L 100 100 L 10 100 Z');
box.attr("fill", "#f00");
var c = box.circle(150, 150, 40);
Но нак не получается :( и точки должны быть обязательно центрами окружностей |
точку выше квадрата показал
надо рисовать на paper
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<script type='text/javascript' src='https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js'></script>
<script>
window.onload=function(){
var paper = Raphael(0, 0, 150, 150);
var box = paper.path('M 10 10 L 100 10 L 100 100 L 10 100 Z');
box.attr("fill", "#f00");
paper.path('M20 20 L20 21');
}
</script>
</body>
</html>
|
Цитата:
Как вы считаете, может подойти ф-я ? Raphael.getPointAtLength(path, length) |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
ну так значит если точка должна быть внутри квадрата, то ее координаты должны быть больше чем левый верхний угол и меньше чем правый нижний
это можно посчитать ? |
Цитата:
Я думаю, что в библиотеке должно быть подобное свойство или метод, но не могу его найти :( |
лучше приведите здесь код, как вы рисуете эту букву A, и что такое будет для этой фигуры значить слово внутри
|
Цитата:
var paper = Raphael(ph, 600, 600);
var shapeA = paper.path("M 300 10 L 400 10 L 600 500 L 500 500 L 400 300 L 350 300 L 250 500 L 150 500 Z").attr("fill", "grey");
// Могу получить длину всей фигуры
var lengthShapeA = shapeA.getTotalLength();
// Могу получить координаты всех точек на КОНТУРЕ фигуры
for(var i = 0; i <= lengthShapeA; i ++)
{
var allPoints = shapeA .getPointAtLength(i, lengthShapeA);
}
А как мне получить КООРДИНАТЫ ЛЮБЫХ 5 точек находящиесу ВНУТРИ фигуры shapeA ? |
не знаю может быть это имели в виду http://jsfiddle.net/me9mW/
выводит все точки фигуры только фигуру я уменьшил, чтобы циклы не подвисали |
Цитата:
if (paper.getElementByPoint(x, y) === shapeA)
{
var posX = x;
var posY = y;
console.log('внутри', x, y); // точки внутри фигуры
}
Или в этой библиотеке есть специальное свойство для подобной задачи? |
| Часовой пояс GMT +3, время: 05:28. |