RxJS 學習之旅 ~ Html DOM 操作

2018-08-01

前言

在前篇RxJS 學習之旅 ~ 環境設定設定好之後，就可以開始來練習使用 RxJS 常常會舉到的例子，透過 Mouse 在 Canvas 上畫圖。
如果直接寫程式的話，大約會設定一個 isMouseDown 的變數，然後在 mousedown event 中設定它為 true, 而在 mouseup event 中，設定它為 false，而在 mousemove event 中，如果 isMouseDown 為 true ，就把線畫到那上面去。
如果透過 RxJS 要如何做呢?

實作

首先，修改 index.html ，加入 canvas 做為我們的畫布，如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>RxJS Demo</title>
</head>

<body>
    <h1>RxJS Demo</h1>
    <canvas id="canvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
    <script src="/bundle.js"></script>
</body>

</html>

然後我們就可以透過 RxJS 來觀察 mouse 的 event ，然後將線畫出來。
mouse down (移動點) -> mouse move (畫線) -> mouse up (停止畫線)
因為畫線只需要 x, y ，所以我們將 MouseEvent 轉成 x, y 比較方便。

import { fromEvent, merge } from 'rxjs';
import { map, concatMap, takeUntil, tap } from 'rxjs/operators';

const canvas = <HTMLCanvasElement>document.getElementById('canvas');

const rect = canvas.getBoundingClientRect();
const ctx = canvas.getContext('2d');

ctx.beginPath(); // 開始畫畫
var draw = function(to: any) {
	ctx.lineTo(to.x, to.y);
	ctx.stroke();
};

const mouseEventToCoordinate = (mouseEvent: any) => {
	mouseEvent.preventDefault();
	return {
		x: mouseEvent.clientX - rect.left,
		y: mouseEvent.clientY - rect.top
	};
};

const mouseDowns = fromEvent(canvas, 'mousedown').pipe(
	map(mouseEventToCoordinate)
);
const mouseMoves = fromEvent(canvas, 'mousemove').pipe(
	map(mouseEventToCoordinate)
);
const mouseUps = fromEvent(window, 'mouseup').pipe(
	map(e => {
		console.log('mouseup');
		return mouseEventToCoordinate(e);
	})
);

//mouse down (移動點) -> mouse move (畫線) -> mouse up (停止畫線)
const mouseDraw = mouseDowns.pipe(
	tap(p => {
		console.log('mouseDowns');
		ctx.moveTo(p.x, p.y);
	}),
	concatMap(p => mouseMoves.pipe(takeUntil(mouseUps)))
);
//將線畫出來
mouseDraw.subscribe(p => draw(p));

結果如下，

除了 mouse 外，我們還有 touch event ，所以 touch 也是一樣可以做這樣子的處理哦!

const touchEventToCoordinate = (touchEvent: any) => {
	touchEvent.preventDefault();
	return {
		x: touchEvent.changedTouches[0].clientX - rect.left,
		y: touchEvent.changedTouches[0].clientY - rect.top
	};
};

const touchStarts = fromEvent(canvas, 'touchstart').pipe(
	map(touchEventToCoordinate)
);
const touchMoves = fromEvent(canvas, 'touchmove').pipe(
	map(touchEventToCoordinate)
);

//在asus touchscreen nb is not firing
const touchEnds = fromEvent(window, 'touched').pipe(
	map(e => {
		console.log('touched');
		return touchEventToCoordinate(e);
	})
);
//在asus touchscreen nb is not firing
const touchCancels = fromEvent(window, 'touchcancel ').pipe(
	map(e => {
		console.log('touchcancel');
		return touchEventToCoordinate;
	})
);

const touchDraw = touchStarts.pipe(
	tap(p => {
		console.log('touchStarts');
		ctx.moveTo(p.x, p.y);
	}),
	concatMap(p => touchMoves.pipe(takeUntil(touchEnds)))
);
//將線畫出來 touch
touchDraw.subscribe(p => draw(p));

在上面的程式中，我們將原本 MouseEvent 及 TouchEvent 的內容，透過 map 轉換成了 x, y。
所以我們可以透過 merge 將 mouseDowns 與 touchStarts , mouseMoves 與 touchMoves , mouseUps, touchEnds, touchCancels 組合，然後在這些組合中去畫線，如下，

const starts = merge(mouseDowns, touchStarts);
const moves = merge(mouseMoves, touchMoves);
const ends = merge(mouseUps, touchEnds, touchCancels);

const draws = starts.pipe(
	tap(p => {
		console.log('starts');
		ctx.moveTo(p.x, p.y);
	}),
	concatMap(p => moves.pipe(takeUntil(ends)))
);

//合併mouse & touch
draws.subscribe(p => {
	draw(p);
});

註: 因為 touch 事件在筆電上有可以不會被觸發，所以有可能在 touch 畫完後，mouse 一移動會一直畫線，是因為 touched 事件被沒觸發到。
註: 補上 Alejandra 推薦學習 Html 的網站 Learn HTML Free in [2022] – Basic HTML Codes for Beginners

參考資料

Handling complex mouse and touch events with RxJS
touch events may not fire at all on laptop
Learn HTML Free in [2022] – Basic HTML Codes for Beginners

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true