Проблема с постоянным откликом функции на событие
При проведении курсора по холсту должна рисоваться точка, в текущей позиции курсора. И таким образом рисуется какая-нибудь кривая.
Но рисование точки производится однократно, только при наведении курсора на холст. Вот не знаю как заставить откликаться функцию на событие постоянно. Т.е. надо чтобы было так - я вожу курсором над холстом, и рисуется кривая таким образом Пожалуйста, помогите) Вот код
<!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>
Это к примеру я привёл наведение мыши, например, постоянное нажатие ЛКМ-ом, по холсту тоже не знаю как сделать, также фиксирует лишь однократное нажатие.. |
если поставите вместо "mouseover"-"mousemove"
рисовать будет постоянно а для того чтобы рисовало только тогда когда мы хотим добавляют еще события "mousedown" и "mouseup" тогда рисовать будем только тогда когда нажата левая клавиша мыши постоянно-как отпустим-рисование прекратилось- |
как добавить ещё событий сюда? canvas.addEventListener
("mouseover",paint,false); |
canvas.addEventListener
("mousemove",paint,false); canvas.addEventListener ("mousedown",paint,false); только функции нужно менять |
вот так рисует при нажатой левой клавиши мыши
<!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>
|
Цитата:
http://video.yandex.ru/users/hostjs-mybb2011/view/13/# Ксать скрол бар бы повыше а сanvas чуть уже |
Цитата:
Опера не установлена-в хроме нормально Хотя тормозить тут особенно нечему |
vadim5june,
Ну там заметно - что на вертикали(или при замедленном ведении) - линия получается четкая и жирная - при 45 градусной или росчерком - она капельно точечная Ща пробую в Хроме - В хроме существенно лучше, % на 20-30 и по скорости и по слитности, но на диагоналях и при скоростях 2- и более см/cек - тож капельничает |
Цитата:
если линию рисовать нужно использовать moveTo и lineTo а здесь они по событию mousemove просто выводят квадрат 2x2 |
Цитата:
|
попытался сделать рисование, с помощью линий
<!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);
document.n=0;
function paint(e){
if(!canvas.pr){document.n=0; return;}
var mc = mousePageXY(e);
if (document.n==0) {document.back=mc; document.n=1}
var back=document.back;
context.moveTo(document.back.x,document.back.y);
context.lineTo(mc.x,mc.y);
context.stroke();
document.back = mc;
}
}
</script>
Но если рисуешь и выходишь за рамки холста, то при очередном входе в холст рисование продолжается с того места, где я из него вышел и притом нажатие ЛКМ не нужно. Помогите пожалуйста исправить баг |
добавьте
canvas.addEventListener("mouseout",function(){canvas.pr=0},false);
Я в хроме попробовал-он плохо рисует-а у Вас как? |
Спасибо) Аналогично.. такое чувство, что даже в IE 9 и Лисе быстрее работает.
Там ещё бага осталось, если рисуешь и выходишь за рамки холста, то при очередном входе в холст рисование не происходит с места входа |
Цитата:
|
вставил, но баг есть этот
Цитата:
Как в paint хотелось бы-выходишь за рамки, потом входишь и продолжаешь рисовать с места входа |
У меня он вообще почти не рисует-а должен легко рисовать-никак не пойму где ошибка-вроде все правильно сделали
|
+ ещё бага, если во время рисования выйти за рамки и выделить что нить, то потом войдя в холст можно щёлкнуть на любом месте, немного провести курсор(в этот момент курсор меняется на зачёркнутый круг) и отпустить ЛКМ и тогда тоже рисует, просто водя курсор по холсту, без зажатия ЛКМ.
|
Хром в консоли такое пишет
Цитата:
|
Вот так попробуйте-рисует нормально-а с багами позже-сейчас главное чтобы рисовал
<!DOCTYPE html><html lang="ru">
<head>
<meta charset="utf-8" />
<title>canvas</title>
<!--[if lt IE 9]><script
src="http://html5shiv.googlecode.com/s
vn/trunk/html5.js"></script>
<![endif]-->
</head>
<body onLoad="draw_cl()" onselectstart='return false' style='height:300px;overflow:hidden'>
<center>
<canvas id="b" height="0" width="0" style="border: 2px dashed red"></canvas>
</center>
<br>11111111111111
<script type="text/javascript">
var canvas = document.getElementById("b");
canvas.pr=0;
canvas.mPoint=[];
canvas.width=500; //ширина холста
canvas.height=100; //высота холста
var context = canvas.getContext("2d");
function clearCanvas(){context.clearRect
(0,0,canvas.width,canvas.height)};
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);
document.body.addEventListener("mouseup",function(){canvas.pr=0;canvas.oldLine=0;},false);
canvas.addEventListener("mouseout",function(){canvas.oldLine=0},false);
function paint(e){
context.strokeStyle = 'red';
context.fillStyle='green';
context.lineWidth=2;
if(!canvas.pr)return;
var mc = mousePageXY(e);
if(!canvas.oldLine)
{canvas.oldLine=mc;return;context.beginPath();return;}else{
var old=canvas.oldLine;
//context.beginPath();
context.moveTo(old.x,old.y);
context.lineTo(mc.x,mc.y);
context.stroke();
//context.closePath();
canvas.oldLine=mc;
}
}
};
</script>
</body>
</html>
|
Рисовать то рисует, лучше даже вроде, но мне кажется что всё же не так быстро как надо. Хорошо видно когда линию рисуешь, что рисунок не поспевает за курсором
|
Цитата:
|
Всего быстрее в лисе работает, можно сказать идеально. На втором месте IE9, на третьем Хром.
|
Цитата:
Завтра исправлю |
zm_sansan,
В Opere отлично рисует, линия не отрывается от курсора - тестил в 9.5, 10. 11.52 (11.6 - не тестирую - Личные счёты |
Исправил там свой вариант(который клон Вашего)-в хроме баги пропали
Пришлось запретить выделение на странице |
Код можете скинуть? я потестю
|
Цитата:
на 2 странице в 22-50 http://javascript.ru/forum/misc/2859...tml#post177663 потом нужно фигуры рисовать-прямоугольник -овал-прямую итд само по себе это не сложно(прямоугольник у меня есть могу скинуть) но если объединять с другими инструментами то фигуры нужно сначало рисовать в другом канвасе-потому что там постоянно стираем все а по событию mouseup переносить в основной так же нужна программа для запоминания всей истории и желательно кнопки undo rendo |
да, можете скинуть, хотя как реализовать я в уме представляю
|
Прямоугольник
<!DOCTYPE html><html lang="ru">
<head>
<meta charset="utf-8" />
<title>canvas</title>
<!--[if lt IE 9]><script
src="http://html5shiv.googlecode.com/s
vn/trunk/html5.js"></script>
<![endif]-->
</head>
<body onLoad="draw_cl()"
onselectstart='return false'
style='height:600px;overflow:hidden;'>
<center>
<canvas id="b" height="0" width="0"
style="border: 2px dashed
red"></canvas>
</center>
<br>4444444444444444444<br>
<div id=d></div>
<script type="text/javascript">
var canvas = document.getElementById("b");
canvas.pr=0;
canvas.mPoint=[];
canvas.width=500; //ширина холста
canvas.height=150; //высота холста
var context = canvas.getContext("2d");
function clearCanvas()
{context.clearRect
(0,0,canvas.width,canvas.height)};
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);
document.body.addEventListener("mouseup",function(){canvas.pr=0;canvas.oldLine=0;
document.getElementById('d').innerHTML=canvas.pr;},false);
canvas.addEventListener("mouseout",function()
{canvas.oldLine=0},false);
function paint(e){
context.strokeStyle = 'red';
context.fillStyle='green';
context.lineWidth=2;
if(!canvas.pr)return;
var mc = mousePageXY(e);
if(!canvas.oldLine)
{canvas.oldLine=mc;return;}else{var
old=canvas.oldLine;context.strokeStyle='red';
clearCanvas(e);context.strokeRect(old.x,old.y,mc.x-old.x,mc.y-old.y);
}
}
};
</script>
</body>
</html>
|
Хотел сделать очистку холста
но начиная рисовать по холсту, после его очистки, появляется прошлый рисунок. Как сделать чтобы он не появлялся?
<!DOCTYPE html><html lang="ru">
<head>
<meta charset="utf-8" />
<title>canvas</title>
<!--[if lt IE 9]><script
src="http://html5shiv.googlecode.com/s
vn/trunk/html5.js"></script>
<![endif]-->
</head>
<body onLoad="draw_cl()" style='height:300px;overflow:hidden'>
<center>
<canvas id="b" height="0" width="0" style="border: 2px dashed red;"></canvas>
</center>
<br>11111111111111
<br>
<input type="button" value="Очистить" onClick="clear_canvas()">
<script type="text/javascript">
document.onselectstart=new Function("return false"); //запрет выделения
document.ondragstart=new Function("return false"); //запрет перетаскивания
var canvas = document.getElementById("b");
canvas.lkm=0; //нажатие ЛКМ
canvas.width=500; //ширина холста
canvas.height=400; //высота холста
var context = canvas.getContext("2d");
function clear_canvas(){context.clearRect(0, 0, canvas.width, canvas.height);}
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("mousedown",function(){canvas.lkm=1},false); //нажатие ЛКМ на холсте --> canvas.lkm=1
document.addEventListener("mouseup",function(){canvas.lkm=0;canvas.oldLine=0;},false); //Нажатая кнопка мыши отпущена --> canvas.lkm=0;canvas.oldLine=0
canvas.addEventListener("mouseout",function(){canvas.oldLine=0},false); //выход мыши с холста --> canvas.oldLine=0
canvas.addEventListener("mousemove",paint,false); //передвижении мыши по холсту --> вызов функции рисования
//функция рисования
function paint(e){
context.strokeStyle = 'red'; //цвет линии
context.lineWidth=2; //ширина линии
if (!canvas.lkm) return; //canvas.lkm==0 --> прерываем функцию рисования
var mc = mousePageXY(e); //позиция мыши
if (!canvas.oldLine){ //canvas.oldLine == 0
canvas.oldLine=mc; //запоминаем где мышь вышла с холста. чтоб не было равно нулю? может лучше оптимальней сделать, в смысле логичней...
return; //прерываем функцию рисования
}
else{ //canvas.oldLine != 0 --> рисуем
var old=canvas.oldLine; //
//context.beginPath();
//рисуем контуры линию
context.moveTo(old.x,old.y); //переместить перо в эту точку
context.lineTo(mc.x,mc.y); //нарисовать
//рисуем линию
context.stroke();
//context.closePath();
canvas.oldLine=mc; //точка окончания рисования
}
}
}
</script>
</body>
</html>
Вопрос снимаю, надо было указывать начало и конец путей |
Если я увеличиваю ширину линии до больших значений, например 50, то рисование происходит не так как надо.. есть ли другие способы организовать рисование, чтобы таких глюков не было?
ВОПРОС СНИМАЕТСЯ! просто надо круги рисовать на началах и концах каждой линии
<!DOCTYPE html><html lang="ru">
<head>
<meta charset="utf-8" />
<title>canvas</title>
<!--[if lt IE 9]><script
src="http://html5shiv.googlecode.com/s
vn/trunk/html5.js"></script>
<![endif]-->
</head>
<body onLoad="draw_cl()" style='height:300px;overflow:hidden'>
<center>
<canvas id="b" height="0" width="0" style="border: 2px dashed red;"></canvas>
<br>
Ширина линии
<input id="paint_size" type="text" value="1" onChange="context.lineWidth = document.getElementById('paint_size').value;"><br>
</center>
<script type="text/javascript">
document.onselectstart=new Function("return false"); //запрет выделения
document.ondragstart=new Function("return false"); //запрет перетаскивания
var canvas = document.getElementById("b");
canvas.lkm=0; //нажатие ЛКМ
canvas.width=500; //ширина холста
canvas.height=400; //высота холста
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("mousedown", function () {canvas.lkm = 1}, false); //нажатие ЛКМ на холсте --> canvas.lkm=1
document.addEventListener("mouseup", function () {canvas.lkm = 0;canvas.oldLine = 0;context.closePath();}, false); //Нажатая кнопка мыши отпущена --> canvas.lkm=0;canvas.oldLine=0
canvas.addEventListener("mouseout", function () {canvas.oldLine = 0}, false); //выход мыши с холста --> canvas.oldLine=0
canvas.addEventListener("mousemove", paint, false); //передвижении мыши по холсту --> вызов функции рисования
canvas.addEventListener("click", function () {context.beginPath();}, false); //передвижении мыши по холсту --> вызов функции рисования
//функция рисования
function paint(e){
context.strokeStyle = 'red'; //цвет линии
if (!canvas.lkm) return; //canvas.lkm==0 --> прерываем функцию рисования
var mc = mousePageXY(e); //позиция мыши
if (!canvas.oldLine){ //canvas.oldLine == 0
canvas.oldLine=mc; //запоминаем где мышь вышла с холста . чтоб не было равно нулю? может лучше оптимальней сделать, в смысле логичней...
return; //прерываем функцию рисования
}
else{ //canvas.oldLine != 0 --> рисуем
var old=canvas.oldLine;
//context.beginPath();
//рисуем контуры линию
context.moveTo(old.x,old.y); //переместить перо в эту точку
context.lineTo(mc.x,mc.y); //нарисовать
//рисуем линию
context.stroke();
//context.closePath();
canvas.oldLine=mc; //точка окончания рисования
}
}
}
</script>
</body>
</html>
|
Здравствуйте, как получить доступ из html документа, к переменной A, объявленной в, подключенном к html документу, файле script.js ?
|
| Часовой пояс GMT +3, время: 18:38. |