No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y mucho m谩s.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

5 D铆as
9 Hrs
6 Min
39 Seg

Aplicaci贸n de TakeUntil en PlatziBoard.

24/36
Recursos

Aportes 2

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Un cambio que har铆a en el c贸digo del profesor es agregar el operador throttleTime. Para que no dibuje por cada pixel se mueva el cursos, debido a que lo veo poco optimo. Sino cada intervalo de tiempo. Ello lo realic茅, pero de un modo algo diferente.
Posdata: Trabaj茅 con Typescript.

import { fromEvent, map, mergeAll, Observable, takeUntil, throttleTime } from "rxjs";

const canvas = document.querySelector("#canvas") as HTMLCanvasElement;

interface Coodinates {
	x: number,
	y: number
}

const getCanvasPosition = (positionEvent: MouseEvent): Coodinates => {

	return {
		x: positionEvent.clientX - canvas.offsetLeft,
		y: positionEvent.clientY - canvas.offsetTop,
	}
}

class Paint {

	constructor(
		public context: CanvasRenderingContext2D,
		public prevX?: number,
		public prevY?: number,
	){
		this.customizeBrush();
	}

	public updatePosition = (positionEvent: MouseEvent): void => {
		const positions = getCanvasPosition(positionEvent);

		this.prevX, this.prevY = positions.x, positions.y;
	}

	public beginDraw = (positionEvent: MouseEvent): void => {
		this.context.beginPath();
		this.updatePosition(positionEvent);
	}

	public draw = (x: number, y: number): void => {
		if (this.prevX && this.prevY) {
			this.context.moveTo(this.prevX, this.prevY);
		}

		this.context.lineTo(x, y);
		this.context.stroke();
	}

	public customizeBrush = (): void => {
		canvasContext.lineWidth = 5;
		canvasContext.strokeStyle = "white";
		canvasContext.lineJoin = "round";
		canvasContext.lineCap = "round";
	}
}

const canvasContext = canvas.getContext("2d") as CanvasRenderingContext2D;

let paint: Paint = new Paint(canvasContext);

const onMouseDown$ = fromEvent<MouseEvent>(canvas, "mousedown");
const onMouseUp$ = fromEvent<MouseEvent>(canvas, "mouseup");
const onMouseMove$ = fromEvent<MouseEvent>(canvas, "mousemove");

const startPaint$: Observable<MouseEvent> = onMouseDown$.pipe(
	map((event) => {
		paint.beginDraw(event);

		return onMouseMove$.pipe(
			throttleTime(40),
			takeUntil(onMouseUp$),
		);
	}
	),
	mergeAll(),
);

startPaint$.subscribe({
	next: event => {
		const positions = getCanvasPosition(event);

		paint.draw(positions.x, positions.y);
	}
});

鉁忥笍 Ahora implementaremos聽takeUntil聽con un observable聽onMouseUp$聽que indique cuando el usuario haya dejado de presionar el mouse. Con esa se帽al podemos completar el observable y completar el dibujo.

馃搧聽Puedes ver el c贸digo de esta clase en el repositorio.