64 lines
2.3 KiB
JavaScript
64 lines
2.3 KiB
JavaScript
|
(function () {
|
||
|
|
var ns = $.namespace("pskl.rendering");
|
||
|
|
ns.DrawingController = function (frame, container, dpi) {
|
||
|
|
this.dpi = dpi;
|
||
|
|
|
||
|
|
// Public
|
||
|
|
this.frame = frame;
|
||
|
|
this.overlay = ns.Frame.createEmptyFromFrame(frame);
|
||
|
|
|
||
|
|
// Private
|
||
|
|
this.container = container;
|
||
|
|
this.mainCanvas = this.createMainCanvas();
|
||
|
|
this.overlayCanvas = this.createOverlayCanvas();
|
||
|
|
this.renderer = new ns.FrameRenderer();
|
||
|
|
};
|
||
|
|
|
||
|
|
ns.DrawingController.prototype.renderFrame = function () {
|
||
|
|
this.renderer.render(this.frame, this.mainCanvas, this.dpi);
|
||
|
|
};
|
||
|
|
|
||
|
|
ns.DrawingController.prototype.renderFramePixel = function (col, row) {
|
||
|
|
this.renderer.drawPixel(col, row, this.frame, this.mainCanvas, this.dpi);
|
||
|
|
};
|
||
|
|
|
||
|
|
ns.DrawingController.prototype.renderOverlay = function () {
|
||
|
|
this.renderer.render(this.overlay, this.overlayCanvas, this.dpi);
|
||
|
|
};
|
||
|
|
|
||
|
|
ns.DrawingController.prototype.clearOverlay = function () {
|
||
|
|
this.overlay = ns.Frame.createEmptyFromFrame(this.frame);
|
||
|
|
this.overlayCanvas.getContext("2d").clearRect(0, 0, this.overlayCanvas.width, this.overlayCanvas.height);
|
||
|
|
};
|
||
|
|
|
||
|
|
ns.DrawingController.prototype.createMainCanvas = function () {
|
||
|
|
var mainCanvas = this.createCanvas();
|
||
|
|
mainCanvas.className = "canvas-main";
|
||
|
|
this.container.appendChild(mainCanvas);
|
||
|
|
return mainCanvas;
|
||
|
|
};
|
||
|
|
|
||
|
|
// For some tools, we need a fake canvas that overlay the drawing canvas. These tools are
|
||
|
|
// generally 'drap and release' based tools (stroke, selection, etc) and the fake canvas
|
||
|
|
// will help to visualize the tool interaction (without modifying the canvas).
|
||
|
|
ns.DrawingController.prototype.createOverlayCanvas = function () {
|
||
|
|
var overlayCanvas = this.createCanvas();
|
||
|
|
overlayCanvas.className = "canvas-overlay";
|
||
|
|
this.container.appendChild(overlayCanvas);
|
||
|
|
return overlayCanvas;
|
||
|
|
};
|
||
|
|
|
||
|
|
// For some tools, we need a fake canvas that overlay the drawing canvas. These tools are
|
||
|
|
// generally 'drap and release' based tools (stroke, selection, etc) and the fake canvas
|
||
|
|
// will help to visualize the tool interaction (without modifying the canvas).
|
||
|
|
ns.DrawingController.prototype.createCanvas = function () {
|
||
|
|
var width = this.frame.getWidth(),
|
||
|
|
height = this.frame.getHeight();
|
||
|
|
|
||
|
|
var canvas = document.createElement("canvas");
|
||
|
|
canvas.setAttribute("width", width * this.dpi);
|
||
|
|
canvas.setAttribute("height", height * this.dpi);
|
||
|
|
|
||
|
|
return canvas;
|
||
|
|
};
|
||
|
|
})();
|