1
window.onload = function() {
  'use strict'
  var painting;
  var context;
  var x, i, j;
  var y;
  var canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");
  var socket = io.connect("http://localhost:3000");
  context.strokeStyle = 'red';
  context.lineWidth = 9;
  context.strokeRect(420, 200, 400, 200);

  canvas.onmousedown = startDraw;
  canvas.onmouseup = draw;
  socket.on( 'startDraw', function( data ) {
  startDraw( data.x, data.y );
});

function startDraw(e) {
    'use strict'
    painting = true;
    x = e.pageX;
    y = e.pageY;
}
socket.emit( 'startDraw', { x: x, y: y } );


function draw(r) {
    'use strict'
    i = r.pageX;
    j = r.pageY;
    if ( painting == true ) {
        context.strokeStyle = 'red';
        context.beginPath();
        context.moveTo( x, y );
        context.lineTo( i, j );
        context.stroke();
    }
}

function stopDraw() {
    'use strict'
    painting = false;
}

}

Ошибка

Cannot read property 'pageX' of undefined

12
  • вы передает объект с ключами x и y, а внутри тела обработчика пытаетесь обратиться к ключу pageX и pageY. e.x и e.y вам нужно использовать.
    – dakiesse
    18 мар 2016 в 18:07
  • 1
    @dakiesse, неправда же. От этого такой ошибки быть не может.
    – Qwertiy
    18 мар 2016 в 18:10
  • сделайте console.log(e) и вы все сами увидете, а так же вывод суда выложите
    – dakiesse
    18 мар 2016 в 18:13
  • MouseEvent {isTrusted: true, screenX: 565, screenY: 330, clientX: 500, clientY: 221…} 18 мар 2016 в 18:17
  • 1
    внутри обработчика ты вызываешь startDraw и передаешь два аргумента. я не совсем понимаю как у тебя аргумент e в startDraw является MouseEvent, учитывая что ты вызывая эту функцию передаешь в нее два аргумента и первый это data.x
    – dakiesse
    18 мар 2016 в 19:18

1 ответ 1

1

Вы в самом начале объявляет переменные x и y, которые имею тип данных undefined.

Далее вы вешаете на canvas.onmousedown обработчик функцию startDraw. И при клике по canvas у вас естетственно произойдет вызов функции starDraw с арументов MouseEvent.

Далее, во время выполнения потока вы просто так эмиттете событие startDraw посредством вызова socket.emit( 'startDraw', { x: x, y: y } );. Какова цель данного вызова и передача в нее хэша с значениями {x: undefined, y: undefined}? Так как я не понимаю вашу задумку, я просто вам указываю, что проблема именно в этой строке.

UPDATE после нормального отображения листинга:

У вас получается в потоке выполнения происходит вызов socket.emit( 'startDraw', { x: x, y: y } ); с переменными x и y, которые вообще не были иниацилизованы. window.unload выполниться позже чем произойдет выполнение socket.emit( 'startDraw', { x: x, y: y } );!

5
  • Надо сделать в реалтайме рисовалку 18 мар 2016 в 20:04
  • @RomanPawliw у вас слишком много ошибок. По потому, что я вижу вы не понимаете, что такое области видимости (scopes). Вы объявили переменные, которые используется везде в приватном scope, а именно в обработчике onload. Вынесите переменные x, y, painting и т.д. наружу.
    – dakiesse
    18 мар 2016 в 20:11
  • @RomanPawliw далее у вас бессмысленно использование use strick. Зачем оно? Конечно оно в данном случаи роль не играет, но это лишнее!
    – dakiesse
    18 мар 2016 в 20:12
  • @RomanPawliw далее, вызов socket.emit( 'startDraw', { x: x, y: y } ); вы наверное все таки хотели помести внутрь функции startDraw и тем самым оповещать другие клиентов о том, что ВЫ рисуете на холсте
    – dakiesse
    18 мар 2016 в 20:13
  • @RomanPawliw далее, вы так же подписываетесь на событие startDraw и получается, что вы же и эмиттет это событие с передачей координ и тут же случаете и обрабатываете это событие и хотите то, что вы уже прорисовали - еще раз прорисовать. Проблема с логикой поведения приложения. К тому же обработчик события 'startDraw' не верно написан. Вы должны вызывать функцию draw внутри и передавать туда объект с x и y
    – dakiesse
    18 мар 2016 в 20:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.