kar
/
phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cha

pull/5/head
Dev 1 2023-09-01 21:48:24 +05:30
parent db6ff15295
commit 81d847aae1
1 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/drawing/index.astro
View File

@ -9,6 +9,12 @@ import Layout from '../../layouts/Layout.astro';
</main>
</Layout>
<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 = {}
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
@ -16,7 +22,7 @@ import Layout from '../../layouts/Layout.astro';
.then(response => response.json())
.then(({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 = {
type: Phaser.AUTO,
width: window.innerWidth,
@ -159,7 +165,6 @@ import Layout from '../../layouts/Layout.astro';
clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '50%';
clearButton.style.boxShadow = "5px 20px 30px #7c4c2390";
clearButton.addEventListener('click', () => {
clearDrawing();
});
@ -175,7 +180,6 @@ import Layout from '../../layouts/Layout.astro';
continueDrawing(this.input.x, this.input.y);
}
});
this.input.on('pointerup', () => {
if (isDrawing) {
finishDrawing();
@ -186,6 +190,27 @@ import Layout from '../../layouts/Layout.astro';
// Disable the default cursor
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) {