cha
parent
db6ff15295
commit
81d847aae1
|
@ -9,6 +9,12 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
</main>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
|
const drawingZone = {
|
||||||
|
x: window.innerWidth / 4, // X-coordinate of the drawing zone
|
||||||
|
y: window.innerHeight / 4, // Y-coordinate of the drawing zone
|
||||||
|
width: window.innerWidth / 2, // Width of the drawing zone
|
||||||
|
height: window.innerHeight / 2, // Height of the drawing zone
|
||||||
|
};
|
||||||
var assetsList = {}
|
var assetsList = {}
|
||||||
const params = new URLSearchParams(window.location.search);
|
const params = new URLSearchParams(window.location.search);
|
||||||
const paramsID = params.get('id');
|
const paramsID = params.get('id');
|
||||||
|
@ -16,7 +22,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(({data}) => {
|
.then(({data}) => {
|
||||||
const {image} = data;
|
const {image} = data;
|
||||||
assetsList.image = "https://management.beanstalkedu.com/assets/" + image ; //+ "?width=450";
|
assetsList.image = "https://management.beanstalkedu.com/assets/" + image; // + "?width=450";
|
||||||
const config = {
|
const config = {
|
||||||
type: Phaser.AUTO,
|
type: Phaser.AUTO,
|
||||||
width: window.innerWidth,
|
width: window.innerWidth,
|
||||||
|
@ -159,7 +165,6 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
clearButton.style.fontWeight = 'bold';
|
clearButton.style.fontWeight = 'bold';
|
||||||
clearButton.style.borderRadius = '50%';
|
clearButton.style.borderRadius = '50%';
|
||||||
clearButton.style.boxShadow = "5px 20px 30px #7c4c2390";
|
clearButton.style.boxShadow = "5px 20px 30px #7c4c2390";
|
||||||
|
|
||||||
clearButton.addEventListener('click', () => {
|
clearButton.addEventListener('click', () => {
|
||||||
clearDrawing();
|
clearDrawing();
|
||||||
});
|
});
|
||||||
|
@ -175,7 +180,6 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
continueDrawing(this.input.x, this.input.y);
|
continueDrawing(this.input.x, this.input.y);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
this.input.on('pointerup', () => {
|
this.input.on('pointerup', () => {
|
||||||
if (isDrawing) {
|
if (isDrawing) {
|
||||||
finishDrawing();
|
finishDrawing();
|
||||||
|
@ -186,6 +190,27 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
|
|
||||||
// Disable the default cursor
|
// Disable the default cursor
|
||||||
this.input.setDefaultCursor('none');
|
this.input.setDefaultCursor('none');
|
||||||
|
|
||||||
|
|
||||||
|
const borderThickness = 2;
|
||||||
|
const borderColor = 0x000000; // Black color (you can customize this)
|
||||||
|
|
||||||
|
const borderGraphics = this.add.graphics();
|
||||||
|
borderGraphics.lineStyle(borderThickness, borderColor);
|
||||||
|
borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
|
||||||
|
function continueDrawing(x, y) {
|
||||||
|
// Check if the pointer coordinates are within the drawing zone
|
||||||
|
if (
|
||||||
|
x >= drawingZone.x &&
|
||||||
|
x <= drawingZone.x + drawingZone.width &&
|
||||||
|
y >= drawingZone.y &&
|
||||||
|
y <= drawingZone.y + drawingZone.height
|
||||||
|
) {
|
||||||
|
// The pointer is within the drawing zone, so continue drawing
|
||||||
|
graphics.lineTo(x, y);
|
||||||
|
graphics.strokePath();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function startDrawing(x, y) {
|
function startDrawing(x, y) {
|
||||||
|
|
Loading…
Reference in New Issue