Форум

Isaac · #1 (**permalink**) 16.11.2011, 19:38

Здравсвуйте.
Очень нужна помощь, подскажите пожалуйста.
Впервые начал использовать библиотеку Raphaël, задача в следующем:
нужно нарисовать фигуру, например в виде буквы А и сделать ее красным цветом. Если не ошибаюсь, то мне нужна ф-я

var c = paper.path("M0 10L 360 200");

которая рисует прямую и с помощью это прямой мне нужно проложить путь в виде координат указанных в ф-ии path и тем самым рисовать А.
Вопрос: пожалуйста подскажите, как это сделать, я не могу расшифровать цифры, которые находятся в скобках ("M0 10L 360 200"), что они значат и какие нужно добавить для того, чтобы покрасить фигуру А в красный?
Если вы знаете другой лучше вариант, как можно нарисавать А с помощью это библиотеки, то пожалуйста подскажиье...

Pavel M. · #2 (**permalink**) 16.11.2011, 21:59

если по англ. понимаете то можно посмотреть здесь и ниже http://www.w3.org/TR/SVG/paths.html#...ralInformation

M0 10 - moveto переместиться на координаты 0 10
L 360 200 lineto - рисуем линию до этих координат

Isaac · #3 (**permalink**) 16.11.2011, 22:45

Сообщение от Pavel M.

если по англ. понимаете то можно посмотреть здесь и ниже http://www.w3.org/TR/SVG/paths.html#...ralInformation

M0 10 - moveto переместиться на координаты 0 10
L 360 200 lineto - рисуем линию до этих координат

Спасибо с этим разобрался, подскажите пожалуйста, как мне покрасить внутреннею область фигуры в данном случае?

Pavel M. · #4 (**permalink**) 17.11.2011, 12:25

можно так
не забывайте в конце 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>

Isaac · #5 (**permalink**) 17.11.2011, 13:35

Сообщение от Pavel M.

можно так
не забывайте в конце Z чтобы замкнуть контур фигуры[/html]

Спасибо большое, у меня еще один вопрос: как получить на этой фигуре произвольные точки с координатами?

Pavel M. · #6 (**permalink**) 17.11.2011, 13:39

Сообщение от Isaac

как получить на этой фигуре произвольные точки с координатами?

что значит получить, нарисовать точки ?

Isaac · #7 (**permalink**) 17.11.2011, 13:42

Сообщение от Pavel M.

что значит получить, нарисовать точки ?

Например имея фигуру любой формы, я хочу получить несколько точек(допустим 2 или 3), которые находятся на этой фигуре и в свою очередь являются центрами окружностей

Pavel M. · #8 (**permalink**) 17.11.2011, 14:01

Сообщение от Isaac

я хочу получить несколько точек

это же SVG - векторная графика,
можно изобразить точки маленькими окружностями, квадратами или отрезками линий, типа paper.path('M 10 10 L 10 11');

Isaac · #9 (**permalink**) 17.11.2011, 14:06

Сообщение от Pavel M.

это же SVG - векторная графика,
можно изобразить точки маленькими окружностями, квадратами или отрезками линий, типа 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);

Но нак не получается

и точки должны быть обязательно центрами окружностей

Pavel M. · #10 (**permalink**) 17.11.2011, 14:52

точку выше квадрата показал
надо рисовать на 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>

Форум

Справочник

Discord чат

Курсы javascript