我正在构建一个音频播放控件,让用户可以在音频文件中来回擦洗.它需要处理触摸和鼠标事件.我应该如何使用被动事件流来管理事件?
以下是我希望如何构建它的大致想法.
<div id="timeline"> <span id="scrubber"></span> </div>
然后,使用Bacon.js创建事件流
var mousedowns = $('#timeline').asEventStream('mousedown'); var touchstarts = $('#timeline').asEventStream('touchstart'); var starts = Bacon.mergeAll(mousedowns,touchstarts); var mousemoves = $('#timeline').asEventStream('mousemove'); var touchmoves = $('#timeline').asEventStream('touchmove'); var moves = Bacon.mergeAll(mousemoves,touchmoves); var mouseups = $('#timeline').asEventStream('mouseup'); var touchends = $('#timeline').asEventStream('touchend'); var ends = Bacon.mergeAll(mouseups,touchends); starts.onValue(function () { var repositionScrubber = moves.onValue(function (ev) { $('#scrubber').moveto(ev.offsetX); }); ends.onValue(function () { repositionScrubber.stop(); }); });
我确定这是各种各样的错误,但我真的很擅长处理具有可观察流的事件,我还不知道它有什么好的烹饪书.任何帮助将不胜感激!
解决方法
这基本上是规范的
drag and drop recipe.
RxJS中的最小工作示例是这样的:
var $timeline = $('#timeline'); var $scrubber = $('#scrubber'); var mouseDown = Rx.Observable.merge( Rx.Observable.fromEvent($timeline,'mousedown'),Rx.Observable.fromEvent($timeline,'touchstart')); var mouseUp = Rx.Observable.merge( Rx.Observable.fromEvent($timeline,'mouseup'),'touchend')); var mouseMove = Rx.Observable.merge( Rx.Observable.fromEvent($timeline,'mousemove'),'touchmove')); var subscription = mouseDown.flatMapLatest(function(md) { // calculate offsets when mouse down var startX = md.offsetX; return mouseMove.takeuntil(mouseUp) .map(function(mm) { mm.preventDefault(); return { left: mm.clientX - startX,}; }); }) .subscribe(function(e) { $scrubber.css(e); });
var $timeline = $('#timeline'); var $scrubber = $('#scrubber'); var mouseDown = Rx.Observable.merge( Rx.Observable.fromEvent($timeline,'touchstart')); var mouseUp = Rx.Observable.merge( Rx.Observable.fromEvent($timeline,'touchend')); var mouseMove = Rx.Observable.merge( Rx.Observable.fromEvent($timeline,'touchmove')); var subscription = mouseDown.flatMapLatest(function(md) { // calculate offsets when mouse down var startX = md.offsetX; return mouseMove.takeuntil(mouseUp) .map(function(mm) { mm.preventDefault(); return { left: mm.clientX - startX,}; }); }) .subscribe(function(e) { $scrubber.css(e); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.5.3/rx.all.js"></script> <div id="timeline" style="height: 100px; width: 100px; background: yellow; position: absolute;"> <span id="scrubber" style="height: 20px; width: 30px; background: green; position: relative;">Foo</span> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。