Better canvas zoom handling

This commit is contained in:
Andrea Cavalli 2018-09-26 01:06:32 +02:00
parent 7f3f53c75c
commit d8cc14ae69
2 changed files with 39 additions and 9 deletions

View File

@ -3,6 +3,7 @@ package it.cavallium.warppi.gui.graphicengine.html;
import java.io.IOException;
import org.teavm.jso.JSBody;
import org.teavm.jso.JSObject;
import org.teavm.jso.browser.Window;
import org.teavm.jso.canvas.CanvasRenderingContext2D;
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 it.cavallium.warppi.Engine;
import it.cavallium.warppi.StaticVars;
import it.cavallium.warppi.Platform.Semaphore;
import it.cavallium.warppi.device.Keyboard;
import it.cavallium.warppi.flow.BehaviorSubject;
@ -33,8 +35,10 @@ public class HtmlEngine implements GraphicEngine {
private RenderingLoop renderingLoop;
private HtmlRenderer renderer;
private int width, height;
public int mult = 1;
private final int frameTime = (int) (1000d / 10d);
private final BehaviorSubject<Integer[]> onResize = BehaviorSubject.create();
private final BehaviorSubject<Float> onZoom = BehaviorSubject.create();
@Override
public int[] getSize() {
@ -67,6 +71,14 @@ public class HtmlEngine implements GraphicEngine {
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
public void create(final Runnable onInitialized) {
exitSemaphore = Engine.getPlatform().newSemaphore(0);
@ -75,6 +87,22 @@ public class HtmlEngine implements GraphicEngine {
canvas = (HTMLCanvasElement) HtmlEngine.document.createElement("canvas");
g = (CanvasRenderingContext2D) canvas.getContext("2d");
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.getStyle().setProperty("opacity", "0.1");
setDisplayMode(480, 320);

View File

@ -12,7 +12,6 @@ public class HtmlRenderer implements Renderer {
HtmlSkin currentSkin = null;
private final CanvasRenderingContext2D g;
private final HtmlEngine e;
public HtmlRenderer(final HtmlEngine e, final CanvasRenderingContext2D g) {
this.g = g;
this.e = e;
@ -105,7 +104,8 @@ public class HtmlRenderer implements Renderer {
t0 -= y0;
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
@ -113,7 +113,7 @@ public class HtmlRenderer implements Renderer {
x += StaticVars.screenPos[0];
y += StaticVars.screenPos[1];
g.setFillStyle(currentColor);
g.fillRect(x, y, width, height);
g.fillRect(x * e.mult, y * e.mult, width * e.mult, height * e.mult);
}
@Override
@ -136,7 +136,8 @@ public class HtmlRenderer implements Renderer {
for (int i = 0; i < l; i++) {
cpos = i * f.charW;
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) {
if (x1 - x0 > 0 && y1 - y0 > 0) {
g.beginPath();
g.moveTo(x0, y0);
g.lineTo(x1, y1);
g.moveTo(x0 * e.mult, y0 * e.mult);
g.lineTo(x1 * e.mult, y1 * e.mult);
g.setLineWidth(e.mult);
g.stroke();
} 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
@ -226,7 +228,7 @@ public class HtmlRenderer implements Renderer {
@Override
public void glClear(final int screenWidth, final int screenHeight) {
g.setFillStyle(clearColor);
g.fillRect(0, 0, screenWidth, screenHeight);
g.fillRect(0, 0, screenWidth * e.mult, screenHeight * e.mult);
g.setFillStyle(currentColor);
}