mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Merge pull request #94 from juliandescottes/add-export2png
Add export2png
This commit is contained in:
commit
29a44b79c5
|
@ -22,11 +22,15 @@
|
||||||
background-image: url(../img/actions/save.png);
|
background-image: url(../img/actions/save.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tool-icon.tool-export {
|
||||||
|
background-image: url(../img/actions/image-export.png);
|
||||||
|
background-position: 6px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
.tool-icon.tool-add-frame {
|
.tool-icon.tool-add-frame {
|
||||||
background-image: url(../img/actions/add.png);
|
background-image: url(../img/actions/add.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Tool icons:
|
* Tool icons:
|
||||||
*/
|
*/
|
||||||
|
|
BIN
img/actions/image-export.png
Normal file
BIN
img/actions/image-export.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 909 B |
|
@ -26,6 +26,7 @@
|
||||||
<!-- TODO: Remove that from here or change CSS class naming since
|
<!-- TODO: Remove that from here or change CSS class naming since
|
||||||
they are framesheet level actions, not tools -->
|
they are framesheet level actions, not tools -->
|
||||||
<li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()" rel="tooltip" data-placement="bottom" ></li>
|
<li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()" rel="tooltip" data-placement="bottom" ></li>
|
||||||
|
<li class="tool-icon tool-export" data-tool-id="tool-export" title="Export" onclick="piskel.exportToPNG()" rel="tooltip" data-placement="bottom" ></li>
|
||||||
<li class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame" rel="tooltip" data-placement="bottom" ></li>
|
<li class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame" rel="tooltip" data-placement="bottom" ></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
@ -84,7 +85,8 @@
|
||||||
|
|
||||||
<!-- Libraries -->
|
<!-- Libraries -->
|
||||||
<script src="js/utils/core.js"></script>
|
<script src="js/utils/core.js"></script>
|
||||||
<script src="js/utils/pixelUtils.js"></script>
|
<script src="js/utils/PixelUtils.js"></script>
|
||||||
|
<script src="js/utils/CanvasUtils.js"></script>
|
||||||
<script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
|
<script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
|
||||||
|
|
||||||
<!-- Application libraries-->
|
<!-- Application libraries-->
|
||||||
|
@ -98,8 +100,9 @@
|
||||||
<script src="js/selection/ShapeSelection.js"></script>
|
<script src="js/selection/ShapeSelection.js"></script>
|
||||||
<!-- Rendering -->
|
<!-- Rendering -->
|
||||||
<script src="js/rendering/FrameRenderer.js"></script>
|
<script src="js/rendering/FrameRenderer.js"></script>
|
||||||
<script src="js/controller/DrawingController.js"></script>
|
<script src="js/rendering/SpritesheetRenderer.js"></script>
|
||||||
<!-- Controllers -->
|
<!-- Controllers -->
|
||||||
|
<script src="js/controller/DrawingController.js"></script>
|
||||||
<script src="js/controller/PreviewFilmController.js"></script>
|
<script src="js/controller/PreviewFilmController.js"></script>
|
||||||
<script src="js/controller/AnimatedPreviewController.js"></script>
|
<script src="js/controller/AnimatedPreviewController.js"></script>
|
||||||
<script src="js/controller/ToolController.js"></script>
|
<script src="js/controller/ToolController.js"></script>
|
||||||
|
|
|
@ -7,6 +7,14 @@
|
||||||
this.currentFrameIndex = 0;
|
this.currentFrameIndex = 0;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
ns.FrameSheet.prototype.getHeight = function () {
|
||||||
|
return this.height;
|
||||||
|
};
|
||||||
|
|
||||||
|
ns.FrameSheet.prototype.getWidth = function () {
|
||||||
|
return this.width;
|
||||||
|
};
|
||||||
|
|
||||||
ns.FrameSheet.prototype.addEmptyFrame = function () {
|
ns.FrameSheet.prototype.addEmptyFrame = function () {
|
||||||
this.addFrame(ns.Frame.createEmpty(this.width, this.height));
|
this.addFrame(ns.Frame.createEmpty(this.width, this.height));
|
||||||
};
|
};
|
||||||
|
|
|
@ -163,6 +163,13 @@ $.namespace("pskl");
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open new window with spritesheet as PNG
|
||||||
|
*/
|
||||||
|
exportToPNG : function () {
|
||||||
|
(new pskl.rendering.SpritesheetRenderer(frameSheet)).render();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -63,17 +63,6 @@
|
||||||
this.lastRenderedFrame = frame;
|
this.lastRenderedFrame = frame;
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.FrameRenderer.prototype.drawPixel = function (col, row, frame) {
|
|
||||||
var context = this.getCanvas_(frame).getContext('2d');
|
|
||||||
var color = frame.getPixel(col, row);
|
|
||||||
if(color == Constants.TRANSPARENT_COLOR) {
|
|
||||||
context.clearRect(this.getFramePos_(col), this.getFramePos_(row), this.dpi, this.dpi);
|
|
||||||
} else {
|
|
||||||
this.renderPixel_(color, col, row, context);
|
|
||||||
}
|
|
||||||
this.lastRenderedFrame = frame;
|
|
||||||
};
|
|
||||||
|
|
||||||
ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
|
ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
|
||||||
if(color != Constants.TRANSPARENT_COLOR) {
|
if(color != Constants.TRANSPARENT_COLOR) {
|
||||||
context.fillStyle = color;
|
context.fillStyle = color;
|
||||||
|
@ -136,23 +125,15 @@
|
||||||
var col = frame.getWidth(),
|
var col = frame.getWidth(),
|
||||||
row = frame.getHeight();
|
row = frame.getHeight();
|
||||||
|
|
||||||
var canvas = document.createElement("canvas");
|
|
||||||
|
|
||||||
var pixelWidth = col * this.dpi + this.gridStrokeWidth * (col - 1);
|
var pixelWidth = col * this.dpi + this.gridStrokeWidth * (col - 1);
|
||||||
var pixelHeight = row * this.dpi + this.gridStrokeWidth * (row - 1);
|
var pixelHeight = row * this.dpi + this.gridStrokeWidth * (row - 1);
|
||||||
canvas.setAttribute("width", pixelWidth);
|
var canvas = pskl.CanvasUtils.createCanvas(pixelWidth, pixelHeight, ["canvas", this.className]);
|
||||||
canvas.setAttribute("height", pixelHeight);
|
|
||||||
var canvasClassname = "canvas";
|
|
||||||
if(this.className) {
|
|
||||||
canvasClassname += " " + this.className;
|
|
||||||
}
|
|
||||||
canvas.setAttribute("class", canvasClassname);
|
|
||||||
this.container.append(canvas);
|
this.container.append(canvas);
|
||||||
|
|
||||||
if(this.gridStrokeWidth > 0) {
|
if(this.gridStrokeWidth > 0) {
|
||||||
this.drawGrid_(canvas, pixelWidth, pixelHeight, col, row);
|
this.drawGrid_(canvas, pixelWidth, pixelHeight, col, row);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
this.canvas = canvas;
|
this.canvas = canvas;
|
||||||
this.canvasConfigDirty = false;
|
this.canvasConfigDirty = false;
|
||||||
|
|
57
js/rendering/SpritesheetRenderer.js
Normal file
57
js/rendering/SpritesheetRenderer.js
Normal file
|
@ -0,0 +1,57 @@
|
||||||
|
(function () {
|
||||||
|
|
||||||
|
var ns = $.namespace("pskl.rendering");
|
||||||
|
|
||||||
|
ns.SpritesheetRenderer = function (framesheet) {
|
||||||
|
this.framesheet = framesheet;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Will open a new window displaying the spritesheet as a png
|
||||||
|
*/
|
||||||
|
ns.SpritesheetRenderer.prototype.render = function () {
|
||||||
|
var canvas = this.createCanvas_();
|
||||||
|
for (var i = 0 ; i < this.framesheet.getFrameCount() ; i++) {
|
||||||
|
var frame = this.framesheet.getFrameByIndex(i);
|
||||||
|
this.drawFrameInCanvas_(frame, canvas, i * this.framesheet.getWidth(), 0);
|
||||||
|
}
|
||||||
|
this.openCanvasAsPNGInWindow_(canvas);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO : (Julz) Mutualize with code already present in FrameRenderer
|
||||||
|
*/
|
||||||
|
ns.SpritesheetRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) {
|
||||||
|
var context = canvas.getContext('2d');
|
||||||
|
for(var col = 0, width = frame.getWidth(); col < width; col++) {
|
||||||
|
for(var row = 0, height = frame.getHeight(); row < height; row++) {
|
||||||
|
var color = frame.getPixel(col, row);
|
||||||
|
if(color != Constants.TRANSPARENT_COLOR) {
|
||||||
|
context.fillStyle = color;
|
||||||
|
context.fillRect(col + offsetWidth, row + offsetHeight, 1, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ns.SpritesheetRenderer.prototype.createCanvas_ = function () {
|
||||||
|
var frameCount = this.framesheet.getFrameCount();
|
||||||
|
if (frameCount > 0){
|
||||||
|
var width = frameCount * this.framesheet.getWidth();
|
||||||
|
var height = this.framesheet.getHeight();
|
||||||
|
return pskl.CanvasUtils.createCanvas(width, height);
|
||||||
|
} else {
|
||||||
|
throw "Cannot render empty Spritesheet"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ns.SpritesheetRenderer.prototype.openCanvasAsPNGInWindow_ = function (canvas) {
|
||||||
|
var options = [
|
||||||
|
"dialog=yes", "scrollbars=no", "status=no",
|
||||||
|
"width=" + this.framesheet.getWidth() * this.framesheet.getFrameCount(),
|
||||||
|
"height=" + this.framesheet.getHeight()
|
||||||
|
].join(",");
|
||||||
|
|
||||||
|
window.open(canvas.toDataURL("image/png"), "piskel-export", options);
|
||||||
|
};
|
||||||
|
})();
|
22
js/utils/CanvasUtils.js
Normal file
22
js/utils/CanvasUtils.js
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
(function () {
|
||||||
|
var ns = $.namespace("pskl");
|
||||||
|
|
||||||
|
ns.CanvasUtils = {
|
||||||
|
createCanvas : function (width, height, classList) {
|
||||||
|
var canvas = document.createElement("canvas");
|
||||||
|
canvas.setAttribute("width", width);
|
||||||
|
canvas.setAttribute("height", height);
|
||||||
|
|
||||||
|
if (typeof classList == "string") {
|
||||||
|
classList = [classList];
|
||||||
|
}
|
||||||
|
if (Array.isArray(classList)) {
|
||||||
|
for (var i = 0 ; i < classList.length ; i++) {
|
||||||
|
canvas.classList.add(classList[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return canvas;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})();
|
Loading…
Reference in New Issue
Block a user