Better canvas zoom handling
This commit is contained in:
parent
7f3f53c75c
commit
d8cc14ae69
@ -3,6 +3,7 @@ package it.cavallium.warppi.gui.graphicengine.html;
|
|||||||
import java.io.IOException;
|
import java.io.IOException;
|
||||||
|
|
||||||
import org.teavm.jso.JSBody;
|
import org.teavm.jso.JSBody;
|
||||||
|
import org.teavm.jso.JSObject;
|
||||||
import org.teavm.jso.browser.Window;
|
import org.teavm.jso.browser.Window;
|
||||||
import org.teavm.jso.canvas.CanvasRenderingContext2D;
|
import org.teavm.jso.canvas.CanvasRenderingContext2D;
|
||||||
import org.teavm.jso.dom.events.Event;
|
import org.teavm.jso.dom.events.Event;
|
||||||
@ -16,6 +17,7 @@ import org.teavm.jso.dom.html.HTMLInputElement;
|
|||||||
import org.teavm.jso.dom.xml.NodeList;
|
import org.teavm.jso.dom.xml.NodeList;
|
||||||
|
|
||||||
import it.cavallium.warppi.Engine;
|
import it.cavallium.warppi.Engine;
|
||||||
|
import it.cavallium.warppi.StaticVars;
|
||||||
import it.cavallium.warppi.Platform.Semaphore;
|
import it.cavallium.warppi.Platform.Semaphore;
|
||||||
import it.cavallium.warppi.device.Keyboard;
|
import it.cavallium.warppi.device.Keyboard;
|
||||||
import it.cavallium.warppi.flow.BehaviorSubject;
|
import it.cavallium.warppi.flow.BehaviorSubject;
|
||||||
@ -33,8 +35,10 @@ public class HtmlEngine implements GraphicEngine {
|
|||||||
private RenderingLoop renderingLoop;
|
private RenderingLoop renderingLoop;
|
||||||
private HtmlRenderer renderer;
|
private HtmlRenderer renderer;
|
||||||
private int width, height;
|
private int width, height;
|
||||||
|
public int mult = 1;
|
||||||
private final int frameTime = (int) (1000d / 10d);
|
private final int frameTime = (int) (1000d / 10d);
|
||||||
private final BehaviorSubject<Integer[]> onResize = BehaviorSubject.create();
|
private final BehaviorSubject<Integer[]> onResize = BehaviorSubject.create();
|
||||||
|
private final BehaviorSubject<Float> onZoom = BehaviorSubject.create();
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
public int[] getSize() {
|
public int[] getSize() {
|
||||||
@ -66,7 +70,15 @@ public class HtmlEngine implements GraphicEngine {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private String previousValue = "";
|
private String previousValue = "";
|
||||||
|
|
||||||
|
@JSBody(params = { "ctx", "enabled" }, script = ""
|
||||||
|
+ "ctx.mozImageSmoothingEnabled = enabled;"
|
||||||
|
+ "ctx.oImageSmoothingEnabled = enabled;"
|
||||||
|
+ "ctx.webkitImageSmoothingEnabled = enabled;"
|
||||||
|
+ "ctx.msImageSmoothingEnabled = enabled;"
|
||||||
|
+ "ctx.imageSmoothingEnabled = enabled;")
|
||||||
|
public static native void setImageSmoothingEnabled(CanvasRenderingContext2D ctx, boolean enabled);
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
public void create(final Runnable onInitialized) {
|
public void create(final Runnable onInitialized) {
|
||||||
exitSemaphore = Engine.getPlatform().newSemaphore(0);
|
exitSemaphore = Engine.getPlatform().newSemaphore(0);
|
||||||
@ -75,6 +87,22 @@ public class HtmlEngine implements GraphicEngine {
|
|||||||
canvas = (HTMLCanvasElement) HtmlEngine.document.createElement("canvas");
|
canvas = (HTMLCanvasElement) HtmlEngine.document.createElement("canvas");
|
||||||
g = (CanvasRenderingContext2D) canvas.getContext("2d");
|
g = (CanvasRenderingContext2D) canvas.getContext("2d");
|
||||||
final HTMLInputElement keyInput = (HTMLInputElement) HtmlEngine.document.createElement("input");
|
final HTMLInputElement keyInput = (HTMLInputElement) HtmlEngine.document.createElement("input");
|
||||||
|
StaticVars.windowZoom$.subscribe((zoom) -> {
|
||||||
|
onZoom.onNext(zoom);
|
||||||
|
});
|
||||||
|
onZoom.subscribe((windowZoom) -> {
|
||||||
|
if (windowZoom != 0) {
|
||||||
|
canvas.setWidth((int)(480 / 1));
|
||||||
|
canvas.setHeight((int)(320 / 1));
|
||||||
|
canvas.getStyle().setProperty("zoom", "" + (windowZoom + 1));
|
||||||
|
canvas.getStyle().setProperty("max-height", (int)(44 / windowZoom) + "vh");
|
||||||
|
width = 480 / windowZoom.intValue();
|
||||||
|
height = 320 / windowZoom.intValue();
|
||||||
|
this.mult = windowZoom.intValue();
|
||||||
|
StaticVars.screenSize[0] = width;
|
||||||
|
StaticVars.screenSize[1] = height;
|
||||||
|
}
|
||||||
|
});
|
||||||
keyInput.setType("text");
|
keyInput.setType("text");
|
||||||
keyInput.getStyle().setProperty("opacity", "0.1");
|
keyInput.getStyle().setProperty("opacity", "0.1");
|
||||||
setDisplayMode(480, 320);
|
setDisplayMode(480, 320);
|
||||||
|
@ -12,7 +12,6 @@ public class HtmlRenderer implements Renderer {
|
|||||||
HtmlSkin currentSkin = null;
|
HtmlSkin currentSkin = null;
|
||||||
private final CanvasRenderingContext2D g;
|
private final CanvasRenderingContext2D g;
|
||||||
private final HtmlEngine e;
|
private final HtmlEngine e;
|
||||||
|
|
||||||
public HtmlRenderer(final HtmlEngine e, final CanvasRenderingContext2D g) {
|
public HtmlRenderer(final HtmlEngine e, final CanvasRenderingContext2D g) {
|
||||||
this.g = g;
|
this.g = g;
|
||||||
this.e = e;
|
this.e = e;
|
||||||
@ -105,7 +104,8 @@ public class HtmlRenderer implements Renderer {
|
|||||||
t0 -= y0;
|
t0 -= y0;
|
||||||
y0 = 0;
|
y0 = 0;
|
||||||
}
|
}
|
||||||
g.drawImage(currentSkin.getImgElement(), s0, t0, s1 - s0, t1 - t0, x0, y0, x1 - x0, y1 - y0);
|
HtmlEngine.setImageSmoothingEnabled(g, false);
|
||||||
|
g.drawImage(currentSkin.getImgElement(), s0, t0, s1 - s0, t1 - t0, x0 * e.mult, y0 * e.mult, (x1 - x0) * e.mult, (y1 - y0) * e.mult);
|
||||||
}
|
}
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
@ -113,7 +113,7 @@ public class HtmlRenderer implements Renderer {
|
|||||||
x += StaticVars.screenPos[0];
|
x += StaticVars.screenPos[0];
|
||||||
y += StaticVars.screenPos[1];
|
y += StaticVars.screenPos[1];
|
||||||
g.setFillStyle(currentColor);
|
g.setFillStyle(currentColor);
|
||||||
g.fillRect(x, y, width, height);
|
g.fillRect(x * e.mult, y * e.mult, width * e.mult, height * e.mult);
|
||||||
}
|
}
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
@ -136,7 +136,8 @@ public class HtmlRenderer implements Renderer {
|
|||||||
for (int i = 0; i < l; i++) {
|
for (int i = 0; i < l; i++) {
|
||||||
cpos = i * f.charW;
|
cpos = i * f.charW;
|
||||||
final int charIndex = text[i];
|
final int charIndex = text[i];
|
||||||
g.drawImage(f.imgEl, 0, charIndex * f.charH, f.charW, f.charH, x + cpos, y, f.charW, f.charH);
|
HtmlEngine.setImageSmoothingEnabled(g, false);
|
||||||
|
g.drawImage(f.imgEl, 0, charIndex * f.charH, f.charW, f.charH, (x + cpos) * e.mult, y * e.mult, f.charW * e.mult, f.charH * e.mult);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -149,11 +150,12 @@ public class HtmlRenderer implements Renderer {
|
|||||||
public void glDrawLine(final float x0, final float y0, final float x1, final float y1) {
|
public void glDrawLine(final float x0, final float y0, final float x1, final float y1) {
|
||||||
if (x1 - x0 > 0 && y1 - y0 > 0) {
|
if (x1 - x0 > 0 && y1 - y0 > 0) {
|
||||||
g.beginPath();
|
g.beginPath();
|
||||||
g.moveTo(x0, y0);
|
g.moveTo(x0 * e.mult, y0 * e.mult);
|
||||||
g.lineTo(x1, y1);
|
g.lineTo(x1 * e.mult, y1 * e.mult);
|
||||||
|
g.setLineWidth(e.mult);
|
||||||
g.stroke();
|
g.stroke();
|
||||||
} else
|
} else
|
||||||
g.fillRect(x0, y0, x1 - x0 + 1, y1 - y0 + 1);
|
g.fillRect(x0 * e.mult, y0 * e.mult, (x1 - x0 + 1) * e.mult, (y1 - y0 + 1) * e.mult);
|
||||||
}
|
}
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
@ -226,7 +228,7 @@ public class HtmlRenderer implements Renderer {
|
|||||||
@Override
|
@Override
|
||||||
public void glClear(final int screenWidth, final int screenHeight) {
|
public void glClear(final int screenWidth, final int screenHeight) {
|
||||||
g.setFillStyle(clearColor);
|
g.setFillStyle(clearColor);
|
||||||
g.fillRect(0, 0, screenWidth, screenHeight);
|
g.fillRect(0, 0, screenWidth * e.mult, screenHeight * e.mult);
|
||||||
g.setFillStyle(currentColor);
|
g.setFillStyle(currentColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user