IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-23 09:26:54 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Render wizard previews for high-DPI displays (#7371)

Browse Source 
* UX: Render wizard previews for high-DPI displays

Sets up a canvas element of twice the required dimensions, scales all coordinates by 2x, then shrinks the display in css.

* Use window.devicePixelRatio to determine scale factor
This commit is contained in:
David Taylor 2019-04-15 07:16:05 +01:00 committed by Sam
parent e50494bcde
commit fd0de64e0d
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/javascripts/wizard/lib/preview.js.es6
View File

@ -17,21 +17,27 @@ function canvasFor(image, w, h) {
w = Math.ceil(w);
h = Math.ceil(h);
const scale = window.devicePixelRatio;
const can = document.createElement("canvas");
can.width = w;
can.height = h;
can.width = w * scale;
can.height = h * scale;
const ctx = can.getContext("2d");
ctx.scale(scale, scale);
ctx.drawImage(image, 0, 0, w, h);
return can;
}
export function createPreviewComponent(width, height, obj) {
const scale = window.devicePixelRatio;
return Ember.Component.extend(
{
layoutName: "components/theme-preview",
width,
height,
elementWidth: width * scale,
elementHeight: height * scale,
ctx: null,
loaded: false,
@ -39,6 +45,7 @@ export function createPreviewComponent(width, height, obj) {
this._super(...arguments);
const c = this.$("canvas")[0];
this.ctx = c.getContext("2d");
this.ctx.scale(2, 2);
this.reload();
},

2
app/assets/javascripts/wizard/templates/components/theme-preview.hbs
View File

@ -1,4 +1,4 @@
<div class='preview-area'>
<canvas width={{width}} height={{height}}>
<canvas width={{elementWidth}} height={{elementHeight}} style={{concat "width:" width "; height:" height ";"}}>
</canvas>
</div>