帆布拼图 - 触摸不是最重要的部分

时间:2015-07-01 10:19:38

标签: javascript html5-canvas touch

我正在尝试用帆布制作移动和标签设备的拼图游戏

我试过的看起来像这样。 http://jsfiddle.net/Renjith_Rajendran/nx84ujop/2/

现在,我在触摸碎片时面临一些问题,但未正确使用。

触摸仅在底部和底部识别,而不是在形状

             mousemove = function(self, curHover) {
        return function(e) {
            e.preventDefault();
            e = e.touches ? e.touches[0] : e;
            self.lastX = self.x;
            self.lastY = self.y;
            curHover = self._curHover;
            TOUCH_MOVE = true;
            self.x = ((e && e.pageX - self._pos.x + 1 || window.event.offsetX + 1) - 1) / self.__zoom;
            self.y = ((e && e.pageY - self._pos.y + 1 || window.event.offsetY + 1) - 1) / self.__zoom;
            if (!self._clicked && USE_MOUSE_OVER_OUT) {
                var shapeUnderCursor = getObjectUnderCursor(e, self);
                if (shapeUnderCursor) {
                    if (curHover !== shapeUnderCursor) {
                        colectEvent(shapeUnderCursor, "mouseover", e, self);
                        if (curHover) {
                            colectEvent(curHover, "mouseout", e, self)
                        }
                    }
                    self._curHover = curHover = shapeUnderCursor
                } else if (curHover) {
                    colectEvent(curHover, "mouseout", e, self);
                    self._curHover = curHover = null
                }
            }
            if (curHover) {
                colectEvent(curHover, "mousemove", e, self)
            }
            if (eventQueue.length) {
                fireEvents(self, e)
            }
        }
    },
    mousedown = function(self) {
        return function(e) {
            if (!USE_MOUSE_OVER_OUT) {
                self._curHover = getObjectUnderCursor(e, self)
            }
            var curHover = self._curHover,
            which = mouseButtons[e.which || e.button];
            self._clicked = true;
            currentCanvas = self.cv;
            self[which] = true;
            if (curHover) {
                colectEvent(curHover, "mousedown", e, self);
                if (curHover !== self.focused) {
                    colectEvent(curHover, "focus", e, self);
                    if (self.focused) {
                        colectEvent(self.focused, "blur", e, self)
                    }
                }
            } else if (self.focused) {
                colectEvent(self.focused, "blur", e, self);
                self.focused = null
            }
            self.focused = curHover || null;
            if (eventQueue.length) {
                fireEvents(self, e)
            }
            self[which] = false
        }
    },

https://www.dropbox.com/s/a781o63ltm3zhy8/issue.png?dl=0

0 个答案:

没有答案