From 2a43b2744ddff563aeef3a45c2ecac49d7bf68e9 Mon Sep 17 00:00:00 2001 From: xgrommx Date: Fri, 15 May 2015 03:19:51 +0300 Subject: [PATCH] Update pairwise.md --- doc/api/core/operators/pairwise.md | 37 ++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/doc/api/core/operators/pairwise.md b/doc/api/core/operators/pairwise.md index 5d226f89c..0c940a6f4 100644 --- a/doc/api/core/operators/pairwise.md +++ b/doc/api/core/operators/pairwise.md @@ -29,6 +29,43 @@ var subscription = source.subscribe( // => Completed ``` +#### Example (Draw line) +```html + +``` + +```js +var canvas = document.getElementById("canvas"); +var g = canvas.getContext("2d"); +g.rect(0, 0, canvas.width, canvas.height); +g.fillStyle = "rgb(0,0,0)"; +g.fill(); + +var mouseMove = Rx.Observable.fromEvent(document, 'mousemove'); +var mouseDown = Rx.Observable.fromEvent(document.getElementById('canvas'), 'mousedown'); +var mouseUp = Rx.Observable.fromEvent(document.getElementById('canvas'), 'mouseup'); + +mouseDown.flatMap(function(ev) { + return mouseMove.map(function(ev) { + return { + x: ev.clientX, + y: ev.clientY + }; + }).pairwise().takeUntil(mouseUp); + +}).subscribe(function(pos) { + g.beginPath(); + g.lineWidth = 1; + + g.strokeStyle = "rgb(255, 0, 0)"; + + g.moveTo(pos[0].x, pos[0].y); + g.lineTo(pos[1].x, pos[1].y); + + g.stroke(); +}); +``` + ### Location File: