Нарисовать линию на картинке - PHP

spirit-ua · 30.06.2015, 09:49

Всем Привет!

Если не в этот раздел, прошу послать по адресу

Допустим есть таблица с одной строкой и одним столбиком, в фон ячейки (BACKGROUND="image.gif") грузится картинка размером 600х400 необходимо нарисовать красную линию на самой картинке, с точки x=50 y=100 в точку x=505 y=105 толщиной в 3 пикселя

В этом вопросе мои знания равны нулю, подскажите как это можно реализовать? возможно есть какие нить библиотеки, средствами JawaScript или...

Подтолкните в нужную сторону, что почитать на "доступном" языке? одним словом нужна помощь "для тех кто в танке"

Уточнение:
"нарисовать" имеется ввиду "отобразить" линию поверх картинки, саму картинку можно не трогать и сохранять не нужно

Serge_Bliznykov · 30.06.2015, 10:01

вот это "Давайте порисуем" (В HTML5 определен элемент <canvas> как «растровый холст....) не оно?

Naive · 30.06.2015, 10:11

Canvas вполне подходит. Если надо на сервере, то есть универсальная либа ImageMagic.

spirit-ua · 30.06.2015, 10:15

Уточнение:
"нарисовать" имеется ввиду "отобразить" линию поверх картинки, саму картинку можно не трогать и сохранять не нужно

Цитата:

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

вот это "Давайте порисуем" (В HTML5 определен элемент <canvas> как «растровый холст....) не оно?

посмотрел но не совсем понимаю подойдет ли оно к моей задаче...
суть в чем:
- есть фоновая картинка, образно говоря карта с множеством точек (координаты будут в БД)
- по выбору пользователя нужно будет визуально отобразить связь (прямыми линиями) между точками

Фоновая картинка будет размещена не на отдельной страничке, а "внутри" сайта, соответственно позиционирование точек привязано именно к картинке

"canvas" поможет реализовать данную задачу? или есть более простые решения?

P.S. Флеш не катит

Serge_Bliznykov · 30.06.2015, 10:48

я не знаю, подходит оно к вашей задаче или нет.
тут же очень многое и от разметки документа зависит.
если есть возможность картинку выводить на холст через метод DrawImage - тогда подходит.
если нет - то нужно с перекрытием что-то придумывать.

я вот такой пример с перекрытием в интернете нашёл:

Код HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>


<body>

<img src="http://static.zend.com/img/logo.gif" alt='' />
<div style="position:absolute;top:0px;left:0px;z-index:100;"> <canvas id="b" width="300" height="300" class="top"></canvas></div>


<script>
  var b_canvas = document.getElementById("b");
  var context = b_canvas.getContext("2d");


      context.beginPath();
      context.moveTo(5, 5);
      context.lineTo(50, 50);
      context.lineWidth = 2;

      // set line color
      context.strokeStyle = '#ff0000';
      context.stroke();
  
//  context.fillRect(0, 0, 150, 100);
</script>

</body>
</html>
</body>
</html>

Naive · 30.06.2015, 11:24

Можно хоть CSS-ом нарисовать. Холст, ИМХО, будет проще, потому что там ты укажешь откуда куда рисовать линию, а в CSS будешь трахаццо с трансформациями.

spirit-ua · 30.06.2015, 11:29

canvas то что доктор прописал

Код:

<script type="text/javascript">
	function draw_b() {
		//alert("OK");
		var b_canvas = document.getElementById("b");
		var context = b_canvas.getContext("2d");

		context.beginPath();
		context.moveTo(5, 5);
		context.lineTo(50, 50);
		context.lineWidth = 2;
		context.strokeStyle = '#FF0000';
		context.stroke();		
		
		context.beginPath();
		context.moveTo(15, 5);
		context.lineTo(30, 50);
		context.lineWidth = 5;
		context.strokeStyle = '#0000FF';
		context.stroke();		
	}
</script>

- с точки зрения кодинга все правильно?
- не будет ли ПК "ложиться в спячку" если через цикл будет рисоваться, скажем, несколько тысяч линий?

Naive · 01.07.2015, 11:09

Цитата:

Сообщение от spirit-ua

canvas то что доктор прописал

Код:

<script type="text/javascript">
	function draw_b() {
		//alert("OK");
		var b_canvas = document.getElementById("b");
		var context = b_canvas.getContext("2d");

		context.beginPath();
		context.moveTo(5, 5);
		context.lineTo(50, 50);
		context.lineWidth = 2;
		context.strokeStyle = '#FF0000';
		context.stroke();		
		
		context.beginPath();
		context.moveTo(15, 5);
		context.lineTo(30, 50);
		context.lineWidth = 5;
		context.strokeStyle = '#0000FF';
		context.stroke();		
	}
</script>

- с точки зрения кодинга все правильно?
- не будет ли ПК "ложиться в спячку" если через цикл будет рисоваться, скажем, несколько тысяч линий?

- Если открываешь путь, то стоит закрывать, в остальном норм.
- Не будет, канвас быстр как понос. Легко на двумерном холсте отображал 10к полигонов с текстурами.

spirit-ua · 01.07.2015, 13:54

Что значит "закрыть" путь?

Serge_Bliznykov · 01.07.2015, 14:01

Цитата:

Сообщение от spirit-ua

Что значит "закрыть" путь?

он имел в виду метод closePath():
отсюда:

Цитата:

closePath() Creates a path from the current point back to the starting point

Но это совсем другое. это ЗАМКНУТЬ путь (соединить конечную и начальную точки прямой).
Если это не нужно, то и closePath() Вам НЕ НУЖЕН!

30.06.2015, 09:49	#1
spirit-ua Форумчанин Регистрация: 04.06.2009 Сообщений: 351	Нарисовать линию на картинке Всем Привет! Если не в этот раздел, прошу послать по адресу Допустим есть таблица с одной строкой и одним столбиком, в фон ячейки (BACKGROUND="image.gif") грузится картинка размером 600х400 необходимо нарисовать красную линию на самой картинке, с точки x=50 y=100 в точку x=505 y=105 толщиной в 3 пикселя В этом вопросе мои знания равны нулю, подскажите как это можно реализовать? возможно есть какие нить библиотеки, средствами JawaScript или... Подтолкните в нужную сторону, что почитать на "доступном" языке? одним словом нужна помощь "для тех кто в танке" Уточнение: "нарисовать" имеется ввиду "отобразить" линию поверх картинки, саму картинку можно не трогать и сохранять не нужно Мне разрешено открывать только одну страницу - about :blank. Сперва было скучно, но потом я втянулся. Теперь у меня там живет 2 виртуальных друга, и я слышу голоса из розетки! Последний раз редактировалось spirit-ua; 30.06.2015 в 10:00.

30.06.2015, 10:11	#3
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Canvas вполне подходит. Если надо на сервере, то есть универсальная либа ImageMagic. Alar, верни репу!

30.06.2015, 10:48	#5
Serge_Bliznykov Старожил Регистрация: 09.01.2008 Сообщений: 26,229	я не знаю, подходит оно к вашей задаче или нет. тут же очень многое и от разметки документа зависит. если есть возможность картинку выводить на холст через метод DrawImage - тогда подходит. если нет - то нужно с перекрытием что-то придумывать. я вот такой пример с перекрытием в интернете нашёл: Код HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <img src="http://static.zend.com/img/logo.gif" alt='' /> <div style="position:absolute;top:0px;left:0px;z-index:100;"> <canvas id="b" width="300" height="300" class="top"></canvas></div> <script> var b_canvas = document.getElementById("b"); var context = b_canvas.getContext("2d"); context.beginPath(); context.moveTo(5, 5); context.lineTo(50, 50); context.lineWidth = 2; // set line color context.strokeStyle = '#ff0000'; context.stroke(); // context.fillRect(0, 0, 150, 100); </script> </body> </html> </body> </html>

30.06.2015, 11:24	#6
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Можно хоть CSS-ом нарисовать. Холст, ИМХО, будет проще, потому что там ты укажешь откуда куда рисовать линию, а в CSS будешь трахаццо с трансформациями. Alar, верни репу!

30.06.2015, 11:29	#7
spirit-ua Форумчанин Регистрация: 04.06.2009 Сообщений: 351	canvas то что доктор прописал Код: `<script type="text/javascript"> function draw_b() { //alert("OK"); var b_canvas = document.getElementById("b"); var context = b_canvas.getContext("2d"); context.beginPath(); context.moveTo(5, 5); context.lineTo(50, 50); context.lineWidth = 2; context.strokeStyle = '#FF0000'; context.stroke(); context.beginPath(); context.moveTo(15, 5); context.lineTo(30, 50); context.lineWidth = 5; context.strokeStyle = '#0000FF'; context.stroke(); } </script>` - с точки зрения кодинга все правильно? - не будет ли ПК "ложиться в спячку" если через цикл будет рисоваться, скажем, несколько тысяч линий? Мне разрешено открывать только одну страницу - about :blank. Сперва было скучно, но потом я втянулся. Теперь у меня там живет 2 виртуальных друга, и я слышу голоса из розетки! Последний раз редактировалось spirit-ua; 30.06.2015 в 11:33.

30.06.2015, 10:01	#2
Serge_Bliznykov Старожил Регистрация: 09.01.2008 Сообщений: 26,229	вот это "Давайте порисуем" (В HTML5 определен элемент <canvas> как «растровый холст....) не оно?

01.07.2015, 13:54	#9
spirit-ua Форумчанин Регистрация: 04.06.2009 Сообщений: 351	Что значит "закрыть" путь? Мне разрешено открывать только одну страницу - about :blank. Сперва было скучно, но потом я втянулся. Теперь у меня там живет 2 виртуальных друга, и я слышу голоса из розетки!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
нарисовать в паскале линию...	Proskurina	Помощь студентам	3	10.10.2012 15:07
нарисовать в паскале линию	Proskurina	Паскаль, Turbo Pascal, PascalABC.NET	2	09.10.2012 00:14
нарисовать линию по нажатию мыши	Kukurudza	Общие вопросы C/C++	9	27.09.2011 20:07
Как нарисовать необычную линию	Marsel737	Общие вопросы Delphi	2	17.05.2011 20:03
Нарисовать на координатной площади линию ax+by+c=0	НУБ!!!	Общие вопросы Delphi	4	13.05.2008 22:48