Действия с канвой - JavaScript, Ajax

Ципихович Эндрю · 11.07.2013, 23:55

Здравствуйте, при помощи канвы нарисовал два прямоугольника
Код HTML

Код:

 
<!DOCTYPE html>
<!--html5-->
 
<html>
 
<head>
 
<meta http-equiv="content-type" content="text/html; charset=utf-8">
 
<title>Качаем канву</title>
 
<!--код jquery
<script type="text/javascript"
src="jquery-1.8.0.min.js">
</script>
-->
 
</head>
 
<body>
<!--объявляем canvas и присваиваем ей id, чтобы в дальнейшем можно было к ней обратится-->
<canvas id='draw' width='300' height='200'></canvas>
<script type="text/javascript">
var canvas=document.getElementById("draw"); //находим нужный холст
var x=canvas.getContext("2d"); //обращаемся ко встроенному объекту, который содержит различные методы для рисования
//первые два шага являются стандартными для рисования любого объекта в canvas
//рисуем не закрашенный прямоугольник
//strokeRect(x,y,ширина,высота)
x.strokeRect(150,70,55,55); 
//рисуем не закрашенный прямоугольник
//strokeRect(x,y,ширина,высота)
x.strokeRect(220,70,55,55); 
</script>
 
</body>
 
</html>

1 Можно как то добиться, чтобы при нахождении мыши между прямоугольниками она это почувствовала, приняла вид давая понять, что можно двигать прямоугольники вправо-влево и далее сделать при зацепе мышью движение прямоугольников вправо-влево?
2 Как рассчитать размеры этих прямоугольников чтобы они вдвоём были на всю ширину экрана? Спасибо

Naive · 12.07.2013, 07:01

1. Ручками, либо юзать over 9000 библиотек
2. Ручками, либо юзать over 9000 библиотек

Холст - не интерактивный элемент, рисование в нем и все действия обрабатываются также как и на холстах в других ЯП, типа делфи.

Stilet · 12.07.2013, 07:42

http://javascript.ru/tutorial/events...ut-i-mousemove
http://javascript.ru/tutorial/events...entx-y-pagex-y
Запоминать координаты прямоугольников, и получив координаты мышки проводить анализ.

Ципихович Эндрю · 16.07.2013, 13:19

сорри over 9000 библиотек - что-то тёмный лес для меня
потом по ссылкам Stilet - узнал где курсор мыши, а как изменить его значёк на стрелку вправо-влево?
и последнее, скрипт

Код:

<!--объявляем canvas и присваиваем ей id, чтобы в дальнейшем можно было к ней обратится-->

<canvas id='draw' width='300' height='200'></canvas>

<script type="text/javascript">

var canvas=document.getElementById("draw"); //находим нужный холст

var x=canvas.getContext("2d"); //обращаемся ко встроенному объекту, который содержит различные методы для рисования

//первые два шага являются стандартными для рисования любого объекта в canvas

//рисуем не закрашенный прямоугольник

//strokeRect(x,y,ширина,высота)

x.strokeRect(150,70,55,55); 



//для рисования линии первой должна быть вызвана функия beginPath

x.beginPath();

//цвет линии, #ff0000 - red - красная, #ffffff - белая, #000000 - чёрная

x.strokeStyle = '#ff0000';

//толщина линии, по умолчанию = 1

x.lineWidth   = 1;

//функцией moveTo устанавливает точку от которой начнется линия

x.moveTo (205, 70);

//функцией lineTo устанавливает точку к которой нужно провести линию

x.lineTo (220, 70);

//закроем открытые формы

x.stroke();



//рисуем не закрашенный прямоугольник

//strokeRect(x,y,ширина,высота)

x.strokeRect(220,70,55,55);

</script>

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

Ципихович Эндрю · 16.07.2013, 16:33

остановился на этом

Код:

<!--объявляем canvas и присваиваем ей id, чтобы в дальнейшем можно было к ней обратится-->
<canvas id='draw' width='300' height='200'></canvas>
<script type="text/javascript">
var canvas=document.getElementById("draw"); //находим нужный холст
var x=canvas.getContext("2d"); //обращаемся ко встроенному объекту, который содержит различные методы для рисования
//первые два шага являются стандартными для рисования любого объекта в canvas
 
//цвет линии, #ff0000 - red - красная, #ffffff - белая, #000000 - чёрная, по умолчанию чёрная
x.strokeStyle = '#000000';
//рисуем не закрашенный прямоугольник
//strokeRect(x,y,ширина,высота)
x.strokeRect(150,70,55,55); 
 
//цвет линии, #ff0000 - red - красная, #ffffff - белая, #000000 - чёрная, по умолчанию чёрная
x.strokeStyle = '#000000';
//рисуем не закрашенный прямоугольник
//strokeRect(x,y,ширина,высота)
x.strokeRect(220,70,55,55);
 
//для рисования линии первой должна быть вызвана функия beginPath
x.beginPath();
//цвет линии, #ff0000 - red - красная, #ffffff - белая, #000000 - чёрная, по умолчанию чёрная
x.strokeStyle = '#ff0000';
//толщина линии, по умолчанию = 1
//x.lineWidth   = 1;
 
//функцией moveTo устанавливает точку от которой начнется линия
x.moveTo (205, 70);
//функцией lineTo устанавливает точку к которой нужно провести линию
x.lineTo (220, 70);
 
//функцией moveTo устанавливает точку от которой начнется линия
x.moveTo (205, 125);
//функцией lineTo устанавливает точку к которой нужно провести линию
x.lineTo (220, 125);
 
//закроем открытые формы
x.stroke();
</script>

ещё не разобрался
как эти прямоугольники сделать в ширину монитора?
как изменить курсор мыши, когда он находится над средним прямоугольником на значёк на стрелку вправо-влево? то есть вроде даёт возможность двигать прямоугольники вправо-влево
как в один из прямоугольников поместить текст, а лучше TreeView?

12.07.2013, 07:01	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	1. Ручками, либо юзать over 9000 библиотек 2. Ручками, либо юзать over 9000 библиотек Холст - не интерактивный элемент, рисование в нем и все действия обрабатываются также как и на холстах в других ЯП, типа делфи. Alar, верни репу!

12.07.2013, 07:42	#3
Stilet Белик Виталий :) Старожил Регистрация: 23.07.2007 Сообщений: 57,097	http://javascript.ru/tutorial/events...ut-i-mousemove http://javascript.ru/tutorial/events...entx-y-pagex-y Запоминать координаты прямоугольников, и получив координаты мышки проводить анализ. I'm learning to live...

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
2 действия одновременно	Mr_skiner	Общие вопросы Delphi	10	14.05.2011 09:40
Работа с Канвой, Шейпы	Arkuz	Общие вопросы Delphi	0	17.12.2010 01:58
Как заставить собственный класс работать с канвой формы	restarterx	Общие вопросы Delphi	4	25.11.2010 11:09
Работа с канвой Delphi (Математический расчёт)	Dancewithevil	Помощь студентам	1	20.05.2010 10:13
как работать с канвой	лорд преисподней	Помощь студентам	10	26.11.2009 19:35