Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
13 / 13 / 3
Регистрация: 31.03.2013
Сообщений: 287
1

Постоянное выполнение действия

25.03.2014, 17:53. Показов 2207. Ответов 8
Метки нет (Все метки)

если я выполнение рисования на канве делаю через onmousemove все отлично работает

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 $( "#games" ).mousemove(function( event ) {
        
    left=0;
    mx = event.clientX;
    
    my = event.clientY;
        
        if (f==false) {
        
 mxn = mx;
 myn = mx;
        }
        s=0;
        context.fillStyle = "#FFF"; // цвет "заливки"
 //     context.fillRect(mx, my, 5, 5); // закрашиваем холст        
      context.beginPath();
       context.fill(); // *1
    context.moveTo(mxn, myn);
    context.lineTo(mx, my);
     context.stroke();
     mxn = mx;
     myn = my;
     f=true;
      context.refresh();
});
НО, у меня рисует мышкой только если я ей вожу (оно и понятно, ведь событие mousemove). А у меня мой рисунок сам каждые 100 милесекунд сдвигается влево, то есть, если я мышкой не веду, у меня рисунок и не создается....

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

Я веду мышкой, потом перестаю вести, и снова веду. и получается большой пробел между линиями... как мне сделать что бы рисовало всегда?
Если вывожу в отдельную функцию, и вызываю через setInterval, то работать не хочет, потому что:


Javascript
1
2
 mx = event.clientX;
my = event.clientY;
Не срабатывают...

Посоветуйте, что мне делать...
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.03.2014, 17:53
Ответы с готовыми решениями:

Выполнение действия на странице после срабатывания действия в другом скрипте
В теле страницы есть скрипт такого вида: <script>(function(d,a,b){let...

Выполнение действия
Доброго времени суток, форумчане! Возникла такая проблемка, есть сайт, на нём есть картинка при...

Выполнение действия в зависимости от выбора пользователя в confirm.
не получается привязать к confirm действие. По отдельности работает, а когда пытаюсь совместить, то...

Постоянное считывание значения div'a
Если сделать так: <div id="mama">8</div> и применить эту функцию: var kolvo =...

__________________

Записывайтесь на профессиональные курсы Fullstack-разработчиков на JavaScript‌
Обучение в Java Mentor с оплатой после трудоустройства
8
22 / 22 / 13
Регистрация: 13.01.2013
Сообщений: 125
25.03.2014, 19:34 2
ну вот легенький пример с интервалом
HTML5
1
2
<div>X: <span id="cX"></span></div>
<div>Y: <span id="cY"></span></div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
var x_default = 100;
var y_default = 100;
var cX = document.getElementById('cX');
var cY = document.getElementById('cY');
var interval = setInterval(function(){
    cX.textContent = x_default;
    cY.textContent = y_default;
},100);
window.onmousemove = function(e){
    x_default = e.clientX;
    y_default = e.clientY;
}
вариант??
ссылка на пример
0
13 / 13 / 3
Регистрация: 31.03.2013
Сообщений: 287
25.03.2014, 20:12  [ТС] 3
Galphimbl, но это ведь на движение мышки, а мне надо что бы без движения мышки выдавало координаты... в обещм, я просто сдвигаю канву, и мне надо что бы при движении холста рисовалось на нем
0
Superposition
948 / 614 / 256
Регистрация: 27.10.2013
Сообщений: 2,084
25.03.2014, 21:00 4
HTML5
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>canvas</title>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>
CSS
1
2
3
4
5
#canvas {
  width: 100px;
  height: 100px;
  background-color: #C5C5C1;
}


Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function(){
var canvas = $('#canvas')[0];
canvas.width = 100;
canvas.height = 100;
var context = canvas.getContext('2d');
 
var canDraw = false;
 
$('#canvas').mousedown(function(){
  canDraw = true;
});
 
$('#canvas').mouseup(function(){
  canDraw = false;
});
 
$('#canvas').mousemove(function(e){
  if(canDraw){
    context.fillRect(e.pageX,e.pageY,1,1);
  }
});
});
0
13 / 13 / 3
Регистрация: 31.03.2013
Сообщений: 287
26.03.2014, 00:18  [ТС] 5
Не пойму, к чему здесь ваш пример...
0
Superposition
948 / 614 / 256
Регистрация: 27.10.2013
Сообщений: 2,084
26.03.2014, 01:38 6
Цитата Сообщение от ychelovek Посмотреть сообщение
Не пойму, к чему здесь ваш пример...
Мне плохо понимать вас. Вы хотеть рисование на канва. Вот я и дать вам полноту пример рисование. Пользуйтесь пока моя доброта
0
13 / 13 / 3
Регистрация: 31.03.2013
Сообщений: 287
26.03.2014, 15:02  [ТС] 7
Padimanskas, Извините пожалуйста. Я просто много тем создавал по разынм вопросам вот и запутался. Спасибо большое!!!

Добавлено через 2 минуты
Padimanskas, Но ведь в вашем примере перепрыгивает через пиксели... так не подходит((
0
Superposition
948 / 614 / 256
Регистрация: 27.10.2013
Сообщений: 2,084
27.03.2014, 02:11 8
Самый хороший способ, это использовать массив где будут храниться ваши точки. Вызывать сохранение можно через определенное, пройденное кол-во пикселей. Рисовать нужно не пиксель, а линию т.е. использовать методы moveTo() и lineTo().

Все ингредиенты описанные ниже, помогут вам реализовать задачу. Добавьте немного мозгов и суп готов:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// так выглядит массив точек
var dots = [ {x: 1, y: 1}, {x: 20, y: 30}, {x: 100, y: 200} ];
 
// эта функция возвращает объект с координатами точки 
function getDot(x, y){
  return {x: x, y: y};
}
 
// чтобы поместить новую точку в массив точек, нужно  выполнить
dots.push( getDot( 50, 60 ) );
 
 
// так можно померить расстояние от точки до точки по теореме Пифагора
x = x2 - x1; // x2 - конечная точка, x1 - начальная точка
y = y2 - y1; // тоже самое
 
dist = Math.sqrt( x * x + y * y ); // теорема Пифагора
0
13 / 13 / 3
Регистрация: 31.03.2013
Сообщений: 287
27.03.2014, 07:53  [ТС] 9
Padimanskas, Использовать массив тут плохо, потому что у меня постоянно изображение сдвигается влево, стирая часть.... Сделал пока так, но ищу более качественную реализацию...
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<style>
        html, body {
padding:0px;
  margin: 0px;
}
        canvas {
        padding:0px;
        margin:0px;
        position:absolute;
        left:0px;
        top:0px;
        }</style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
    </head>
    <body onresize="changes()">
        <div id="ga"><canvas onMousemove="canv()" id="games">Пора уже в этой жизни что-то менять</canvas></div>
   <script>
        sw = window.innerWidth;     
        sh = window.innerHeight; 
         var canvas = document.getElementById("games");
        canvas.width = sw; // задаём размеры холста
        canvas.height = sh;
    var context = canvas.getContext("2d");
        context.fillStyle = "#222"; // цвет "заливки"
        context.fillRect(0, 0, canvas.width, canvas.height); // закрашиваем холст        
 
        f=false;
      $( "#games" ).mousemove(function( event ) {
        
        left=0;
    mx = event.clientX;
    
    my = event.clientY;
        
        if (f==false) {
        
        mxn = mx;
 myn = mx;
        }
        s=0;
        context.fillStyle = "#FFF"; // цвет "заливки"
      context.beginPath();
       context.fill(); // *1
    context.moveTo(mxn, myn);
    context.lineTo(mx, my);
    context.moveTo(mxn+10, myn+10);
    context.lineTo(mx+10, my+10);
    context.moveTo(mxn-10, myn-10);
    context.lineTo(mx-10, my-10);
    
    context.moveTo(mxn+5, myn+5);
    context.lineTo(mx+5, my+5);
    context.lineWidth=5;
    context.moveTo(mxn-5, myn-5);
    context.lineTo(mx-5, my-5);
     context.stroke();
     mxn = mx;
     myn = my;
     f=true;
      context.refresh();
});
       
  
        function changed() {
        left= parseInt($( "#games" ).css('left'));
        width= parseInt($( "#games" ).css('width'));
 
    data = context.getImageData(0,0,sw,sh);
context.putImageData(data,-5,0);
 
        }
    
  setInterval(changed,10);
 
        </script>
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
27.03.2014, 07:53

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Постоянное создание таймера
Здравствуйте. Подскажите пожалуйста, а правильно ли создавать постоянно таймер (каждые 200...

Постоянное выполнение скрипта
Доброго времени суток! Делаю переключалку с обычного на жирное начертание шрифта,столкнулся с такой...

Постоянное выполнение скрипта?
Доброго времени суток, суть: есть скрипт jquery он плавно меняет текст, но есть одна проблема -- он...

Циклы и постоянное выполнение процесса
Подскажите как повторять выполнение скрипта. Есть код: &lt;html&gt; &lt;head&gt; &lt;meta...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.