Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.05.2012, 08:21
Интересующийся
Отправить личное сообщение для zm_sansan Посмотреть профиль Найти все сообщения от zm_sansan
 
Регистрация: 26.05.2012
Сообщений: 26

Проблема с постоянным откликом функции на событие
При проведении курсора по холсту должна рисоваться точка, в текущей позиции курсора. И таким образом рисуется какая-нибудь кривая.
Но рисование точки производится однократно, только при наведении курсора на холст.
Вот не знаю как заставить откликаться функцию на событие постоянно. Т.е. надо чтобы было так - я вожу курсором над холстом, и рисуется кривая таким образом
Пожалуйста, помогите)
Вот код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>canvas</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body onLoad="draw_cl()">
<header>
<h1 align="center">canvas!!!</h1>
</header>
<center>
<canvas id="b" height="0" width="0" style="border: 2px dashed red"></canvas>
<img href="" name="picture">
</center>
</body>
</html>

<script type="text/javascript">
var canvas = document.getElementById("b");
canvas.width=500; //ширина холста
canvas.height=375; //высота холста
var context = canvas.getContext("2d");
function draw_cl(){
        //получаем позицию курсора относительно холста
        function mousePageXY(e){
        var x = 0, y = 0;
        if (!e) e = window.event;
        if (e.pageX || e.pageY)
        {
                x = e.pageX;
                y = e.pageY;
        }
        else if (e.clientX || e.clientY)
        {
                x = e.clientX + 
                (document.documentElement.scrollLeft || document.body.scrollLeft) - 
                document.documentElement.clientLeft;
                y = e.clientY + 
                (document.documentElement.scrollTop || document.body.scrollTop) - 
                document.documentElement.clientTop;
        }
        x -= canvas.offsetLeft;
        y -= canvas.offsetTop;
        return {"x":x, "y":y};
        }
        
        canvas.addEventListener("mouseover",paint,false); //добавляем события клика по холсту
        //рисуем
        function paint(e){
        var mc = mousePageXY(e);
        context.fillRect(mc.x-2.5, mc.y-2.5, 2, 2);
        }       
}
</script>

Это к примеру я привёл наведение мыши, например, постоянное нажатие ЛКМ-ом, по холсту тоже не знаю как сделать, также фиксирует лишь однократное нажатие..
Ответить с цитированием
  #2 (permalink)  
Старый 26.05.2012, 09:24
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

если поставите вместо "mouseover"-"mousemove"
рисовать будет постоянно
а для того чтобы рисовало только тогда когда мы хотим добавляют еще события "mousedown" и "mouseup"
тогда рисовать будем только тогда когда нажата левая клавиша мыши постоянно-как отпустим-рисование прекратилось-

Последний раз редактировалось vadim5june, 26.05.2012 в 09:27.
Ответить с цитированием
  #3 (permalink)  
Старый 26.05.2012, 10:29
Интересующийся
Отправить личное сообщение для zm_sansan Посмотреть профиль Найти все сообщения от zm_sansan
 
Регистрация: 26.05.2012
Сообщений: 26

как добавить ещё событий сюда? canvas.addEventListener
("mouseover",paint,false);
Ответить с цитированием
  #4 (permalink)  
Старый 26.05.2012, 10:52
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

canvas.addEventListener
("mousemove",paint,false);
canvas.addEventListener
("mousedown",paint,false);
только функции нужно менять
Ответить с цитированием
  #5 (permalink)  
Старый 26.05.2012, 11:08
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

вот так рисует при нажатой левой клавиши мыши
<!DOCTYPE html><html lang="ru">
<head>
<meta charset="utf-8" />
<title>canvas</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body onLoad="draw_cl()">
<header>
<h1 align="center">canvas!!!</h1>
</header>
<center>
<canvas id="b" height="0" width="0" style="border: 2px dashed red"></canvas>
<img href="" name="picture">
</center>
</body>
</html>

<script type="text/javascript">
var canvas = document.getElementById("b");
canvas.pr=0;
canvas.width=500; //ширина холста
canvas.height=375; //высота холста
var context = canvas.getContext("2d");
function draw_cl(){
        //получаем позицию курсора относительно холста
        function mousePageXY(e){
        var x = 0, y = 0;
        if (!e) e = window.event;
        if (e.pageX || e.pageY)
        {
                x = e.pageX;
                y = e.pageY;
        }
        else if (e.clientX || e.clientY)
        {
                x = e.clientX + 
                (document.documentElement.scrollLeft || document.body.scrollLeft) - 
                document.documentElement.clientLeft;
                y = e.clientY + 
                (document.documentElement.scrollTop || document.body.scrollTop) - 
                document.documentElement.clientTop;
        }
        x -= canvas.offsetLeft;
        y -= canvas.offsetTop;
        return {"x":x, "y":y};
        }
        
        canvas.addEventListener("mousemove",paint,false); //добавляем события клика по холсту
        //рисуем
 canvas.addEventListener("mousedown",function(){canvas.pr=1},false); 
 canvas.addEventListener("mouseup",function(){canvas.pr=0},false); 
        function paint(e){if(!canvas.pr)return;
        var mc = mousePageXY(e);
        context.fillRect(mc.x-2.5, mc.y-2.5, 2, 2);
        }       
}
</script>
Ответить с цитированием
  #6 (permalink)  
Старый 26.05.2012, 14:30
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от vadim5june
вот так рисует при нажатой левой клавиши мыши
Ну В Опере так - тормоза типичные для сanvas без оптимизации,
http://video.yandex.ru/users/hostjs-mybb2011/view/13/#
Ксать скрол бар бы повыше а сanvas чуть уже
Ответить с цитированием
  #7 (permalink)  
Старый 26.05.2012, 14:35
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от Deff Посмотреть сообщение
Ксать скрол бар бы повыше а сanvas чуть уже
Это к автору поста
Опера не установлена-в хроме нормально
Хотя тормозить тут особенно нечему
Ответить с цитированием
  #8 (permalink)  
Старый 26.05.2012, 14:48
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

vadim5june,
Ну там заметно - что на вертикали(или при замедленном ведении) - линия получается четкая и жирная - при 45 градусной или росчерком - она капельно точечная

Ща пробую в Хроме - В хроме существенно лучше, % на 20-30 и по скорости и по слитности, но на диагоналях и при скоростях 2- и более см/cек - тож капельничает

Последний раз редактировалось Deff, 26.05.2012 в 14:50.
Ответить с цитированием
  #9 (permalink)  
Старый 26.05.2012, 14:54
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от Deff Посмотреть сообщение
[b], но на диагоналях и при скоростях 2- и более см/cек - тож капельничает
так это же не рисование линии а именно рисование точками
если линию рисовать нужно использовать moveTo и lineTo
а здесь они по событию mousemove просто выводят квадрат 2x2
Ответить с цитированием
  #10 (permalink)  
Старый 26.05.2012, 16:15
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от vadim5june Посмотреть сообщение
так это же не рисование линии а именно рисование точками
если линию рисовать нужно использовать moveTo и lineTo
а здесь они по событию mousemove просто выводят квадрат 2x2
Ясн - с canvas - в первый класс - мну пробовал только изображения сохранять через канву... ну и рендить
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проблема с созданием функции cln2008 jQuery 3 13.01.2012 15:24
Проблема с запуском функции (Sandr) Общие вопросы Javascript 2 05.07.2011 15:30
Проблема с вызовом функции в качестве обработчика G_M_S Общие вопросы Javascript 5 03.05.2011 11:55
Проблема с вызовом функции! Pacan Общие вопросы Javascript 14 30.11.2010 15:47
Проблема с вызовом функции prophet Общие вопросы Javascript 1 26.09.2008 12:26