Canvas: Jak pobrać pozycję kursora myszy?

Opublikowano: 01.06.2023 - tagi: JavaScript Canvas Mysz Współrzędne

Jak pobrać współrzędne?

Żeby pobrać pozycję kursora myszy, w obrębie Canvas potrzebujesz dwa rodzaje informacji: pozycję kursora i pozycję płótna.

Pozycja (0, 0) oznacza lewy górny róg płótna.

Przykład działającego przykładu znajdziesz tutaj

Przykład

HTML:

<div>
    <strong>X: <span id="x"></span></strong>
    <br>
    <strong>Y: <span id="y"></span></strong>
</div>
<br>
<canvas id="canvas" width="800" height="600"></canvas>

JavaScript:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const x = document.getElementById('x');
const y = document.getElementById('y');

context.fillStyle = '#000';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);

canvas.addEventListener('mousemove', (e) => {
	const canvasRect = canvas.getBoundingClientRect();
	const posX = Math.round(e.clientX - canvasRect.left);
	const posY = Math.round(e.clientY - canvasRect.top);
	x.innerHTML = posX;
	y.innerHTML = posY;
});

Mając informację o pozycji kursora: e.clientX i e.clientY oraz pozycji płótna: canvasRect.left i canvasRect.top możemy obliczyć pozycję kursora w Canvas. Zmienne: posX i posY.

Podsumowanie: Maj 2023

Opublikowano: 31.05.2023 - tagi: Podsumowanie Maj 2023 Blog

W maju opublikowałem 4 wpisy:


NodeJS:

  1. Jak pobrać dane w postaci zwykłych obiektów w Mongoose?

JavaScript

  1. Parcel praca z kodem przy minimalnej konfiguracji
  2. Canvas: Obracanie obiektu wokół jego środka

Narysowałem jeden komiks:

  1. Hate and Love

Przeczytałem jedną książkę:

  1. Historia ucieczki - Elena Ferrante

Przesłuchałem pięć audiobook'ów:

  1. Oberża na pustkowiu - Daphne Du Maurier
  2. Urugwajka - Pedro Mairal
  3. Szczelina - Jozef Karika
  4. Sąsiednie kolory - Jakub Małecki
  5. Kulawe konie - Mick Herron

Canvas: Obracanie obiektu wokół jego środka

Opublikowano: 20.05.2023 - tagi: Canvas JavaScript Obrót

Jak obrócić obiekt?

Pod tym linkiem znajdziesz demo przykładu opisanego w tym wpisie.

HTML:

<canvas id="canvas" width="800" height="600"></canvas>

JavaScript:

let angle = 0;

const context = document.getElementById("canvas").getContext("2d");
const rect = {
		width: 50,
		height: 50,
		x: context.canvas.width / 2,
		y: context.canvas.height / 2
}

const degreesToRadians = (degrees) => {
		return degrees * (Math.PI / 180);
};

const render = () => {
		context.fillStyle = '#000';

		context.fillRect(0, 0, context.canvas.width, context.canvas.height);
		context.fillStyle = '#ff0000';
		context.save();
		context.translate(rect.x, rect.y)
		context.rotate(degreesToRadians(angle));
		context.fillRect(-rect.width / 2, -rect.height / 2, rect.width, rect.height);
		context.restore();
		angle += 0.5;
		requestAnimationFrame(render);
}
render();

Za obrót obiektu wokół jego środka odpowiadają dwie linijki.

Pierwsza:

context.rotate(rotate);

Jest to kąt, o jaki ma być obrócony obiekt. Podany w radianach. Stopnie obliczane są w radiany za pomocą funkcji: degreesToRadians.

Druga linijka:

context.fillRect(-rect.width / 2, -rect.height / 2, rect.width, rect.height);

Odpowiedzialna jest za ustawienie osi obrotu obiektu. Na jego środku.

Comics: Hate and Love

Opublikowano: 16.05.2023 - tagi: Komiks Rysowanie Bug QA

Hate and Love

JavaScript: Parcel praca z kodem przy minimalnej konfiguracji

Opublikowano: 09.05.2023 - tagi: JavaScript TypeScript Narzędzie

Czym jest Parcel?

Jeśli masz już doświadczenie w pisaniu we front-end coś takiego, jak Webpack pewnie obiło Ci się o uszy.

Parcel to coś podobnego do Webpack'a. Służy do kompilowania kodu jak: JavaScript, TypeScript, CSS/SCSS itp. Czyli pisząc w skrócie Parcel daje programiście wszystko, co potrzebne, żeby zacząć tworzyć aplikacje.

Ktoś może zapytać: skoro istnieje Webpack to po co kolejne tego typu narzędzie?! To, co wyróżnia Parcel to ograniczenie konfiguracji do zbędnego minimum.

Potrzebujesz narzędzia, które: przekompiluje Ci kod z TypeScript do JavaScript? Dodaje style napisane SCSS? Zminimalizuje kod? Stworzy build'a gotowego do wrzucenia na produkcję?

Chcesz po prostu zacząć działać? Użyj Parcel.

Instalacja

Pierwszy krok to instalacja. Wpisz komendę:

npm install --save-dev parcel

Następnie stwórz plik index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Parcel</title>
</head>
<body>
<script type="module" src="index.ts"></script>
</body>
</html>

W przykładzie użyjemy TypeScript. Do pliku dołączany jest index.ts, który będzie zawierał cały nasz kod.

Następnie do pliku packge.json dodaj to:

{
  "source": "index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  }
}

Skrypt start uruchamia aplikację. Z kolei build tworzy... build'a.

Użycie

Stwórz plik: product.ts i dodaj kod:

interface Product {
	name: string;
	price: number;
}

export const product: Product = {
	name: 'Some product',
	price: 150
}

Teraz index.ts:

import product from './product.ts';

console.log(product); // { name: "Some product", price: 150 }

Wpisz w terminalu komendę:

npm run start