Reactive Extensions for Javascript (RX-JS) を使用して、ここに投稿しているのと同じ効果を達成しようとしています。私はそれを行う方法について少し戸惑っています。ここにページがあります：
<!DOCTYPE html>
<html>
<head>
<title>drag and drop</title>
</head>
<style type="text/css">
canvas {
border:1px solid steelblue;
background-color: whitesmoke;
}
</style>
<body>
<canvas id="canvas" width=300 height=300></canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var drawing = false;
var mouseX = 0;
var mouseY = 0;
function handleMouseDown(e) {
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
drawing= true;
}
function handleMouseUp(e) {
drawing = false;
}
function handleMouseMove(e) {
if(drawing){
mouseeX = parseInt(e.clientX - offsetX);
mouseeY = parseInt(e.clientY - offsetY);
$("#movelog").html("Move: " + mouseX + " / " + mouseY);
var ctx = canvas.getContext("2d");
// some cleanup code
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
ctx.beginPath();
ctx.moveTo(mouseX,mouseY);
ctx.lineTo(mouseeX,mouseeY);
ctx.stroke();
}
}
$("#canvas").mousedown(function(e) {
handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
handleMouseMove(e);
});
$("#canvas").mouseup(function(e) {
handleMouseUp(e);
});
});
</script>
</body>
</html>
mouseDown、mouseMove、および mouseUp イベントのオブザーバブルを作成する必要があると思います。
var mouseDown = Rx.Observable.fromEvent(canvas, 'mousedown');
var mouseMove = Rx.Observable.fromEvent(canvas, 'mousemove');
var mouseUp = Rx.Observable.fromEvent(canvas, 'mouseup');
しかし、それらを組み合わせる方法がわかりません。マウスダウンの観察を開始し、マウスアップが発生するまですべての動きを収集し、その間に、開始点からマウス移動中にマウスがある現在の点までの線を再描画する必要があると思います。あなたはなにか考えはありますか？どうもありがとう。
°°°°°°°°°°°°°°°°°°°°°EDIT°°°°°°°°°°°°°°°°°°°°°°°°° °°°°°°°°°
Brandonによる回答の後の私のコードは次のとおりです。
$(function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var mouseDown = Rx.Observable.fromEvent($("#canvas"), 'mousedown');
var mouseMove = Rx.Observable.fromEvent($("#canvas"), 'mousemove');
var mouseUp = Rx.Observable.fromEvent($("#canvas"), 'mouseup');
// keep a reference to the pisition when the mouse down was fired
// then flatten the stream with concatAll
var traceLineStream = mouseDown.map(function(md) {
var movesFromMouseDown = mouseMove.takeUntil(mouseUp);
var movesFromMouseDownAndMouseDown = movesFromMouseDown.map(function(mm) {
return {
mouseDownPoint: md,
mouseMovePoint: mm
}
});
return movesFromMouseDownAndMouseDown;
}).concatAll();
var subscription = traceLineStream.subscribe(
function(y) {
var mouseDown = y.mouseDownPoint;
var mouseMove = y.mouseMovePoint;
var mouseDownX = parseInt(mouseDown.clientX - offsetX);
var mouseDownY = parseInt(mouseDown.clientY - offsetY);
var mouseMoveX = parseInt(mouseMove.clientX - offsetX);
var mouseMoveY = parseInt(mouseMove.clientY - offsetY);
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
ctx.beginPath();
ctx.moveTo(mouseDownX, mouseDownY);
ctx.lineTo(mouseMoveX, mouseMoveY);
ctx.stroke();
},
function(e) {
console.log('onError: ' + e.message);
},
function() {
console.log('onCompleted');
});
});