mirror of
https://github.com/emilk/egui.git
synced 2026-08-30 21:30:03 -04:00
Rounded corners and antialiasing
This commit is contained in:
Emil Ernerfeldt
Binary file not shown.
113
docs/frontend.js
113
docs/frontend.js
@@ -1,75 +1,3 @@
|
||||
// ----------------------------------------------------------------------------
|
||||
// Canvas painting:
|
||||
function style_from_color(color) {
|
||||
return "rgba(" + color.r + ", " + color.g + ", " + color.b + ", " + color.a / 255.0 + ")";
|
||||
}
|
||||
function paint_command(canvas, cmd) {
|
||||
var ctx = canvas.getContext("2d");
|
||||
// console.log(`cmd: ${JSON.stringify(cmd)}`);
|
||||
switch (cmd.kind) {
|
||||
case "circle":
|
||||
ctx.beginPath();
|
||||
ctx.arc(cmd.center.x, cmd.center.y, cmd.radius, 0, 2 * Math.PI, false);
|
||||
if (cmd.fill_color) {
|
||||
ctx.fillStyle = style_from_color(cmd.fill_color);
|
||||
ctx.fill();
|
||||
}
|
||||
if (cmd.outline) {
|
||||
ctx.lineWidth = cmd.outline.width;
|
||||
ctx.strokeStyle = style_from_color(cmd.outline.color);
|
||||
ctx.stroke();
|
||||
}
|
||||
return;
|
||||
case "clear":
|
||||
ctx.fillStyle = style_from_color(cmd.fill_color);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
return;
|
||||
case "line":
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(cmd.points[0].x, cmd.points[0].y);
|
||||
for (var _i = 0, _a = cmd.points; _i < _a.length; _i++) {
|
||||
var point = _a[_i];
|
||||
ctx.lineTo(point.x, point.y);
|
||||
}
|
||||
ctx.lineWidth = cmd.width;
|
||||
ctx.strokeStyle = style_from_color(cmd.color);
|
||||
ctx.stroke();
|
||||
return;
|
||||
case "rect":
|
||||
var x = cmd.pos.x;
|
||||
var y = cmd.pos.y;
|
||||
var width = cmd.size.x;
|
||||
var height = cmd.size.y;
|
||||
var r = Math.min(cmd.corner_radius, width / 2, height / 2);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + r, y);
|
||||
ctx.lineTo(x + width - r, y);
|
||||
ctx.quadraticCurveTo(x + width, y, x + width, y + r);
|
||||
ctx.lineTo(x + width, y + height - r);
|
||||
ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
|
||||
ctx.lineTo(x + r, y + height);
|
||||
ctx.quadraticCurveTo(x, y + height, x, y + height - r);
|
||||
ctx.lineTo(x, y + r);
|
||||
ctx.quadraticCurveTo(x, y, x + r, y);
|
||||
ctx.closePath();
|
||||
if (cmd.fill_color) {
|
||||
ctx.fillStyle = style_from_color(cmd.fill_color);
|
||||
ctx.fill();
|
||||
}
|
||||
if (cmd.outline) {
|
||||
ctx.lineWidth = cmd.outline.width;
|
||||
ctx.strokeStyle = style_from_color(cmd.outline.color);
|
||||
ctx.stroke();
|
||||
}
|
||||
return;
|
||||
case "text":
|
||||
ctx.fillStyle = style_from_color(cmd.fill_color);
|
||||
ctx.font = cmd.font_size + "px " + cmd.font_name;
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.fillText(cmd.text, cmd.pos.x, cmd.pos.y);
|
||||
return;
|
||||
}
|
||||
}
|
||||
// we'll defer our execution until the wasm is ready to go
|
||||
function wasm_loaded() {
|
||||
console.log("wasm loaded");
|
||||
@@ -79,55 +7,24 @@ function wasm_loaded() {
|
||||
// initialization and return to us a promise when it's done
|
||||
wasm_bindgen("./emgui_wasm_bg.wasm")
|
||||
.then(wasm_loaded)["catch"](console.error);
|
||||
function rust_gui(input) {
|
||||
return JSON.parse(wasm_bindgen.show_gui(JSON.stringify(input)));
|
||||
}
|
||||
// ----------------------------------------------------------------------------
|
||||
function js_gui(input) {
|
||||
var commands = [];
|
||||
commands.push({
|
||||
fillStyle: "#111111",
|
||||
kind: "clear"
|
||||
});
|
||||
commands.push({
|
||||
fillStyle: "#ff1111",
|
||||
kind: "rect",
|
||||
pos: { x: 100, y: 100 },
|
||||
radius: 20,
|
||||
size: { x: 200, y: 100 }
|
||||
});
|
||||
return commands;
|
||||
}
|
||||
var WEB_GL = true;
|
||||
var g_webgl_painter = null;
|
||||
function paint_gui(canvas, input) {
|
||||
if (WEB_GL) {
|
||||
if (g_webgl_painter === null) {
|
||||
g_webgl_painter = wasm_bindgen.new_webgl_painter("canvas");
|
||||
}
|
||||
wasm_bindgen.paint_webgl(g_webgl_painter, JSON.stringify(input));
|
||||
}
|
||||
else {
|
||||
var commands = rust_gui(input);
|
||||
for (var _i = 0, commands_1 = commands; _i < commands_1.length; _i++) {
|
||||
var cmd = commands_1[_i];
|
||||
commands.unshift({
|
||||
fill_color: { r: 0, g: 0, b: 0, a: 0 },
|
||||
kind: "clear"
|
||||
});
|
||||
paint_command(canvas, cmd);
|
||||
}
|
||||
if (g_webgl_painter === null) {
|
||||
g_webgl_painter = wasm_bindgen.new_webgl_painter("canvas");
|
||||
}
|
||||
wasm_bindgen.paint_webgl(g_webgl_painter, JSON.stringify(input));
|
||||
}
|
||||
// ----------------------------------------------------------------------------
|
||||
var g_mouse_pos = { x: -1000.0, y: -1000.0 };
|
||||
var g_mouse_down = false;
|
||||
function auto_resize_canvas(canvas) {
|
||||
if (WEB_GL) {
|
||||
if (true) {
|
||||
canvas.setAttribute("width", window.innerWidth);
|
||||
canvas.setAttribute("height", window.innerHeight);
|
||||
}
|
||||
else {
|
||||
// TODO: this stuff
|
||||
var pixels_per_point = window.devicePixelRatio || 1;
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.scale(pixels_per_point, pixels_per_point);
|
||||
|
||||
183
docs/frontend.ts
183
docs/frontend.ts
@@ -3,145 +3,6 @@ interface Vec2 {
|
||||
y: number;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Paint module:
|
||||
|
||||
/// 0-255 sRGBA
|
||||
interface Color {
|
||||
r: number;
|
||||
g: number;
|
||||
b: number;
|
||||
a: number;
|
||||
}
|
||||
|
||||
interface Outline {
|
||||
color: Color;
|
||||
width: number;
|
||||
}
|
||||
|
||||
interface Clear {
|
||||
kind: "clear";
|
||||
fill_color: Color;
|
||||
}
|
||||
|
||||
interface Line {
|
||||
kind: "line";
|
||||
color: Color;
|
||||
points: Vec2[];
|
||||
width: number;
|
||||
}
|
||||
|
||||
interface Circle {
|
||||
kind: "circle";
|
||||
center: Vec2;
|
||||
fill_color: Color | null;
|
||||
outline: Outline | null;
|
||||
radius: number;
|
||||
}
|
||||
|
||||
interface Rect {
|
||||
kind: "rect";
|
||||
corner_radius: number;
|
||||
fill_color: Color | null;
|
||||
outline: Outline | null;
|
||||
pos: Vec2;
|
||||
size: Vec2;
|
||||
}
|
||||
|
||||
interface Text {
|
||||
kind: "text";
|
||||
fill_color: Color | null;
|
||||
font_name: string; // e.g. "Palatino"
|
||||
font_size: number; // Height in pixels, e.g. 12
|
||||
pos: Vec2;
|
||||
stroke_color: Color | null;
|
||||
text: string;
|
||||
}
|
||||
|
||||
type PaintCmd = Circle | Clear | Line | Rect | Text;
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Canvas painting:
|
||||
|
||||
function style_from_color(color: Color): string {
|
||||
return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a / 255.0})`;
|
||||
}
|
||||
|
||||
function paint_command(canvas, cmd: PaintCmd) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// console.log(`cmd: ${JSON.stringify(cmd)}`);
|
||||
|
||||
switch (cmd.kind) {
|
||||
case "circle":
|
||||
ctx.beginPath();
|
||||
ctx.arc(cmd.center.x, cmd.center.y, cmd.radius, 0, 2 * Math.PI, false);
|
||||
if (cmd.fill_color) {
|
||||
ctx.fillStyle = style_from_color(cmd.fill_color);
|
||||
ctx.fill();
|
||||
}
|
||||
if (cmd.outline) {
|
||||
ctx.lineWidth = cmd.outline.width;
|
||||
ctx.strokeStyle = style_from_color(cmd.outline.color);
|
||||
ctx.stroke();
|
||||
}
|
||||
return;
|
||||
|
||||
case "clear":
|
||||
ctx.fillStyle = style_from_color(cmd.fill_color);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
return;
|
||||
|
||||
case "line":
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(cmd.points[0].x, cmd.points[0].y);
|
||||
for (const point of cmd.points) {
|
||||
ctx.lineTo(point.x, point.y);
|
||||
}
|
||||
ctx.lineWidth = cmd.width;
|
||||
ctx.strokeStyle = style_from_color(cmd.color);
|
||||
ctx.stroke();
|
||||
return;
|
||||
|
||||
case "rect":
|
||||
const x = cmd.pos.x;
|
||||
const y = cmd.pos.y;
|
||||
const width = cmd.size.x;
|
||||
const height = cmd.size.y;
|
||||
const r = Math.min(cmd.corner_radius, width / 2, height / 2);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + r, y);
|
||||
ctx.lineTo(x + width - r, y);
|
||||
ctx.quadraticCurveTo(x + width, y, x + width, y + r);
|
||||
ctx.lineTo(x + width, y + height - r);
|
||||
ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
|
||||
ctx.lineTo(x + r, y + height);
|
||||
ctx.quadraticCurveTo(x, y + height, x, y + height - r);
|
||||
ctx.lineTo(x, y + r);
|
||||
ctx.quadraticCurveTo(x, y, x + r, y);
|
||||
ctx.closePath();
|
||||
if (cmd.fill_color) {
|
||||
ctx.fillStyle = style_from_color(cmd.fill_color);
|
||||
ctx.fill();
|
||||
}
|
||||
if (cmd.outline) {
|
||||
ctx.lineWidth = cmd.outline.width;
|
||||
ctx.strokeStyle = style_from_color(cmd.outline.color);
|
||||
ctx.stroke();
|
||||
}
|
||||
return;
|
||||
|
||||
case "text":
|
||||
ctx.fillStyle = style_from_color(cmd.fill_color);
|
||||
ctx.font = `${cmd.font_size}px ${cmd.font_name}`;
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.fillText(cmd.text, cmd.pos.x, cmd.pos.y);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// What the integration gives to the gui.
|
||||
interface RawInput {
|
||||
/// Is the button currently down?
|
||||
@@ -171,50 +32,15 @@ wasm_bindgen("./emgui_wasm_bg.wasm")
|
||||
.then(wasm_loaded)
|
||||
.catch(console.error);
|
||||
|
||||
function rust_gui(input: RawInput): PaintCmd[] {
|
||||
return JSON.parse(wasm_bindgen.show_gui(JSON.stringify(input)));
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
function js_gui(input: RawInput): PaintCmd[] {
|
||||
const commands = [];
|
||||
|
||||
commands.push({
|
||||
fillStyle: "#111111",
|
||||
kind: "clear",
|
||||
});
|
||||
|
||||
commands.push({
|
||||
fillStyle: "#ff1111",
|
||||
kind: "rect",
|
||||
pos: { x: 100, y: 100 },
|
||||
radius: 20,
|
||||
size: { x: 200, y: 100 },
|
||||
});
|
||||
|
||||
return commands;
|
||||
}
|
||||
|
||||
const WEB_GL = true;
|
||||
let g_webgl_painter = null;
|
||||
|
||||
function paint_gui(canvas, input: RawInput) {
|
||||
if (WEB_GL) {
|
||||
if (g_webgl_painter === null) {
|
||||
g_webgl_painter = wasm_bindgen.new_webgl_painter("canvas");
|
||||
}
|
||||
wasm_bindgen.paint_webgl(g_webgl_painter, JSON.stringify(input));
|
||||
} else {
|
||||
const commands = rust_gui(input);
|
||||
for (const cmd of commands) {
|
||||
commands.unshift({
|
||||
fill_color: { r: 0, g: 0, b: 0, a: 0 },
|
||||
kind: "clear",
|
||||
});
|
||||
paint_command(canvas, cmd);
|
||||
}
|
||||
if (g_webgl_painter === null) {
|
||||
g_webgl_painter = wasm_bindgen.new_webgl_painter("canvas");
|
||||
}
|
||||
wasm_bindgen.paint_webgl(g_webgl_painter, JSON.stringify(input));
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
@@ -223,10 +49,11 @@ let g_mouse_pos = { x: -1000.0, y: -1000.0 };
|
||||
let g_mouse_down = false;
|
||||
|
||||
function auto_resize_canvas(canvas) {
|
||||
if (WEB_GL) {
|
||||
if (true) {
|
||||
canvas.setAttribute("width", window.innerWidth);
|
||||
canvas.setAttribute("height", window.innerHeight);
|
||||
} else {
|
||||
// TODO: this stuff
|
||||
const pixels_per_point = window.devicePixelRatio || 1;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
Reference in New Issue
Block a user