我对JavaScript相当陌生,并且一直在使用HTML5元素。JavaScript对象/属性
问题是我现在正在使用一个库来帮助简化在多种设备(包括移动设备)上使用画布,但是现在我有一个问题,因为它看起来很简单,米无法找到解决方案。我相信这可能是一个新手的错误,但这里的交易:
我有这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函数?
所有我得到的是没有定义的值,我真的在这里失去了..
UPDATE:
@Juan门德斯,
感谢您的帮助,但没看起来也不行。
为了更好地理解的“背面”的代码,这里的touchstart事的例子:
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 PARAM这样的:
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};
}
}
任何帮助将是非常赞赏。在此先感谢
那么,我会试试你的建议。顺便说一句,onTouchStart拼写的方式,因为它是一个库方法。我正在使用HTML Canvas Lib:http://html-canvas-lib.sourceforge.net/ –
Hi @Juan。谢谢你的帮助。我修改了一些代码,但仍然无法工作。我已经在下一个“答案”中发布了新代码,那么请你参加一下吗?谢谢 –
@Zed_Blade错误信息? –