[d565449] | 1 | "use strict";
|
---|
| 2 | Object.defineProperty(exports, "__esModule", { value: true });
|
---|
| 3 | exports.HitCanvas = exports.SceneCanvas = exports.Canvas = void 0;
|
---|
| 4 | const Util_1 = require("./Util");
|
---|
| 5 | const Context_1 = require("./Context");
|
---|
| 6 | const Global_1 = require("./Global");
|
---|
| 7 | const Factory_1 = require("./Factory");
|
---|
| 8 | const Validators_1 = require("./Validators");
|
---|
| 9 | var _pixelRatio;
|
---|
| 10 | function getDevicePixelRatio() {
|
---|
| 11 | if (_pixelRatio) {
|
---|
| 12 | return _pixelRatio;
|
---|
| 13 | }
|
---|
| 14 | var canvas = Util_1.Util.createCanvasElement();
|
---|
| 15 | var context = canvas.getContext('2d');
|
---|
| 16 | _pixelRatio = (function () {
|
---|
| 17 | var devicePixelRatio = Global_1.Konva._global.devicePixelRatio || 1, backingStoreRatio = context.webkitBackingStorePixelRatio ||
|
---|
| 18 | context.mozBackingStorePixelRatio ||
|
---|
| 19 | context.msBackingStorePixelRatio ||
|
---|
| 20 | context.oBackingStorePixelRatio ||
|
---|
| 21 | context.backingStorePixelRatio ||
|
---|
| 22 | 1;
|
---|
| 23 | return devicePixelRatio / backingStoreRatio;
|
---|
| 24 | })();
|
---|
| 25 | Util_1.Util.releaseCanvas(canvas);
|
---|
| 26 | return _pixelRatio;
|
---|
| 27 | }
|
---|
| 28 | class Canvas {
|
---|
| 29 | constructor(config) {
|
---|
| 30 | this.pixelRatio = 1;
|
---|
| 31 | this.width = 0;
|
---|
| 32 | this.height = 0;
|
---|
| 33 | this.isCache = false;
|
---|
| 34 | var conf = config || {};
|
---|
| 35 | var pixelRatio = conf.pixelRatio || Global_1.Konva.pixelRatio || getDevicePixelRatio();
|
---|
| 36 | this.pixelRatio = pixelRatio;
|
---|
| 37 | this._canvas = Util_1.Util.createCanvasElement();
|
---|
| 38 | this._canvas.style.padding = '0';
|
---|
| 39 | this._canvas.style.margin = '0';
|
---|
| 40 | this._canvas.style.border = '0';
|
---|
| 41 | this._canvas.style.background = 'transparent';
|
---|
| 42 | this._canvas.style.position = 'absolute';
|
---|
| 43 | this._canvas.style.top = '0';
|
---|
| 44 | this._canvas.style.left = '0';
|
---|
| 45 | }
|
---|
| 46 | getContext() {
|
---|
| 47 | return this.context;
|
---|
| 48 | }
|
---|
| 49 | getPixelRatio() {
|
---|
| 50 | return this.pixelRatio;
|
---|
| 51 | }
|
---|
| 52 | setPixelRatio(pixelRatio) {
|
---|
| 53 | var previousRatio = this.pixelRatio;
|
---|
| 54 | this.pixelRatio = pixelRatio;
|
---|
| 55 | this.setSize(this.getWidth() / previousRatio, this.getHeight() / previousRatio);
|
---|
| 56 | }
|
---|
| 57 | setWidth(width) {
|
---|
| 58 | this.width = this._canvas.width = width * this.pixelRatio;
|
---|
| 59 | this._canvas.style.width = width + 'px';
|
---|
| 60 | var pixelRatio = this.pixelRatio, _context = this.getContext()._context;
|
---|
| 61 | _context.scale(pixelRatio, pixelRatio);
|
---|
| 62 | }
|
---|
| 63 | setHeight(height) {
|
---|
| 64 | this.height = this._canvas.height = height * this.pixelRatio;
|
---|
| 65 | this._canvas.style.height = height + 'px';
|
---|
| 66 | var pixelRatio = this.pixelRatio, _context = this.getContext()._context;
|
---|
| 67 | _context.scale(pixelRatio, pixelRatio);
|
---|
| 68 | }
|
---|
| 69 | getWidth() {
|
---|
| 70 | return this.width;
|
---|
| 71 | }
|
---|
| 72 | getHeight() {
|
---|
| 73 | return this.height;
|
---|
| 74 | }
|
---|
| 75 | setSize(width, height) {
|
---|
| 76 | this.setWidth(width || 0);
|
---|
| 77 | this.setHeight(height || 0);
|
---|
| 78 | }
|
---|
| 79 | toDataURL(mimeType, quality) {
|
---|
| 80 | try {
|
---|
| 81 | return this._canvas.toDataURL(mimeType, quality);
|
---|
| 82 | }
|
---|
| 83 | catch (e) {
|
---|
| 84 | try {
|
---|
| 85 | return this._canvas.toDataURL();
|
---|
| 86 | }
|
---|
| 87 | catch (err) {
|
---|
| 88 | Util_1.Util.error('Unable to get data URL. ' +
|
---|
| 89 | err.message +
|
---|
| 90 | ' For more info read https://konvajs.org/docs/posts/Tainted_Canvas.html.');
|
---|
| 91 | return '';
|
---|
| 92 | }
|
---|
| 93 | }
|
---|
| 94 | }
|
---|
| 95 | }
|
---|
| 96 | exports.Canvas = Canvas;
|
---|
| 97 | Factory_1.Factory.addGetterSetter(Canvas, 'pixelRatio', undefined, (0, Validators_1.getNumberValidator)());
|
---|
| 98 | class SceneCanvas extends Canvas {
|
---|
| 99 | constructor(config = { width: 0, height: 0, willReadFrequently: false }) {
|
---|
| 100 | super(config);
|
---|
| 101 | this.context = new Context_1.SceneContext(this, {
|
---|
| 102 | willReadFrequently: config.willReadFrequently,
|
---|
| 103 | });
|
---|
| 104 | this.setSize(config.width, config.height);
|
---|
| 105 | }
|
---|
| 106 | }
|
---|
| 107 | exports.SceneCanvas = SceneCanvas;
|
---|
| 108 | class HitCanvas extends Canvas {
|
---|
| 109 | constructor(config = { width: 0, height: 0 }) {
|
---|
| 110 | super(config);
|
---|
| 111 | this.hitCanvas = true;
|
---|
| 112 | this.context = new Context_1.HitContext(this);
|
---|
| 113 | this.setSize(config.width, config.height);
|
---|
| 114 | }
|
---|
| 115 | }
|
---|
| 116 | exports.HitCanvas = HitCanvas;
|
---|