자바 스크립트 객체/속성

Question

저는 JavaScript에 익숙하지 않고 HTML5 요소를 둘러 보았습니다.

모바일을 비롯한 수많은 장치에서 캔버스 사용을 단순화하는 데 도서관을 사용하고 있지만 지금은 너무 단순 해 보이지만 나에게 괴롭히는 질문이 있습니다. 솔루션을 찾을 수 없습니다. 나는이 초보자의 실수가 될 수 믿는가 그러나 여기 거래입니다 : 나는이 두 기능을 가지고

:

function drawLine(sX, sY, eX, eY) { 
    ctx.beginPath() 
    ctx.moveTo(sX, sY); 
    ctx.lineTo(eX, eY); 
    ctx.stroke(); 
    ctx.closePath(); 
    return { x: eX, y: eY }; 
} 

function canvas() { 
    var canvas = new Canvas ('canvas', 0, function() { 
     this.clear(); 
     this.setAutoResize(true); 
    }); 

    canvas.canvasElement.width = window.innerWidth; 
    canvas.canvasElement.height = window.innerHeight; 

    canvas.onTouchStart = function(start) { 
     var sX; var sY; 
     return {sX: start.clientX, sY: start.clientY}; 
    } 

    canvas.onTouchEnd = function (end) { 
     var eX; var eY; 
     return {eX: end.clientX, eY: end.clientY}; 
    } 

    // canvas.onTouchMove = drawLine(sX, sY, eX, eY); 
} 

너무 많은 세부 사항으로 들어갈 수 없음 , 어떻게에 의해 반환 된 값을 사용할 수 있습니다 onTouchStart() 및 onTouchEnd()를 사용하여 x, y 위치를 drawLine 함수에 전달 하시겠습니까?

내가 갖는 모든 정의되지 않은 값이고, 내가 정말 여기에 잃었어요

..

UPDATE :

@Juan 멘데스, 당신의 도움에 대한

감사합니다,하지만 didn를 어느 쪽도 일하는 것처럼 보입니다.

this.canvasElement.addEventListener('touchstart', function(event) { 
    var touchCount = event.changedTouches.length; 
    var touches = []; 
    var touch = null; 

    for (var i = 0; i < touchCount; i++) { 
     touch = event.changedTouches[i]; 

     var touchInfo = { 
      pageX : touch.pageX, 
      pageY : touch.pageY, 
      clientX : touch.clientX, 
      clientY : touch.clientY, 
      screenX : touch.screenX, 
      screenY : touch.screenY, 
      target : touch.target, 
      identifier : touch.identifier 
     }; 

    self.onTouchStart(touchInfo, i, touchCount, event); 

    touches.push(touchInfo); 

    self.previousTouchInfo[touch.identifier] = touchInfo; 
    } 

    if (touchCount == 1) { 
     touch = event.changedTouches[0]; 

     var x = touch.clientX; 
     var y = touch.clientY; 

     if (self.touchEmulatesMouse) { 
      self.mouse.x = x; 
      self.mouse.y = y; 
      self.mouse.left = true; 

      if (self.layerParent != null) { 
       self.layerParent.onMouseDown(x, y, 0); 
      } 

     self.onMouseDown(x, y, 0); 
     } 
     } else { 
      self.onMultiTouchStart(touches, event); 
     } 
    }, false); 

/* A bit more down the library code */ 
/** 
* Called at the start of every touch start (including when multiple touches occured) 
* 
* The info object contains the folloring info: 
* - pageX - X coordinate relative to the full page (includes scrolling) 
* - pageY - Y coordinate relative to the full page (includes scrolling) 
* - clientX - X coordinate of touch relative to the viewport (excludes scroll offset) 
* - clientY - Y coordinate of touch relative to the viewport (excludes scroll offset) 
* - screenX - X coordinate relative to the screen 
* - screenY - Y coordinate relative to the screen 
* 
* @param {object} info Touch info 
* @param {integer} index Touch index 
* @param {integer} count The total number of active touches 
* @param {object} event The actual touch event 
*/ 
onTouchStart: function(info, index, count, event) {}, 

그리고 나는 또한 당신의 도움을 반영하기 위해 내 코드를 변경, 몇 가지 변화가 또한 사용하여 시도하십시오 "뒷면"코드의 더 나은 이해를 위해

, 여기에 touchstart 일의 예입니다 touchInfo 매개 변수는 다음과 같습니다.

function createCanvas() { 
var canvas = new Canvas ('canvas', 0, function() { 
    this.clear(); 
    this.setAutoResize(true); 
}); 

var cWidth = canvas.canvasElement.width = window.innerWidth; 
var cHeight = canvas.canvasElement.height = window.innerHeight; 

var startPoint = null; 

function fill() { 
    canvas.fillStyle = "black"; 
    canvas.fillRect(0, 0, cWidth, cHeight); 
    canvas.beginPath(); 
} 

// Draw a line on the canvas from (s)tart to (e)nd 
function drawLine(sX, sY, eX, eY) { 
    canvas.beginPath() 
    canvas.moveTo(sX, sY); 
    canvas.lineTo(eX, eY); 
    canvas.stroke(); 
    canvas.closePath(); 
    //return { x: eX, y: eY }; 
} 

fill(); 

canvas.onTouchStart = function(start) { 
    startPoint = {sX: this.clientX, sY: this.clientY}; 
} 

canvas.onTouchEnd = function (end) { 
    drawLine(startPoint.sX, startPoint.sY, this.clientX, this.clientY); 
    // return {eX: end.clientX, eY: end.clientY}; 
} 
} 

모든 도움을 주시면 감사하겠습니다. 하드 사전

Answer 1

마침내 문제를 해결할 수있었습니다. 라이브러리가 제대로 끝나지 않았다는 것을 알았고 (또한) 아직 인수를하지 않고 함수를 잘못 사용하고있었습니다.

Answer 2

감사드립니다, 당신이 요구하는지 말해하지만 난 당신이 필요하면 다음

나는이 이벤트의 이름은 ontouchstart 생각

(function() { 
// Save the startPoint so we can use it when the touch ends to draw the line 
var startPoint; 
canvas.onTouchStart = function(e) { 
    // set the shared variable 
    startPoint = {x: e.clientX, y: e.clientY}; 
} 

canvas.onTouchEnd = function (e) { 
    drawLine(startPoint.x, startPoint.y, e.clientX, e.clientY); 
} 
})(); 

같은 생각이

도움이되기를 바랍니다하기 하지 여기

onTouchStart 내가 코드를

function drawLine(sX, sY, eX, eY) { 
    // Bad use of ctx global, you should pass it into the function so you can support 
    // multiple contexts 
    ctx.beginPath() 
    ctx.moveTo(sX, sY); 
    ctx.lineTo(eX, eY); 
    ctx.stroke(); 
    ctx.closePath(); 
    // Kind of silly to return this object, the caller already passed it in 
    // Should be used only if you need some kind of chaining, but 
    // makes for a weird API 
    return { x: eX, y: eY }; 
} 

// Don't name a function and a variable the same thing, 
// you had canvas as a variable and as a function. 
// They didn't cause a problem, but it's just not pretty to look at 
function createCanvas() {  
    var canvas = new Canvas('canvas', 0, function() { 
     this.clear(); 
     this.setAutoResize(true); 
    }); 

    canvas.canvasElement.width = window.innerWidth; 
    canvas.canvasElement.height = window.innerHeight; 


    // Save the startPoint so we can use it when the touch ends to draw the line 
    var startPoint; 
    // Correct spelling for ontouchstart 
    canvas.ontouchstart = function(start) { 
     // set the shared variable that will be used when they finish touching 
     startPoint = {x: e.clientX, y: e.clientY}; 
    } 

    // Draw the line 
    canvas.ontouchend = function (e) { 
     drawLine(startPoint.x, startPoint.y, e.clientX, e.clientY); 
    }  
} 

,691 같이해야한다고 생각 무엇

}