-1

私は JavaScript にかなり慣れていないので、HTML5 要素をいじっています。

問題は、モバイルを含む多数のデバイスでのキャンバスの使用を簡素化するためにライブラリを使用していることですが、非常に単純に見えるのに見つけることができないため、私を悩ませている質問があります。解決策。これは初心者の間違いかもしれないと思いますが、ここに取り引きがあります：

私はこれらの2つの機能を持っています:

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 関数に渡すにはどうすればよいでしょうか?

私が得ているのは定義されていない値だけで、ここで本当に迷っています..

アップデート：

@フアン・メンデス

ご協力いただきありがとうございますが、それもうまくいかなかったようです。

「裏側」コードをよりよく理解するために、タッチスタートの例を次に示します。

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) {},

また、あなたの助けを反映するようにコードを変更し、いくつかの変更を加え、次のように 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};
}
}

どんな助けでも大歓迎です。前もって感謝します

4

2 に答える 2

1

あなたが何を求めているのかわかりにくいですが、これが役に立てば幸いです

必要なのは次のようなものだと思います

(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イベントの名前は、ではないと思います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);
    }    
}

}

于 2012-09-14T18:51:05.040 に答える
0

私はついに問題を回避することができました。ライブラリが（まだ）適切に終了しておらず、引数を取得せずに関数を誤用していたことが判明しました。

于 2012-09-22T01:22:29.970 に答える