Commit feb3aa3e authored by 李维's avatar 李维

完成拖拽功能

parent a9b979a8
{
"ver": "1.1.2",
"uuid": "1ec6f758-fc48-47d3-bad6-e26a6ebd77bf",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}
\ No newline at end of file
{
"ver": "1.2.9",
"uuid": "a1cb871b-6ef5-410e-802f-f3a1c2d185e9",
"optimizationPolicy": "AUTO",
"asyncLoadAssets": false,
"readonly": false,
"subMetas": {}
}
\ No newline at end of file
{
"ver": "1.1.2",
"uuid": "ebd1c92e-da1e-4a16-b61b-54a09be17ce4",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}
\ No newline at end of file
// Learn cc.Class:
// - https://docs.cocos.com/creator/manual/en/scripting/class.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
cc.Class({
extends: cc.Component,
start () {
this.init();
this.initVideoBtn();
this.addListener();
this.initdDrag();
},
barBaseW: 0, // 进度条宽度
bgProgress: null, // 进度条背景
bar: null, // 进度条填充
dragBtn: null, // 进度条拖拽按钮
controlBtn: null, // 按钮点击事件挂在这个上面
playBtn: null, // 播放按钮
pauseBtn: null, // 暂停按钮
replayBtn: null, // 重播按钮
init() {
console.log("Init video control component.")
this.bgProgress = cc.find('progress', this.node);
this.bar = cc.find('progress/bar', this.node);
this.dragBtn = cc.find('dragButton', this.node);
this.controlBtn = cc.find('controlButton', this.node);
this.playBtn = cc.find('controlButton/play', this.node);
this.pauseBtn = cc.find('controlButton/pause', this.node);
this.replayBtn = cc.find('controlButton/replay', this.node);
this.playBtn.active = true;
this.pauseBtn.active = false;
this.replayBtn.active = false;
this.videoStatus = 0; // 0:暂停 1:播放中 2:重播
this.barBaseW = this.bgProgress.width;;
this.setProgress(0);
},
initVideoBtn() {
this.controlBtn.addComponent(cc.Button);
this.controlBtn.on('click', () => {
if (this.videoStatus==null || this.videoStatus ==0) {
this.refreshVideoBtnState(1);
this.node.emit('video_btn_click', true)
} else if (this.videoStatus ==1) {
this.refreshVideoBtnState(0);
this.node.emit('video_btn_click', false)
}
});
},
userDragStart: null,
initdDrag() {
const dragStartX = -520;
const maxX = this.bgProgress.width + dragStartX ;
const minX = dragStartX;
this.dragBtn.off(cc.Node.EventType.TOUCH_START);
this.dragBtn.on(cc.Node.EventType.TOUCH_START, (e) => {
this.userDragStart = true;
this.node.emit('on_drag_button', true);
});
this.dragBtn.off(cc.Node.EventType.TOUCH_MOVE);
this.dragBtn.on(cc.Node.EventType.TOUCH_MOVE, (e) => {
const worldPos = e.getLocation();
const localPos = this.dragBtn.parent.convertToNodeSpaceAR(worldPos);
let newX = localPos.x;
newX = Math.min(maxX, Math.max(newX, minX));
this.dragBtn.x = newX;
const percent = Math.abs(newX-dragStartX) / Math.abs(this.bgProgress.width);
this.setProgress(percent);
this.node.emit('on_drag_percent', percent)
});
this.dragBtn.off(cc.Node.EventType.TOUCH_ENDED);
this.dragBtn.on(cc.Node.EventType.TOUCH_ENDED, (e) => {
if(this.userDragStart) {
this.userDragStart = false;
this.node.emit('on_drag_button', false);
}
});
this.dragBtn.on(cc.Node.EventType.MOUSE_UP, (e) => {
if(this.userDragStart) {
this.userDragStart = false;
this.node.emit('on_drag_button', false);
}
});
cc.find('Canvas').on(cc.Node.EventType.TOUCH_ENDED, (e) => {
if(this.userDragStart) {
this.userDragStart = false;
this.node.emit('on_drag_button', false);
}
});
cc.find('Canvas').on(cc.Node.EventType.MOUSE_UP, (e) => {
if(this.userDragStart) {
this.userDragStart = false;
this.node.emit('on_drag_button', false);
}
});
},
// 0:暂停 1:播放中 2:重播
videoStatus: null,
refreshVideoBtnState(status) {
this.videoStatus = status;
switch(status) {
case 0:
this.playBtn.active = true;
this.pauseBtn.active = false;
this.replayBtn.active = false;
break;
case 1:
this.playBtn.active = false;
this.pauseBtn.active = true;
this.replayBtn.active = false;
break;
case 2:
this.playBtn.active = false;
this.pauseBtn.active = false;
this.replayBtn.active = true;
break;
default:
this.playBtn.active = true;
this.pauseBtn.active = false;
this.replayBtn.active = false;
break;
};
},
addListener() {
this.node.on('video_play_end', () => {
this.refreshVideoBtnState();
})
this.node.on('update_video_progress', (value)=>{
if(!this.userDragStart) {
this.setProgress(value);
}
})
this.node.on('update_video_status', (status)=>{
this.refreshVideoBtnState(status);
})
this.node.on("set_mark_points", (data)=>{
const markPoint = cc.find("markPoint", this.node);
const markPointsContainer = cc.find("markNode", this.node);
for(let i=0; i<data.length; i++) {
const newPoint = cc.instantiate(markPoint);
newPoint.x = -520 + this.bgProgress.width * data[i];
newPoint.active = true;
markPointsContainer.addChild(newPoint);
}
})
},
setProgress(progress) {
const dragStartX = -520;
setTimeout(() => {
const w = this.barBaseW * progress;
this.bar.width = w;
if(!this.userDragStart) {
this.dragBtn.x = dragStartX + w;
}
}, 1);
},
});
{
"ver": "1.0.8",
"uuid": "28e111d3-5cfb-466b-bc16-83ddcf7e5343",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
{
"ver": "1.1.2",
"uuid": "5c56fef8-fa7a-48c9-a282-d5c355deee22",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "2c82c218-fb9f-4368-9761-2ba189614e5c",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 157,
"height": 157,
"platformSettings": {},
"subMetas": {
" 重播按钮": {
"ver": "1.0.4",
"uuid": "ba88dfb3-89c5-4e4c-9fe6-7c6f6f28a36c",
"rawTextureUuid": "2c82c218-fb9f-4368-9761-2ba189614e5c",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": -1,
"trimX": 1,
"trimY": 2,
"width": 155,
"height": 155,
"rawWidth": 157,
"rawHeight": 157,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "986b65e8-dc02-48df-a92a-0743e5e1c828",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 52,
"height": 57,
"platformSettings": {},
"subMetas": {
"可拖动按钮": {
"ver": "1.0.4",
"uuid": "7ac0160b-8705-4710-b65d-3bab72310bbc",
"rawTextureUuid": "986b65e8-dc02-48df-a92a-0743e5e1c828",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 52,
"height": 57,
"rawWidth": 52,
"rawHeight": 57,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "252835f3-3f05-40e2-8b64-6eb98fa01ec6",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 157,
"height": 157,
"platformSettings": {},
"subMetas": {
"播放按钮": {
"ver": "1.0.4",
"uuid": "dbd46980-78b5-4992-8c7d-038b0134885f",
"rawTextureUuid": "252835f3-3f05-40e2-8b64-6eb98fa01ec6",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": -0.5,
"trimX": 1,
"trimY": 2,
"width": 155,
"height": 154,
"rawWidth": 157,
"rawHeight": 157,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "dee7ff5a-af4c-4ee3-998f-bb4659a98a69",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 157,
"height": 157,
"platformSettings": {},
"subMetas": {
"暂停按钮": {
"ver": "1.0.4",
"uuid": "45b208cd-8797-4452-b5bc-9c6a3a31fcea",
"rawTextureUuid": "dee7ff5a-af4c-4ee3-998f-bb4659a98a69",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": -0.5,
"trimX": 1,
"trimY": 2,
"width": 155,
"height": 154,
"rawWidth": 157,
"rawHeight": 157,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "860e9678-48af-4e4b-83d2-9e5a5dbc147e",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 1069,
"height": 28,
"platformSettings": {},
"subMetas": {
"灰色进度条": {
"ver": "1.0.4",
"uuid": "b3de4dee-0204-4146-9ae3-fe5790515778",
"rawTextureUuid": "860e9678-48af-4e4b-83d2-9e5a5dbc147e",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 6,
"offsetY": 0,
"trimX": 14,
"trimY": 0,
"width": 1053,
"height": 28,
"rawWidth": 1069,
"rawHeight": 28,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "253c929f-8f96-46ed-9bde-7b0bf213e793",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 15,
"height": 15,
"platformSettings": {},
"subMetas": {
"跳题标记点": {
"ver": "1.0.4",
"uuid": "3fc25a16-8cbc-4cdd-99a2-5251bb1dcf5d",
"rawTextureUuid": "253c929f-8f96-46ed-9bde-7b0bf213e793",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 15,
"height": 15,
"rawWidth": 15,
"rawHeight": 15,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "733f270e-d4a3-4c16-a4a7-e2cdf0e579f0",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 628,
"height": 25,
"platformSettings": {},
"subMetas": {
"黄色的进度条-中间": {
"ver": "1.0.4",
"uuid": "91c20c73-41fc-4aaf-90f6-5f0e30fc0857",
"rawTextureUuid": "733f270e-d4a3-4c16-a4a7-e2cdf0e579f0",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": -1,
"offsetY": 0,
"trimX": 1,
"trimY": 0,
"width": 624,
"height": 25,
"rawWidth": 628,
"rawHeight": 25,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 19,
"borderRight": 19,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "c52631a0-a14e-4fdb-af58-3df90427f4ac",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 1069,
"height": 28,
"platformSettings": {},
"subMetas": {
"黄色的进度条-满的": {
"ver": "1.0.4",
"uuid": "69891fc9-0258-4a67-ac2c-9d26cae3cffa",
"rawTextureUuid": "c52631a0-a14e-4fdb-af58-3df90427f4ac",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 6,
"offsetY": 0,
"trimX": 14,
"trimY": 0,
"width": 1053,
"height": 28,
"rawWidth": 1069,
"rawHeight": 28,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 16,
"borderRight": 6,
"subMetas": {}
}
}
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
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