HTML and CSS Reference
In-Depth Information
viewport = this.entity.viewport,
tileLayer = this.entity.collision,
tileX = Math.floor( (canvasX / viewport.scale +
viewport.x - tileLayer.p.x)
/ tileLayer.p.tileW),
tileY = Math.floor( (canvasY / viewport.scale +
viewport.y - tileLayer.p.y)
/ tileLayer.p.tileH);
return { x: tileX, y: tileY };
tool: function(touch) {
var stage = this.entity,
viewport = stage.viewport;
switch(this.selected) {
case 'move':
stage.centerOn(this.viewportX +
(this.start.pageX - touch.pageX)
/ viewport.scale,
this.viewportY +
(this.start.pageY - touch.pageY)
/ viewport.scale);
case 'paint':
var tile = this.tilePos(touch.pageX, touch.pageY);
case 'erase':
var tile = this.tilePos(touch.pageX, touch.pageY);
The touch method, called on touchstart or mousedown , grabs either the mouse event data or the data
for the first changed touch and stores the start position of the event as well as the original viewport center loca-
tion. It then calls the tool method, which does the actual work based on the currently-selected tool.
The drag method, called on touchmove or mousemove , first checks that there is a current action that the
editor is tracking, and if so it just calls the tool method to take whatever action is necessary.
Finally, the release method just sets the start property to null . Because that property is used by drag
to determine if it should be doing something, it effectively stops the tool.
The tilePos method has the somewhat involved task to figure out the exact tile location based on an x and
y location on the page. It determines this by first determining the pixel position on the Canvas element (stored
in canvasX and canvasY ) and then calculates the tile position (in tileX and tileY ) by determining an
accurate offset position for the viewport scale, the viewport location, and the tile layer offset and divides all
those by the size of each tile.
Search WWH ::

Custom Search