mirror of
https://github.com/viliusle/miniPaint.git
synced 2026-02-06 15:51:47 +00:00
76 lines
1.9 KiB
HTML
76 lines
1.9 KiB
HTML
<html>
|
|
<body style="margin:0;">
|
|
|
|
<iframe id="myFrame" style="width:100%;height:100vh;border:0;" src="../"></iframe>
|
|
|
|
<script>
|
|
window.addEventListener('load', function (e) {
|
|
draw_various();
|
|
}, false);
|
|
|
|
async function draw_various() {
|
|
var Layers = document.getElementById('myFrame').contentWindow.Layers;
|
|
|
|
//add layer
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = 50;
|
|
canvas.height = 50;
|
|
var ctx = canvas.getContext("2d");
|
|
cross_X(ctx, 25, 25);
|
|
var params = {
|
|
type: 'image',
|
|
data: canvas.toDataURL("image/png"),
|
|
x: 50,
|
|
y: 50,
|
|
width: canvas.width,
|
|
height: canvas.height,
|
|
};
|
|
await Layers.insert(params);
|
|
|
|
//add new layer
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = 400;
|
|
canvas.height = 400;
|
|
var ctx = canvas.getContext("2d");
|
|
cross_X(ctx, 200, 200, null, '#00cc00');
|
|
var params = {
|
|
type: 'image',
|
|
data: canvas.toDataURL("image/png"),
|
|
width: canvas.width,
|
|
height: canvas.height,
|
|
};
|
|
await Layers.insert(params);
|
|
|
|
//update last layer
|
|
var canvas = Layers.convert_layer_to_canvas(null, true); //no trim
|
|
var ctx = canvas.getContext("2d");
|
|
cross_X(ctx, 300, 300, null, '#00cc00');
|
|
Layers.update_layer_image(canvas);
|
|
//also update layer
|
|
var link = Layers.get_layer();
|
|
link.x = parseInt(canvas.dataset.x);
|
|
link.y = parseInt(canvas.dataset.y);
|
|
link.width = canvas.width;
|
|
link.height = canvas.height;
|
|
}
|
|
|
|
function cross_X(ctx, x, y, size = 20, col = '#ff0000') {
|
|
if(size == null)
|
|
size = 20;
|
|
x = parseFloat(x);
|
|
y = parseFloat(y);
|
|
size = parseInt(size);
|
|
var lw = parseInt(5);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x - size, y - size);
|
|
ctx.lineTo(x + size, y + size);
|
|
ctx.lineWidth = lw;
|
|
ctx.strokeStyle = col;
|
|
ctx.stroke();
|
|
ctx.moveTo(x + size, y - size);
|
|
ctx.lineTo(x - size, y + size);
|
|
ctx.lineWidth = lw;
|
|
ctx.strokeStyle = col;
|
|
ctx.stroke();
|
|
}
|
|
</script> |