Commit d38b7c43 authored by Tt's avatar Tt

拖拽组件完成

parent 734492a0
This diff is collapsed.
...@@ -16,8 +16,10 @@ export default class videoCtrl extends cc.Component { ...@@ -16,8 +16,10 @@ export default class videoCtrl extends cc.Component {
@property(cc.Node) @property(cc.Node)
vidoStateIcon: cc.Node = null; vidoStateIcon: cc.Node = null;
@property(cc.Slider) @property(cc.ProgressBar)
vidoSlider: cc.Slider = null; vidoSlider: cc.ProgressBar = null;
@property(cc.Node)
ProgressBar: cc.Node = null;
@property(cc.Node) @property(cc.Node)
playbar: cc.Node = null; playbar: cc.Node = null;
...@@ -39,6 +41,7 @@ export default class videoCtrl extends cc.Component { ...@@ -39,6 +41,7 @@ export default class videoCtrl extends cc.Component {
this.node.on(cc.Node.EventType.TOUCH_START, this.touchVideoLayer, this) this.node.on(cc.Node.EventType.TOUCH_START, this.touchVideoLayer, this)
this.initDrag();
} }
touchVideoLayer() { touchVideoLayer() {
...@@ -121,8 +124,17 @@ export default class videoCtrl extends cc.Component { ...@@ -121,8 +124,17 @@ export default class videoCtrl extends cc.Component {
let total = Math.ceil(this._videoCom.getDuration()); let total = Math.ceil(this._videoCom.getDuration());
this.nowTime.string = this.makeTimeStr(now) this.nowTime.string = this.makeTimeStr(now)
this.totalTime.string = this.makeTimeStr(total) this.totalTime.string = this.makeTimeStr(total)
this.vidoSlider.progress = now / total; this.updateSlider(now, total)
}
} }
updateSlider(now, total) {
let percent = now / total
this.vidoSlider.progress = now / total;
const maxX = this.ProgressBar.width;
const minX = 0;
let newX = percent * maxX;
newX = Math.min(maxX, Math.max(newX, minX));
this.barTag.x = newX;
} }
makeTimeStr(time) { makeTimeStr(time) {
...@@ -132,4 +144,52 @@ export default class videoCtrl extends cc.Component { ...@@ -132,4 +144,52 @@ export default class videoCtrl extends cc.Component {
return `${min < 10 ? "0" + min : min}:${sec < 10 ? "0" + sec : sec}` return `${min < 10 ? "0" + min : min}:${sec < 10 ? "0" + sec : sec}`
} }
@property(cc.Node) barTag: cc.Node = null;
initDrag() {
const maxX = this.vidoSlider.node.width;
const minX = 0;
this.barTag.off(cc.Node.EventType.TOUCH_START);
this.barTag.on(cc.Node.EventType.TOUCH_START, (e) => {
console.log("TOUCH_START");
});
this.barTag.off(cc.Node.EventType.TOUCH_MOVE);
this.barTag.on(cc.Node.EventType.TOUCH_MOVE, (e) => {
const worldPos = e.getLocation();
const localPos = this.barTag.parent.convertToNodeSpaceAR(worldPos);
let newX = localPos.x;
newX = Math.min(maxX, Math.max(newX, minX));
this.barTag.x = newX;
const percent = newX / maxX;
const dur = this._videoCom.getDuration();
let now = Math.ceil(this._videoCom?.currentTime)
let total = Math.ceil(this._videoCom.getDuration());
this.nowTime.string = this.makeTimeStr(now)
this._videoCom.currentTime = percent * dur;
});
this.barTag.off(cc.Node.EventType.TOUCH_END);
this.barTag.on(cc.Node.EventType.TOUCH_END, (e) => {
console.log("TOUCH_ENDED");
this.updateBarByPos(this.barTag.x);
});
this.barTag.off(cc.Node.EventType.MOUSE_UP);
this.barTag.on(cc.Node.EventType.MOUSE_UP, (e) => {
console.log("MOUSE_UP");
this.updateBarByPos(this.barTag.x);
});
}
updateBarByPos(newX) {
const maxX = this.vidoSlider.node.width;
const minX = 0;
let percent = newX / maxX;
if (percent > 1) {
percent = 1
}
const dur = this._videoCom.getDuration();
this._videoCom.currentTime = percent * dur
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment