mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Feature #470: Tiled drawing improvements

Browse Source
This commit is contained in:
juliandescottes 2016-05-15 01:35:00 +02:00 committed by Julian Descottes
parent 51da3ec80d
commit f2ff3bc74e
2 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/js/rendering/frame/CachedFrameRenderer.js
View File

@ -34,6 +34,7 @@
var serializedFrame = [ var serializedFrame = [
this.getZoom(), this.getZoom(),
this.getGridWidth(), this.getGridWidth(),
pskl.UserSettings.get('TILED_PREVIEW'),
offset.x, offset.y, offset.x, offset.y,
size.width, size.height, size.width, size.height,
frame.getHash() frame.getHash()

49
src/js/rendering/frame/FrameRenderer.js
View File

@ -237,6 +237,10 @@
this.canvas = pskl.utils.CanvasUtils.createCanvas(frame.getWidth(), frame.getHeight()); this.canvas = pskl.utils.CanvasUtils.createCanvas(frame.getWidth(), frame.getHeight());
} }
var w = this.canvas.width;
var h = this.canvas.height;
var z = this.zoom;
// Draw in canvas // Draw in canvas
pskl.utils.FrameUtils.drawToCanvas(frame, this.canvas); pskl.utils.FrameUtils.drawToCanvas(frame, this.canvas);
@ -245,31 +249,46 @@
var displayContext = this.displayCanvas.getContext('2d'); var displayContext = this.displayCanvas.getContext('2d');
displayContext.save(); displayContext.save();
var smallerHeight = this.canvas.height * this.zoom < this.displayCanvas.height; // Draw background
var smallerWidth = this.canvas.width * this.zoom < this.displayCanvas.width; displayContext.fillStyle = Constants.ZOOMED_OUT_BACKGROUND_COLOR;
if (smallerHeight || smallerWidth) { displayContext.fillRect(0, 0, this.displayCanvas.width - 1, this.displayCanvas.height - 1);
displayContext.fillStyle = Constants.ZOOMED_OUT_BACKGROUND_COLOR;
displayContext.fillRect(0, 0, this.displayCanvas.width - 1, this.displayCanvas.height - 1);
}
displayContext.translate( displayContext.translate(
this.margin.x - this.offset.x * this.zoom, this.margin.x - this.offset.x * z,
this.margin.y - this.offset.y * this.zoom this.margin.y - this.offset.y * z
); );
displayContext.clearRect(0, 0, this.canvas.width * this.zoom, this.canvas.height * this.zoom); if (pskl.UserSettings.get('TILED_PREVIEW')) {
displayContext.clearRect(-1 * w * z, -1 * h * z, 3 * w * z, 3 * h * z);
var isIE10 = pskl.utils.UserAgent.isIE && pskl.utils.UserAgent.version === 10; } else {
displayContext.clearRect(0, 0, w * z, h * z);
}
var gridWidth = this.computeGridWidthForDisplay_(); var gridWidth = this.computeGridWidthForDisplay_();
var isGridEnabled = gridWidth > 0; if (gridWidth > 0) {
if (isGridEnabled || isIE10) { var scaled = pskl.utils.ImageResizer.resizeNearestNeighbour(this.canvas, z, gridWidth);
var scaled = pskl.utils.ImageResizer.resizeNearestNeighbour(this.canvas, this.zoom, gridWidth);
if (pskl.UserSettings.get('TILED_PREVIEW')) {
this.drawTiledFrames_(displayContext, scaled, w, h, z);
}
displayContext.drawImage(scaled, 0, 0); displayContext.drawImage(scaled, 0, 0);
} else { } else {
displayContext.scale(this.zoom, this.zoom); displayContext.scale(z, z);
if (pskl.UserSettings.get('TILED_PREVIEW')) {
this.drawTiledFrames_(displayContext, this.canvas, w, h, 1);
}
displayContext.drawImage(this.canvas, 0, 0); displayContext.drawImage(this.canvas, 0, 0);
} }
displayContext.restore(); displayContext.restore();
}; };
ns.FrameRenderer.prototype.drawTiledFrames_ = function (context, image, w, h, z) {
context.fillStyle = 'rgba(255,255,255,0.5)';
[[0, -1], [0, 1], [-1, -1], [-1, 0], [-1, 1], [1, -1], [1, 0], [1, 1]].forEach(function (d) {
context.drawImage(image, d[0] * w * z, d[1] * h * z);
context.fillRect(d[0] * w * z, d[1] * h * z, w * z, h * z);
});
};
})(); })();