CocosCreator3.8研究笔记（十九）CocosCreator UI组件（三）

news2024/11/6 8:10:26

前面的文章已经介绍了Layout 组件 、ScrollView 组件 、PageView 组件 。

想了解的朋友，请查看 CocosCreator3.8研究笔记（十八）CocosCreator UI组件（二）。

今天我们主要介绍CocosCreator 常用组件：Button 组件 、EditBox 组件 、ProgressBar 组件、Toggle 组件。


一、Button 组件

Button 组件可以响应用户的点击操作，当用户点击 Button 时，Button 自身会有状态变化，在完成点击操作后响应一个自定义的行为。


（1）、Button 属性


属性功能说明
TargetNode 类型，当 Button 发生 Transition 的时候，会相应地修改 Target 节点的 SpriteFrame，颜色或者 Scale。
Interactable布尔类型，设为 false 时，则 Button 组件进入禁用状态。
Transition枚举类型，包括 NONE、COLOR、SPRITE 和 SCALE。每种类型对应不同的 Transition 设置。
Click Event列表类型，默认为空，用户添加的每一个事件由节点引用，组件名称和一个响应函数组成。

  • Button Transition

Button Transition 用来指定当用户点击 Button 时的状态表现，目前主要有 NONE、COLOR、SPRITE 和 SCALE。

在这里插入图片描述


  • COLOR Transition

在这里插入图片描述


  • SPRITE Transition

在这里插入图片描述


  • SCALE Transition

在这里插入图片描述


属性功能
DurationButton 状态切换需要的时间间隔。
ZoomScale当用户点击按钮后，按钮会缩放到一个值，这个值等于 Button 原始 scale * zoomScale，zoomScale 可以为负数

（2）、Button 事件

属性功能说明
Target带有脚本组件的节点。
Component脚本组件名称。
Handler指定一个回调函数，当用户点击 Button 并释放时会触发此函数。
CustomEventData用户指定任意的字符串作为事件回调的最后一个参数传入。

代码添加回调的两种方式：

  • 构造一个 EventHandler 对象，然后设置好对应的 target、component、handler 和 customEventData 参数。
import { _decorator, Component, Event, Node, Button, EventHandler } from 'cc';
const { ccclass, property } = _decorator;

@ccclass("test")
export class test extends Component {
    onLoad () {
        const clickEventHandler = new EventHandler();
        clickEventHandler.target = this.node;  // 这个 node 节点是你的事件处理代码组件所属的节点
        clickEventHandler.component = 'test';  // 这个是脚本类名
        clickEventHandler.handler = 'callback';
        clickEventHandler.customEventData = 'data';
        const button = this.node.getComponent(Button);
        button.clickEvents.push(clickEventHandler);
    }

    callback (event: Event, customEventData: string) {
        // 这里 event 是一个 Touch Event 对象，可以通过 event.target 取到事件的发送节点
        const node = event.target as Node;
        const button = node.getComponent(Button);
        console.log(customEventData); // data
    }
}

  • 通过 button.node.on('click', ...) 的方式来添加
import { _decorator, Component, Button } from 'cc';
const { ccclass, property } = _decorator;

@ccclass("test")
export class test extends Component {
    @property(Button)
    button: Button | null = null;
    onLoad () {
        this.button.node.on(Button.EventType.CLICK, this.callback, this);
    }

    callback (button: Button) {
       
    }
}

注意:

(A)、在事件回调里面无法获得当前点击按钮的屏幕坐标点 。

(B)、这种方式注册的事件，无法传递 customEventData。


二、 EditBox 组件


EditBox 是一种文本输入组件，可以获取用户输入的文本。


（1）、EditBox 属性

属性功能说明
BackgroundImage输入框背景节点上挂载的 Sprite 组件对象
FontColor输入框文本的颜色
FontSize输入框文本的字体大小
InputFlag指定输入标识：可以指定输入方式为密码或者单词首字母大写（仅支持 Android 平台）
InputMode指定输入模式：ANY 表示多行输入，其它都是单行输入，移动平台上还可以指定键盘样式。
LineHeight输入框文本的行高
MaxLength输入框最大允许输入的字符个数
Placeholder输入框占位符的文本内容
PlaceholderFontColor输入框占位符的文本字体颜色
PlaceholderFontSize输入框占位符的文本字体大小
PlaceholderLabel输入框占位符节点上挂载的 Label 组件对象
ReturnType指定移动设备上面回车按钮的样式
String输入框的初始输入内容，如果为空则会显示占位符的文本
TabIndex修改 DOM 输入元素的 tabIndex，这个属性只有在 Web 上面修改有意义。
TextLabel输入框输入文本节点上挂载的 Label 组件对象

（2）、EditBox 事件

  • Editing Did Began：在用户点击输入框获取焦点的时候被触发。
  • Editing Did Ended：在单行模式下面，一般是在用户按下回车或者点击屏幕输入框以外的地方调用该函数。
    如果是多行输入，一般是在用户点击屏幕输入框以外的地方调用该函数。
  • Text Changed：在用户每一次输入文字变化的时候被触发。但若是通过 EditBox.string 的 setter 设置时不会派发该事件。

（3）、注意事项

  • 如果需要输入密码，则需要把 Input Flag 设置为 password，同时 Input Mode 必须是 Any 之外的选择，一般选择 Single Line。

  • 如果要输入多行，可以把 Input Mode 设置为 Any。

  • 背景图片支持九宫格缩放


（4）、代码添加回调

添加回调的有两种方式：

  • 构造一个 EventHandler 对象，然后设置好对应的 target、component、handler 和 customEventData 参数。
import { _decorator, Component, EditBox, EventHandler } from 'cc';
const { ccclass, property } = _decorator;

@ccclass("test")
export class test extends Component {
    onLoad() {
        const editboxEventHandler = new EventHandler();
        editboxEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点
        editboxEventHandler.component = 'test';
        editboxEventHandler.handler = 'onEditDidBegan';
        editboxEventHandler.customEventData = 'data';

        const editbox = this.node.getComponent(EditBox);
        editbox.editingDidBegan.push(editboxEventHandler);
        // 你也可以通过类似的方式来注册其它回调函数
        // editbox.editingDidEnded.push(editboxEventHandler);
        // editbox.textChanged.push(editboxEventHandler);
        // editbox.editingReturn.push(editboxEventHandler);
    }

    onEditDidBegan(editbox, customEventData) {
        // 这里 editbox 是一个 EditBox 对象
        // 这里的 customEventData 参数就等于你之前设置的 "data"
    }
    // 假设这个回调是给 editingDidEnded 事件的
    onEditDidEnded(editbox, customEventData) {
        // 这里 editbox 是一个 EditBox 对象
        // 这里的 customEventData 参数就等于你之前设置的 "data"
    }
    // 假设这个回调是给 textChanged 事件的
    onTextChanged(text, editbox, customEventData) {
        // 这里的 text 表示修改完后的 EditBox 的文本内容
        // 这里 editbox 是一个 EditBox 对象
        // 这里的 customEventData 参数就等于你之前设置的 "data"
    }
    // 假设这个回调是给 editingReturn 事件的
    onEditingReturn(editbox, customEventData) {
        // 这里 editbox 是一个 EditBox 对象
        // 这里的 customEventData 参数就等于你之前设置的 "data"
    }
}

  • 通过 editbox.node.on('editing-did-began', ...) 的方式来添加，也可以注册 editing-did-ended、text-changed 和 editing-return 事件，这些事件的回调函数的参数与 editing-did-began 的参数一致。

    注意：这种方式注册的事件，无法传递 customEventData

// 假设我们在一个组件的 onLoad 方法里面添加事件处理回调，在 callback 函数中进行事件处理:
import { _decorator, Component, EditBox } from 'cc';
const { ccclass, property } = _decorator;
@ccclass("test")
export class example test Component {
    @property(EditBox)
    editbox: EditBox | null = null;
    onLoad(){
        this.editbox.node.on('editing-did-began', this.callback, this);
    }

    callback(editbox: EditBox){
        // 回调的参数是 editbox 组件
    }
}

三、ProgressBar 组件

ProgressBar（进度条）经常被用于在游戏中显示某个操作的进度，比如：游戏更新下载进度。

ProgressBar 属性

属性功能说明
Bar Sprite进度条渲染所需要的 Sprite 组件，可以通过拖拽一个带有 Sprite 组件的节点到该属性上来建立关联。
Mode支持 HORIZONTAL（水平）、VERTICAL（垂直）和 FILLED（填充）三种模式，可以通过配合 reverse 属性来改变起始方向。
Total Length当进度条为 100% 时 Bar Sprite 的总长度/总宽度。在 FILLED 模式下 Total Length 表示取 Bar Sprite 总显示范围的百分比，取值范围从 0 ~ 1。
Progress浮点，取值范围是 0~1，不允许输入之外的数值。
Reverse布尔值，默认的填充方向是从左至右/从下到上，开启后变成从右到左/从上到下。

在节点上添加 ProgressBar 组件，然后给该组件关联一个 Bar Sprite 就可以在场景中控制 Bar Sprite 来显示进度了。

Bar Sprite 可以是自身节点，子节点，或者任何一个带有 Sprite 组件的节点。

Bar Sprite 可以自由选择 Simple、Sliced 和 Filled 渲染模式。

进度条的模式选择 FILLED 的情况下，Bar Sprite 的 Type 也需要设置为 FILLED，否则会报警告。


四、Toggle 组件


Toggle 是一个 CheckBox， Toggle 继承自 Button，当它和 ToggleContainer 一起使用的时候，可以变成 RadioButton。


在这里插入图片描述


Toggle 属性

属性功能说明
isChecked布尔类型，如果这个设置为 true，则 check mark 组件会处于 enabled 状态，否则处于 disabled 状态。
checkMarkSprite 类型，Toggle 处于选中状态时显示的图片
Check Events列表类型，默认为空，用户添加的每一个事件由节点引用，组件名称和一个响应函数组成。详情见下方的 Toggle 事件 部分

Toggle 的事件回调有二个参数，第一个参数是 Toggle 本身，第二个参数是 customEventData。


添加事件回调的方法(一)：

import { _decorator, Component, Event, Node, ToggleComponent, EventHandler } from 'cc';
const { ccclass, property } = _decorator;

@ccclass("test")
export class example extends Component {
    onLoad(){
        const checkEventHandler = new EventHandler();
        checkEventHandler.target = this.node;  //这个 node 节点是你的事件处理代码组件所属的节点
        checkEventHandler.component = 'test';  //这个是脚本类名
        checkEventHandler.handler = 'callback';
        checkEventHandler.customEventData = 'data';
        const toggle = this.node.getComponent(ToggleComponent);
        toggle.checkEvents.push(checkEventHandler);
    }


    callback(event: Event, customEventData: string){
        //这里 event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点
        // 这里的 customEventData 参数就等于之前设置的 'data'
    }
}

方法(二): 通过 toggle.node.on('toggle', ...) 的方式来添加。

注意这种方式注册的事件，无法传递 customEventData

import { _decorator, Component, ToggleComponent } from 'cc';
const { ccclass, property } = _decorator;

@ccclass("test")
export class test extends Component {
    @property(ToggleComponent)
    toggle: ToggleComponent | null = null;
    onLoad(){
       this.toggle.node.on('toggle', this.callback, this);
    }

    callback(toggle: ToggleComponent){
        // 回调的参数是 toggle 组件，
    }
}

五、ToggleContainer 组件


ToggleContainer 不是一个可见的 UI 组件，它可以用来修改一组 Toggle 组件的行为。

当一组 Toggle 属于同一个 ToggleContainer 的时候，任何时候只能有一个 Toggle 处于选中状态。


1、ToggleContainer 属性

属性功能说明
AllowSwitchOff如果这个设置为 true，那么 toggle 按钮在被点击的时候可以反复地被选中和未选中。
CheckEvents选中事件。列表类型，默认为空，用户添加的每一个事件由节点引用，组件名称和一个响应函数组成。

2、ToggleContainer 事件回调

import { _decorator, Component, Event, Node, ToggleContainer, EventHandler } from 'cc';
const { ccclass, property } = _decorator;

@ccclass("test")
export class test extends Component {
    onLoad(){
        const containerEventHandler = new EventHandler();
        containerEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点
        containerEventHandler.component = 'test';// 这个是脚本类名
        containerEventHandler.handler = 'callback';
        containerEventHandler.customEventData = 'data';

        const container = this.node.getComponent(ToggleContainer);
        container.checkEvents.push(containerEventHandler);
    }

    callback(event: Event, customEventData: string) {
        // 这里 event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点
        // 这里的 customEventData 参数就等于之前设置的 'data'
    }
}

3、ToggleContainer的使用案例：

（1）、在属性检查器中，为Toggle 的父节点添加 ToggleContainer 组件

（2）、在层级管理器中添加多个同级的Toggle 组件

=
在这里插入图片描述


此时，所有包含 Toggle 组件的节点都会自动被添加到ToggleContainer 容器中。


（3）、运行效果

在这里插入图片描述


六、Slider 组件

Slider 是一个滑动器组件，通常用于调节 UI 的数值（例如音量调节），它主要的部件是一个滑块按钮，该部件用于用户交互，通过该部件可进行调节 Slider 的数值大小。


Slider 属性

属性功能说明
handle滑块按钮部件，可以通过该按钮进行滑动调节 Slider 数值大小
direction滑动器的方向，分为横向和竖向
progress当前进度值，该数值的区间是 0-1 之间
slideEvents滑动器组件事件回调函数

代码添加回调方法一：

构造一个EventHandler 对象，然后设置对应的 target、component、handler 和 customEventData 参数。


mport { _decorator, Component, Event, Node, Slider, EventHandler } from 'cc';
const { ccclass, property } = _decorator;

@ccclass("SliderCtrl")
export class SliderCtrl extends Component {

    onLoad () {
        const sliderEventHandler = new EventHandler();
        // 这个 node 节点是事件处理脚本组件所属的节点
        sliderEventHandler.target = this.node; 
        // 这个是脚本类名
        sliderEventHandler.component = 'SliderCtrl';
        sliderEventHandler.handler = 'callback';
        sliderEventHandler.customEventData = 'data';

        const slider = this.node.getComponent(Slider);
        slider!.slideEvents.push(sliderEventHandler);
    }

    callback(slider: Slider, customEventData: string) {
        //这里 event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点
        // 这里的 customEventData 参数就等于之前设置的 'data'
    }
}

代码添加回调方法二：

通过 slider.node.on('slide', ...) 的方式来添加，这种方式注册的事件，无法传递 customEventData。


import { _decorator, Component, Slider } from 'cc';
const { ccclass, property } = _decorator;

@ccclass("SliderCtrl")
export class SliderCtrl extends Component {

    @property(Slider)
    slider: Slider | null = null;

    onLoad () {
       this.slider!.node.on('slide', this.callback, this);
    }

    callback(slider: Slider) {
    
    }
}

七、WebView 组件

WebView 是一种显示网页的组件，该组件让你可以在游戏里面集成一个小的浏览器，目前只支持 Web、iOS 和 Android 平台。


WebView 属性

属性功能说明
Url指定一个 URL 地址，这个地址以 http 或者 https 开头，请填写一个有效的 URL 地址。
WebView EventsWebView 的回调事件，当 webview 在加载网页过程中，加载网页结束后或者加载网页出错时会调用此函数。

WebViewEvents 事件

属性功能说明
Target带有脚本组件的节点。
Component脚本组件名称。
Handler指定一个回调函数，当网页加载过程中、加载完成后或者加载出错时会被调用，该函数会传一个事件类型参数进来。
CustomEventData用户指定任意的字符串作为事件回调的最后一个参数传入。

WebView 事件回调参数

名称功能说明
LOADING表示网页正在加载过程中。
LOADED表示网页加载已经完毕。
ERROR表示网页加载出错了。

代码添加回调方法一：

构造一个 Component.EventHandler 对象，然后设置好对应的 target、component、handler 和 customEventData 参数。

import { _decorator, Component, WebView } from 'cc';
const { ccclass, type } = _decorator;

@ccclass('WebViewComponent')
export class WebViewComponent extends Component {
    @type(WebView)
    webview = null;

    start () {
        const eventHandler = new Component.EventHandler();
        eventHandler.target = newTarget; // 这个对象是你的事件处理代码组件所属的节点
        eventHandler.component = "WebViewComponent";
        eventHandler.handler = "callback";
        eventHandler.customEventData = "data";
        this.webview.webviewEvents.push(eventHandler);
    }

    // 注意参数的顺序和类型是固定的
    callback: function(webview, eventType, customEventData) {
        // webview：是一个 webview 组件对象实例
        // eventType：等于 WebView.EventType enum 里面的值
        // customEventData：参数就等于你之前设置的 "data"
    }
}

代码添加回调方法二：

通过 slider.node.on('slide', ...) 的方式来添加，这种方式注册的事件，无法传递 customEventData。


import { _decorator, Component, WebView } from 'cc';
const { ccclass, type } = _decorator;
@ccclass('WebViewCtrl')
export class WebViewComponent extends Component {
    @type(WebView)
    webview = null;
    start () {
        this.webview.node.on(WebView.EventType.LOADED, this.callback, this);
    }

    callback (webview) {
        // 这里的 webview 是一个 WebView 组件对象
        // 对 webview 进行你想要的操作
    }
}

八、VideoPlayer 组件


VideoPlayer 是一种视频播放组件，可通过该组件播放本地和远程视频，支持的视频格式为 mp4。

点击 属性检查器 下面的 添加组件 按钮，然后从 UI 组件 中选择 VideoPlayer，即可添加 VideoPlayer 组件到节点上。

在这里插入图片描述


1、VideoPlayer 属性

属性功能说明
Resource Type视频来源的类型，目前支持本地（LOCAL）视频和远程（REMOTE）视频 URL
Remote URL当 Resource Type 为 REMOTE 时显示的字段，填入远程视频的 URL
Clip当 Resource Type 为 LOCAL 时显示的字段，拖拽本地视频的资源到此处来使用
Play On Awake视频加载后是否自动开始播放？
Current Time指定从哪个时间点开始播放视频
Volume视频的音量（0.0 ~ 1.0）
Mute是否静音视频。静音时设置音量为 0，取消静音时恢复原来的音量
Keep Aspect Ratio是否保持视频原来的宽高比
Full Screen On Awake是否全屏播放视频
Stay On Bottom永远在游戏视图最底层（该属性仅在 Web 平台生效）
Video Player Event视频播放回调函数，该回调函数会在特定情况被触发，比如播放中，暂时，停止和完成播放。

在这里插入图片描述


2、VideoPlayerEvent 事件

属性功能说明
target带有脚本组件的节点。
component脚本组件名称。
handler指定一个回调函数，当视频开始播放后，暂停时或者结束时都会调用该函数，该函数会传一个事件类型参数进来。
customEventData用户指定任意的字符串作为事件回调的最后一个参数传入。

3、VideoPlayerEvent 事件回调参数

名称功能说明
PLAYING表示视频正在播放中。
PAUSED表示视频暂停播放。
STOPPED表示视频已经停止播放。
COMPLETED表示视频播放完成。
META_LOADED表示视频的元信息已加载完成，可以调用 getDuration 来获取视频总时长。
READY_TO_PLAY表示视频准备好了，可以开始播放了。
ERROR处理视频时触发的错误
CLICKED表示视频被用户点击了。（只支持 Web 平台）

4、代码添加回调方法一：

构造一个 Component.EventHandler 对象，然后设置好对应的 target、component、handler 和 customEventData 参数。

import { _decorator, Component, VideoPlayer } from 'cc';
const { ccclass, type } = _decorator;

@ccclass('VideoPlayerComponent')
export class VideoPlayerComponent extends Component {
    @type(VideoPlayer)
    videoPlayer = null;

    start () {
        const eventHandler = new Component.EventHandler();
        eventHandler.target = newTarget; // 这个对象是你的事件处理代码组件所属的节点
        eventHandler.component = "VideoPlayerComponent";
        eventHandler.handler = "callback";
        eventHandler.customEventData = "data";
        this.videoplayer.videoPlayerEvent.push(eventHandler);
    }

    // 注意参数的顺序和类型是固定的
    callback: function(videoplayer, eventType, customEventData) {
        // 这里的 videoplayer 是一个 VideoPlayer 组件对象实例
        // 这里的 eventType === VideoPlayer.EventType enum 里面的值
        // 这里的 customEventData 参数就等于你之前设置的 "data"
    }
}

5、代码添加回调方法二:

通过 videoplayer.node.on(VideoPlayer.EventType.READY_TO_PLAY, ...) 的方式来添加,也可以注册 meta-loaded、clicked、playing 等事件，这些事件的回调函数的参数与 ready-to-play 的参数一致。

注意:这种方式注册的事件，也无法传递 customEventData.

/假设我们在一个组件的 onLoad 方法里面添加事件处理回调，在 callback 函数中进行事件处理:
import { _decorator, Component, VideoPlayer } from 'cc';
const { ccclass, type } = _decorator;

@ccclass('VideoPlayerComponent')
export class VideoPlayerComponent extends Component {
    @type(VideoPlayer)
    videoPlayer = null;

    start () {
        this.videoplayer.node.on(VideoPlayer.EventType.READY_TO_PLAY, this.callback, this);
    }

    callback (videoplayer) {
        // 这里的 videoplayer 表示的是 VideoPlayer 组件
        // 对 videoplayer 进行你想要的操作
    }
}

6、实现 UI 在 VideoPlayer 上渲染

可通过以下两个步骤实现 UI 在 VideoPlayer 上显示：

（1）、 项目设置 -> 宏配置 中的 ENABLE_TRANSPARENT_CANVAS 设置为勾选状态（ Canvas 背景支持 alpha 通道）


在这里插入图片描述


（2）、 属性检查器 中勾选 VideoPlayer 组件上的 stayOnBottom 属性。


在这里插入图片描述


注意：

  • 该功能仅支持 Web 平台。

  • 各个浏览器具体效果无法保证一致，跟浏览器是否支持与限制有关。

  • 开启 stayOnBottom 后，将无法正常监听 VideoPlayerEvent 中的 clicked 事件。


7、VideoPlayer播放视频演示

import { _decorator, Node, Component, find, VideoPlayer } from 'cc';
const { ccclass, type } = _decorator;

@ccclass('VideoPlayerComponent')
export class VideoPlayerComponent extends Component {
    @type(VideoPlayer)
    videoPlayer = null;

    start () {
        let canvas = find('Canvas');
        canvas.on(Node.EventType.TOUCH_START, this.playVideo, this);
    }

    playVideo () {
        this.videoplayer.play();
    }
}

注意：一些移动端的浏览器或 WebView 不允许自动播放视频，需要在触摸事件中手动播放视频。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1015857.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Windows 10 Enterprise LTSC 2021 (x86) - DVD (Chinese-Simplified)文件分享

Windows 10 Enterprise LTSC 2021 (x86) - DVD (Chinese-Simplified)文件分享

Windows 10 Enterprise LTSC 2021 (x64) - DVD (Chinese-Simplified) SW_DVD9_WIN_ENT_LTSC_2021_64BIT_ChnSimp_MLF_X22-84402.ISO 镜像文件： 链接：https://pan.quark.cn/s/2f8f61ec4a98 Windows 10 Enterprise LTSC 2021 (x86) - DVD (Chinese-Simpli…
阅读更多...
辐射威胁：揭示辐射对人体健康和肠道菌群的影响及防护

辐射威胁：揭示辐射对人体健康和肠道菌群的影响及防护

谷禾健康 辐射对人体的影响是一个长期以来备受关注的问题。长时间暴露在辐射环境下可能会导致细胞损伤、突变和癌症等健康问题。 辐射包括电离辐射（X光机、CT、伽马刀、钴60治疗机、碘-131）和非电离辐射（手机辐射、微波炉、电热毯、高压电塔、…
阅读更多...
LeetCode(力扣)968. 监控二叉树Python

LeetCode(力扣)968. 监控二叉树Python

LeetCode968. 监控二叉树 题目链接代码 题目链接 https://leetcode.cn/problems/binary-tree-cameras/description/ 代码 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # …
阅读更多...
翻牌闯关游戏

翻牌闯关游戏

翻牌闯关游戏 3关：关卡由少至多12格、20格、30格图案：12个玩法：点击两张卡牌，图案一到即可消除掉 记忆时长(毫秒)：memoryDurationTime:5000 可配置，默认5000 提示游戏玩法：showTipsFlag:1 可…
阅读更多...
算法宝典2——Java版本（此系列持续更新，这篇文章目前3道）（有题目的跳转链接）（此份宝典包含了二叉树的算法题）

算法宝典2——Java版本（此系列持续更新，这篇文章目前3道）（有题目的跳转链接）（此份宝典包含了二叉树的算法题）

注：由于字数的限制，我打算把算法宝典做成一个系列，一篇文章就20题！！！ 目录 一、二叉树的算法题（目前3道） 1. 平衡二叉树（力扣） 2. 对称二叉树&#xff0…
阅读更多...
合肥先进光源国家重大科技基础设施项目及配套工程启动会纪念

合肥先进光源国家重大科技基础设施项目及配套工程启动会纪念

合肥先进光源国家重大科技基础设施项目及配套工程启动会纪念 卡西莫多 合肥长丰岗集里 肥鸭从此别泥塘 先平场地设围栏 进而工地筑基忙 光阴似箭指日争 源流汇智山水长 国器西北扩新地 家校又添新区园 重器托举有群力 大步穿梭两地间 科教兴邦大国策 技术盈身坦荡行…
阅读更多...
Sourcetree 无法打开/闪退问题

Sourcetree 无法打开/闪退问题

Sourcetree在某次开机以后无法打开或者是闪退。 Sourcetree是一款Git的可视化图形管理界面,提供了Windows和Mac的免费Git客户端,很方便的管理项目的代码版本 出现问题的环境 win11，sourcTree版本：3.4.12.0 在开始菜单搜索sourcetree，打开…
阅读更多...
Golang中的GMP调度模型

Golang中的GMP调度模型

GMP调度模型 Golang调度器的由来 单进程时代不需要调度器 1.单一的执行流程，计算机只能一个任务一个任务处理。 2.进程阻塞所带来的CPU时间浪费。 后来操作系统就具有了最早的并发能力：多进程并发，当一个进程阻塞的时候，切换…
阅读更多...
polygon yolo

polygon yolo

[1] : github: https://github.com/HRan2004/Yolo-ArbPolygon [2] https://github.com/XinzeLee/PolygonObjectDetection [3] https://github.com/AlbinZhu/yolov7-polygon-detection 链接：https://pan.baidu.com/s/1Zpl1bIGfMli6p5LQdbET0w?pwddw2b 提取码&#…
阅读更多...
C++之std::holds_alternative与std::get应用实例(二百一十九)

C++之std::holds_alternative与std::get应用实例(二百一十九)

简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言： 人生…
阅读更多...
Peppertype：AI写作工具

Peppertype：AI写作工具

【产品介绍】 名称 Peppertype 具体描述 Peppertype是一款人工智能AI内容生成工具，它通过使用机器学习来理解用户的需求。适合在写作过程中寻求帮助的作家，而无需花时间自己学习如何使用。Peppertypeai支持快速制作电子邮件，30…
阅读更多...
nginx 全相联结构的引申

nginx 全相联结构的引申

修改 nginx 纯属巧合，任务是将 reuseport 的支持换一种方式。目前 nginx 的方式是 master 创建 worker 数量个 reuseport listening socket，由 worker 继承。在这种实现方式下，效果是 “所有 worker 可以处理所有 listening socket” 这不就是…
阅读更多...
安卓内部存储不需要申请权限，外部文件需要申请权限

安卓内部存储不需要申请权限，外部文件需要申请权限

内部存储和外部存储的访问权限区别&#xff1a; 内部路径&#xff1a;/data/user/0/com.xxx.xxx/ getExternalFilesDir可以获取到属于 App 自身的文件路径&#xff0c;通常是~/Android/data/<package-name>/**/。在该目录中读写文件均不需要申请权限,随着APP卸载就会删…
阅读更多...
华为云云耀云服务器L实例评测｜Git 私服搭建指南

华为云云耀云服务器L实例评测｜Git 私服搭建指南

前言 本文为华为云云耀云服务器L实例测评文章&#xff0c;测评内容是 云耀云服务器L实例 Git 私有服务器搭建指南 系统配置&#xff1a;2核2G 3M Ubuntu 20.04 我们平时在使用代码托管服务的时候&#xff0c;可能某些代码托管平台对成员有限制&#xff0c;或是由于内容原因会对…
阅读更多...
自动编码器

自动编码器

Autoencoder is designed in a way to perform task of data encoding plus data decoding to reconstruct input. -- Anushka Jain 前言 两兄弟 N.Coder 和 D.Coder 经营着一家艺术画廊。一周末&#xff0c;他们举办了一场特别奇怪的展览&#xff0c;因为它只有一面墙&#x…
阅读更多...
nginx中sent_timeout属性使用注意事项

nginx中sent_timeout属性使用注意事项

send_timeout使用注意事项 send_timeout:指客户端向服务器发送请求并且等待服务器返回数据的时间&#xff0c;超过这个时间链接就断开。如果咱们返回的数据复杂&#xff0c;很耗时&#xff0c;就将该值设置大些。注意该时间指准备过程&#xff0c;不是传输过程&#xff08;下载…
阅读更多...
在线海报图片设计器、图片编辑器源码/仿照稿定设计源码

在线海报图片设计器、图片编辑器源码/仿照稿定设计源码

在线海报设计系统素材设计源码是一个漂亮且功能强大的在线海报图片设计器&#xff0c;仿照稿定设计而成。该系统适用于多种场景&#xff0c;包括海报图片生成、电商分享图、文章长图、视频/公众号封面等。用户无需下载软件&#xff0c;即可轻松实现创意&#xff0c;迅速完成排版…
阅读更多...
7-38 掉入陷阱的数字

7-38 掉入陷阱的数字

输入样例: 5 输出样例: 1:16 2:22 3:13 4:13 ACcode: #include <bits/stdc.h>using namespace std;int main(){int n;cin >> n;vector<int> ans;int limit 1;ans.push_back(n);for(int i0; i<limit; i){//各位数字的和int sum 0;int num ans[i];w…
阅读更多...
独立开发了一款Material3风格的RSS阅读器 - Agr Reader

独立开发了一款Material3风格的RSS阅读器 - Agr Reader

截图 背景&#x1f4d6; 在之前接触到RSS后&#xff0c;发现RSS真是一个十分不错的信息聚合的方式&#xff0c;虽然现在看来RSS的时代已经开始落幕&#xff0c;但是至少目前还是处于能用的阶段。 在我用了Android上好几个RSS阅读App后&#xff0c;发现很多在全文解析方面不是…
阅读更多...
栈与队列经典题目——用栈实现队列

栈与队列经典题目——用栈实现队列

上篇文章对栈和队列的一个经典题目——Leetcode.225-用队列实现栈进行讲解。本篇文章将对另一个题目Leetcode.232-用栈实现队列进行讲解 1. Leetcode.232——用栈实现队列&#xff1a; 题目如下&#xff1a; 1.1 大体思路分析&#xff1a; 题目要求需要实现下列函数所表示的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023