鸿蒙原生应用元服务开发-WebGL网页图形库开发着色器绘制彩色三角形

着色器绘制彩色三角形
使用WebGL开发时，为保证界面图形显示效果，请使用真机运行。
此场景为使用WebGL绘制的彩色三角形图形（GPU绘制）。开发示例如下：
创建页面布局。index.hml示例如下：

<div class="container">
<canvas ref="canvas1" style="width : 400px; height : 200px; background-color : lightyellow;"></canvas>
<button class="btn-button" onclick="BtnColorTriangle">BtnColorTriangle</button>
</div>

1.设置页面样式。index.css示例如下：

.container {flex-direction: column;justify-content: center;align-items: center;
}
.btn-button {margin: 1px;height: 40px;width: 220px;background-color: lightblue;font-size: 20px;text-color: blue;
}

2.编辑JavaScript代码文件，增加彩色三角形绘制逻辑代码。index.js示例如下：

// index.js// WebGL相关预定义
var gl = {DEPTH_BUFFER_BIT: 0x00000100,STENCIL_BUFFER_BIT: 0x00000400,COLOR_BUFFER_BIT: 0x00004000,POINTS: 0x0000,LINES: 0x0001,LINE_LOOP: 0x0002,LINE_STRIP: 0x0003,TRIANGLES: 0x0004,TRIANGLE_STRIP: 0x0005,TRIANGLE_FAN: 0x0006,ZERO: 0,ONE: 1,SRC_COLOR: 0x0300,ONE_MINUS_SRC_COLOR: 0x0301,SRC_ALPHA: 0x0302,ONE_MINUS_SRC_ALPHA: 0x0303,DST_ALPHA: 0x0304,ONE_MINUS_DST_ALPHA: 0x0305,DST_COLOR: 0x0306,ONE_MINUS_DST_COLOR: 0x0307,SRC_ALPHA_SATURATE: 0x0308,FUNC_ADD: 0x8006,BLEND_EQUATION: 0x8009,BLEND_EQUATION_RGB: 0x8009,BLEND_EQUATION_ALPHA: 0x883D,FUNC_SUBTRACT: 0x800A,FUNC_REVERSE_SUBTRACT: 0x800B,BLEND_DST_RGB: 0x80C8,BLEND_SRC_RGB: 0x80C9,BLEND_DST_ALPHA: 0x80CA,BLEND_SRC_ALPHA: 0x80CB,CONSTANT_COLOR: 0x8001,ONE_MINUS_CONSTANT_COLOR: 0x8002,CONSTANT_ALPHA: 0x8003,ONE_MINUS_CONSTANT_ALPHA: 0x8004,BLEND_COLOR: 0x8005,ARRAY_BUFFER: 0x8892,ELEMENT_ARRAY_BUFFER: 0x8893,ARRAY_BUFFER_BINDING: 0x8894,ELEMENT_ARRAY_BUFFER_BINDING: 0x8895,STREAM_DRAW: 0x88E0,STATIC_DRAW: 0x88E4,DYNAMIC_DRAW: 0x88E8,BUFFER_SIZE: 0x8764,BUFFER_USAGE: 0x8765,CURRENT_VERTEX_ATTRIB: 0x8626,FRONT: 0x0404,BACK: 0x0405,FRONT_AND_BACK: 0x0408,CULL_FACE: 0x0B44,BLEND: 0x0BE2,DITHER: 0x0BD0,STENCIL_TEST: 0x0B90,DEPTH_TEST: 0x0B71,SCISSOR_TEST: 0x0C11,POLYGON_OFFSET_FILL: 0x8037,SAMPLE_ALPHA_TO_COVERAGE: 0x809E,SAMPLE_COVERAGE: 0x80A0,NO_ERROR: 0,INVALID_ENUM: 0x0500,INVALID_VALUE: 0x0501,INVALID_OPERATION: 0x0502,OUT_OF_MEMORY: 0x0505,CW: 0x0900,CCW: 0x0901,LINE_WIDTH: 0x0B21,ALIASED_POINT_SIZE_RANGE: 0x846D,ALIASED_LINE_WIDTH_RANGE: 0x846E,CULL_FACE_MODE: 0x0B45,FRONT_FACE: 0x0B46,DEPTH_RANGE: 0x0B70,DEPTH_WRITEMASK: 0x0B72,DEPTH_CLEAR_VALUE: 0x0B73,DEPTH_FUNC: 0x0B74,STENCIL_CLEAR_VALUE: 0x0B91,STENCIL_FUNC: 0x0B92,STENCIL_FAIL: 0x0B94,STENCIL_PASS_DEPTH_FAIL: 0x0B95,STENCIL_PASS_DEPTH_PASS: 0x0B96,STENCIL_REF: 0x0B97,STENCIL_VALUE_MASK: 0x0B93,STENCIL_WRITEMASK: 0x0B98,STENCIL_BACK_FUNC: 0x8800,STENCIL_BACK_FAIL: 0x8801,STENCIL_BACK_PASS_DEPTH_FAIL: 0x8802,STENCIL_BACK_PASS_DEPTH_PASS: 0x8803,STENCIL_BACK_REF: 0x8CA3,STENCIL_BACK_VALUE_MASK: 0x8CA4,STENCIL_BACK_WRITEMASK: 0x8CA5,VIEWPORT: 0x0BA2,SCISSOR_BOX: 0x0C10,COLOR_CLEAR_VALUE: 0x0C22,COLOR_WRITEMASK: 0x0C23,UNPACK_ALIGNMENT: 0x0CF5,PACK_ALIGNMENT: 0x0D05,MAX_TEXTURE_SIZE: 0x0D33,MAX_VIEWPORT_DIMS: 0x0D3A,SUBPIXEL_BITS: 0x0D50,RED_BITS: 0x0D52,GREEN_BITS: 0x0D53,BLUE_BITS: 0x0D54,ALPHA_BITS: 0x0D55,DEPTH_BITS: 0x0D56,STENCIL_BITS: 0x0D57,POLYGON_OFFSET_UNITS: 0x2A00,POLYGON_OFFSET_FACTOR: 0x8038,TEXTURE_BINDING_2D: 0x8069,SAMPLE_BUFFERS: 0x80A8,SAMPLES: 0x80A9,RGBA8: 0x8058,SAMPLE_COVERAGE_VALUE: 0x80AA,SAMPLE_COVERAGE_INVERT: 0x80AB,COMPRESSED_TEXTURE_FORMATS: 0x86A3,DONT_CARE: 0x1100,FASTEST: 0x1101,NICEST: 0x1102,GENERATE_MIPMAP_HINT: 0x8192,BYTE: 0x1400,UNSIGNED_BYTE: 0x1401,SHORT: 0x1402,UNSIGNED_SHORT: 0x1403,INT: 0x1404,UNSIGNED_INT: 0x1405,FLOAT: 0x1406,DEPTH_COMPONENT: 0x1902,ALPHA: 0x1906,RGB: 0x1907,RGBA: 0x1908,LUMINANCE: 0x1909,LUMINANCE_ALPHA: 0x190A,UNSIGNED_SHORT_4_4_4_4: 0x8033,UNSIGNED_SHORT_5_5_5_1: 0x8034,UNSIGNED_SHORT_5_6_5: 0x8363,FRAGMENT_SHADER: 0x8B30,VERTEX_SHADER: 0x8B31,MAX_VERTEX_ATTRIBS: 0x8869,MAX_VERTEX_UNIFORM_VECTORS: 0x8DFB,MAX_VARYING_VECTORS: 0x8DFC,MAX_COMBINED_TEXTURE_IMAGE_UNITS: 0x8B4D,MAX_VERTEX_TEXTURE_IMAGE_UNITS: 0x8B4C,MAX_TEXTURE_IMAGE_UNITS: 0x8872,MAX_FRAGMENT_UNIFORM_VECTORS: 0x8DFD,SHADER_TYPE: 0x8B4F,DELETE_STATUS: 0x8B80,LINK_STATUS: 0x8B82,VALIDATE_STATUS: 0x8B83,ATTACHED_SHADERS: 0x8B85,ACTIVE_UNIFORMS: 0x8B86,ACTIVE_ATTRIBUTES: 0x8B89,SHADING_LANGUAGE_VERSION: 0x8B8C,CURRENT_PROGRAM: 0x8B8D,NEVER: 0x0200,LESS: 0x0201,EQUAL: 0x0202,LEQUAL: 0x0203,GREATER: 0x0204,NOTEQUAL: 0x0205,GEQUAL: 0x0206,ALWAYS: 0x0207,KEEP: 0x1E00,REPLACE: 0x1E01,INCR: 0x1E02,DECR: 0x1E03,INVERT: 0x150A,INCR_WRAP: 0x8507,DECR_WRAP: 0x8508,VENDOR: 0x1F00,RENDERER: 0x1F01,VERSION: 0x1F02,NEAREST: 0x2600,LINEAR: 0x2601,NEAREST_MIPMAP_NEAREST: 0x2700,LINEAR_MIPMAP_NEAREST: 0x2701,NEAREST_MIPMAP_LINEAR: 0x2702,LINEAR_MIPMAP_LINEAR: 0x2703,TEXTURE_MAG_FILTER: 0x2800,TEXTURE_MIN_FILTER: 0x2801,TEXTURE_WRAP_S: 0x2802,TEXTURE_WRAP_T: 0x2803,TEXTURE_2D: 0x0DE1,TEXTURE: 0x1702,TEXTURE_CUBE_MAP: 0x8513,TEXTURE_BINDING_CUBE_MAP: 0x8514,TEXTURE_CUBE_MAP_POSITIVE_X: 0x8515,TEXTURE_CUBE_MAP_NEGATIVE_X: 0x8516,TEXTURE_CUBE_MAP_POSITIVE_Y: 0x8517,TEXTURE_CUBE_MAP_NEGATIVE_Y: 0x8518,TEXTURE_CUBE_MAP_POSITIVE_Z: 0x8519,TEXTURE_CUBE_MAP_NEGATIVE_Z: 0x851A,MAX_CUBE_MAP_TEXTURE_SIZE: 0x851C,TEXTURE0: 0x84C0,TEXTURE1: 0x84C1,TEXTURE2: 0x84C2,TEXTURE3: 0x84C3,TEXTURE4: 0x84C4,TEXTURE5: 0x84C5,TEXTURE6: 0x84C6,TEXTURE7: 0x84C7,TEXTURE8: 0x84C8,TEXTURE9: 0x84C9,TEXTURE10: 0x84CA,TEXTURE11: 0x84CB,TEXTURE12: 0x84CC,TEXTURE13: 0x84CD,TEXTURE14: 0x84CE,TEXTURE15: 0x84CF,TEXTURE16: 0x84D0,TEXTURE17: 0x84D1,TEXTURE18: 0x84D2,TEXTURE19: 0x84D3,TEXTURE20: 0x84D4,TEXTURE21: 0x84D5,TEXTURE22: 0x84D6,TEXTURE23: 0x84D7,TEXTURE24: 0x84D8,TEXTURE25: 0x84D9,TEXTURE26: 0x84DA,TEXTURE27: 0x84DB,TEXTURE28: 0x84DC,TEXTURE29: 0x84DD,TEXTURE30: 0x84DE,TEXTURE31: 0x84DF,ACTIVE_TEXTURE: 0x84E0,REPEAT: 0x2901,CLAMP_TO_EDGE: 0x812F,MIRRORED_REPEAT: 0x8370,FLOAT_VEC2: 0x8B50,FLOAT_VEC3: 0x8B51,FLOAT_VEC4: 0x8B52,INT_VEC2: 0x8B53,INT_VEC3: 0x8B54,INT_VEC4: 0x8B55,BOOL: 0x8B56,BOOL_VEC2: 0x8B57,BOOL_VEC3: 0x8B58,BOOL_VEC4: 0x8B59,FLOAT_MAT2: 0x8B5A,FLOAT_MAT3: 0x8B5B,FLOAT_MAT4: 0x8B5C,SAMPLER_2D: 0x8B5E,SAMPLER_CUBE: 0x8B60,VERTEX_ATTRIB_ARRAY_ENABLED: 0x8622,VERTEX_ATTRIB_ARRAY_SIZE: 0x8623,VERTEX_ATTRIB_ARRAY_STRIDE: 0x8624,VERTEX_ATTRIB_ARRAY_TYPE: 0x8625,VERTEX_ATTRIB_ARRAY_NORMALIZED: 0x886A,VERTEX_ATTRIB_ARRAY_POINTER: 0x8645,VERTEX_ATTRIB_ARRAY_BUFFER_BINDING: 0x889F,IMPLEMENTATION_COLOR_READ_TYPE: 0x8B9A,IMPLEMENTATION_COLOR_READ_FORMAT: 0x8B9B,COMPILE_STATUS: 0x8B81,LOW_FLOAT: 0x8DF0,MEDIUM_FLOAT: 0x8DF1,HIGH_FLOAT: 0x8DF2,LOW_INT: 0x8DF3,MEDIUM_INT: 0x8DF4,HIGH_INT: 0x8DF5,FRAMEBUFFER: 0x8D40,RENDERBUFFER: 0x8D41,RGBA4: 0x8056,RGB5_A1: 0x8057,RGB565: 0x8D62,DEPTH_COMPONENT16: 0x81A5,STENCIL_INDEX8: 0x8D48,DEPTH_STENCIL: 0x84F9,RENDERBUFFER_WIDTH: 0x8D42,RENDERBUFFER_HEIGHT: 0x8D43,RENDERBUFFER_INTERNAL_FORMAT: 0x8D44,RENDERBUFFER_RED_SIZE: 0x8D50,RENDERBUFFER_GREEN_SIZE: 0x8D51,RENDERBUFFER_BLUE_SIZE: 0x8D52,RENDERBUFFER_ALPHA_SIZE: 0x8D53,RENDERBUFFER_DEPTH_SIZE: 0x8D54,RENDERBUFFER_STENCIL_SIZE: 0x8D55,FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE: 0x8CD0,FRAMEBUFFER_ATTACHMENT_OBJECT_NAME: 0x8CD1,FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL: 0x8CD2,FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE: 0x8CD3,COLOR_ATTACHMENT0: 0x8CE0,DEPTH_ATTACHMENT: 0x8D00,STENCIL_ATTACHMENT: 0x8D20,DEPTH_STENCIL_ATTACHMENT: 0x821A,NONE: 0,FRAMEBUFFER_COMPLETE: 0x8CD5,FRAMEBUFFER_INCOMPLETE_ATTACHMENT: 0x8CD6,FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT: 0x8CD7,FRAMEBUFFER_INCOMPLETE_DIMENSIONS: 0x8CD9,FRAMEBUFFER_UNSUPPORTED: 0x8CDD,FRAMEBUFFER_BINDING: 0x8CA6,RENDERBUFFER_BINDING: 0x8CA7,MAX_RENDERBUFFER_SIZE: 0x84E8,INVALID_FRAMEBUFFER_OPERATION: 0x0506,UNPACK_FLIP_Y_WEBGL: 0x9240,UNPACK_PREMULTIPLY_ALPHA_WEBGL: 0x9241,CONTEXT_LOST_WEBGL: 0x9242,UNPACK_COLORSPACE_CONVERSION_WEBGL: 0x9243,BROWSER_DEFAULT_WEBGL: 0x9244,TEXTURE_MAX_LOD: 0x813B,TEXTURE_BASE_LEVEL: 0x813C,TEXTURE_IMMUTABLE_FORMAT: 0x912F,UNIFORM_BLOCK_BINDING: 0x8A3F,UNIFORM_BLOCK_DATA_SIZE: 0x8A40,UNIFORM_BLOCK_ACTIVE_UNIFORMS: 0x8A42,UNIFORM_BLOCK_ACTIVE_UNIFORM_INDICES: 0x8A43,UNIFORM_BLOCK_REFERENCED_BY_VERTEX_SHADER: 0x8A44,UNIFORM_BLOCK_REFERENCED_BY_FRAGMENT_SHADER: 0x8A46,RED: 0x1903,PIXEL_UNPACK_BUFFER: 0x88EC,RGB8: 0x8051,R16F: 0x822D,COPY_WRITE_BUFFER: 0x8F37,TEXTURE_3D: 0x806F,COMPRESSED_R11_EAC: 0x9270,COPY_READ_BUFFER: 0x8F36,TRANSFORM_FEEDBACK_BUFFER: 0x8C8E,TRANSFORM_FEEDBACK_BUFFER_BINDING: 0x8C8F,TRANSFORM_FEEDBACK_BUFFER_SIZE: 0x8C85,TRANSFORM_FEEDBACK_BUFFER_START: 0x8C84,UNIFORM_BUFFER_BINDING: 0x8A28,UNIFORM_BUFFER_SIZE: 0x8A2A,UNIFORM_BUFFER_START: 0x8A29,DYNAMIC_READ: 0x88E9,READ_FRAMEBUFFER: 0x8CA8,COLOR_ATTACHMENT1: 0x8CE1,INTERLEAVED_ATTRIBS: 0x8C8C,UNIFORM_OFFSET: 0x8A3B,UNIFORM_TYPE: 0x8A37,UNIFORM_SIZE: 0x8A38,UNIFORM_BLOCK_INDEX: 0x8A3A,UNIFORM_ARRAY_STRIDE: 0x8A3C,UNIFORM_MATRIX_STRIDE: 0x8A3D,UNIFORM_IS_ROW_MAJOR: 0x8A3E,TEXTURE_MAX_ANISOTROPY_EXT: 0x84FE
}// 顶点着色器程序
var VSHADER_SOURCE ='attribute vec4 a_Position;\n' + // attribute variable'attribute vec4 a_Color;\n' +'varying vec4 v_Color;\n' +'void main() {\n' +'  gl_Position = a_Position;\n' + // Set the vertex coordinates of the point'  v_Color = a_Color;\n' +'}\n';// 片元着色器程序
var FSHADER_SOURCE ='precision mediump float;\n' +'varying vec4 v_Color;\n' +'void main() {\n' +'  gl_FragColor = v_Color;\n' +'}\n';function initVertexBuffers(gl) {// 顶点坐标和颜色var verticesColors = new Float32Array([0.0, -0.5, 1.0, 0.0, 0.0,-0.5, -0.8, 0.0, 1.0, 0.0,0.5, -0.8, 0.0, 0.0, 1.0,]);var n = 3; // 点的个数var FSIZE = verticesColors.BYTES_PER_ELEMENT; //数组中每个元素的字节数// 创建缓冲区对象var vertexBuffer = gl.createBuffer();if (!vertexBuffer) {console.log('Failed to create the buffer object');return -1;}// 将缓冲区对象绑定到目标gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);// 向缓冲区对象写入数据gl.bufferData(gl.ARRAY_BUFFER, verticesColors.buffer, gl.STATIC_DRAW);// 获取着色器中attribute变量a_Position的地址var a_Position = gl.getAttribLocation(gl.program, 'a_Position');if (a_Position < 0) {console.log('Failed to get the storage location of a_Position');return -1;}// 将缓冲区对象分配给a_Position变量gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 5 * FSIZE, 0);// 连接a_Position变量与分配给它的缓冲区对象gl.enableVertexAttribArray(a_Position);// 获取着色器中attribute变量a_Color的地址var a_Color = gl.getAttribLocation(gl.program, 'a_Color');if (a_Color < 0) {console.log('Failed to get the storage location of a_Color');return -1;}// 将缓冲区对象分配给a_Color变量gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);// 连接a_Color变量与分配给它的缓冲区对象gl.enableVertexAttribArray(a_Color);// 解除绑定gl.bindBuffer(gl.ARRAY_BUFFER, null);return n;
}/*** 创建并使能一个program对象* @param gl 表示 WebGL上下文对* @param vshader 表示顶点着色器* @param fshader 表示片段着色器* @return 如果WebGLProgram对象被创建并成功作为当前对象，则返回true；否则返回false */
function initShaders(gl, vshader, fshader) {var program = createProgram(gl, vshader, fshader);console.log("======createProgram program: " + program);if (!program) {console.log('Failed to create program');return false;}gl.useProgram(program);gl.program = program;return true;
}/*** 创建一个linked program对象* @param gl 表示 WebGL上下文对象* @param vshader 表示顶点着色器* @param fshader 表示片段着色器* @return 如果创建program成功，则返回创建的program；否则返回null*/
function createProgram(gl, vshader, fshader) {console.log("======createProgram start======");// 创建shader对象var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);console.log("======vertexShader: " + vertexShader);var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);if (!vertexShader || !fragmentShader) {return null;}// 创建program对象var program = gl.createProgram();console.log("======createProgram program: " + program);if (!program) {return null;}// 将着色器附加到对象gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);// 连接程序对象gl.linkProgram(program);// 检查连接对象的结果var linked = gl.getProgramParameter(program, 0x8B82);console.log("======getProgramParameter linked: " + linked);if (!linked) {var error = gl.getProgramInfoLog(program);console.log('Failed to link the program: ' + error);gl.deleteProgram(program);gl.deleteShader(fragmentShader);gl.deleteShader(vertexShader);return null;}return program;
}/*** 创建一个shader对象* @param gl 表示 WebGL上下文对象* @param type 表示shader类型* @param source 表示shader的源码 * @return 如果操作成功，返回创建的着色器对象；否则返回false*/ 
function loadShader(gl, type, source) {console.log("======into loadShader====");// 创建shader对象var shader = gl.createShader(type);if (shader == null) {console.log('Failed to create the shader.');return null;}// 设置shader programgl.shaderSource(shader, source);// 编译shadergl.compileShader(shader);// 检查shader编译结果var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);if (!compiled) {var error = gl.getShaderInfoLog(shader);console.log('Failed to compile the shader: ' + error);gl.deleteShader(shader);return null;}return shader;
}export default {data: {title: "DEMO BY TEAMOL",fit:"cover",fits: ["cover", "contain", "fill", "none", "scale-down"]},onInit() {this.title = this.$t('strings.world');},BtnColorTriangle() {// 获取canvas元素const el = this.$refs.canvas1;// 获取webgl上下文var gl = el.getContext('webgl');if (!gl) {console.log('Failed to get the rendering context for WebGL');return;}// 初始化着色器if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {console.log('Failed to initialize shaders.');return;}// 设置顶点位置var n = initVertexBuffers(gl);if (n < 0) {console.log('Failed to set the positions of the vertices');return;}// 指定清空<canvas>的颜色gl.clearColor(0.0, 0.0, 0.0, 1.0);// 清空<canvas>gl.clear(gl.COLOR_BUFFER_BIT);// 绘制三角形gl.drawArrays(gl.TRIANGLES, 0, n);// 清buffergl.flush();}
}

3.点击按钮绘制彩色三角形的效果图
 

鸿蒙原生应用元服务开发-WebGL网页图形库开发着色器绘制彩色三角形-鸿蒙开发者社区


本文参考引用HarmonyOS官方开发文档，基于API9。

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

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

相关文章

鸿蒙开发(五)-应用签名相关

鸿蒙开发(五)-应用签名相关

鸿蒙开发(五)-应用签名相关 本篇文章主要介绍下鸿蒙应用下的应用签名的创建与配置。 根据之前的介绍&#xff0c;我们知道&#xff0c;在DevEco Studio默认创建的应用程序&#xff0c;是没有sign配置的。 默认输出的应用文件如下&#xff1a; build->default->output…
阅读更多...
力扣面试150 两数之和 II - 输入有序数组 双指针 HashMap

力扣面试150 两数之和 II - 输入有序数组 双指针 HashMap

Problem: 167. 两数之和 II - 输入有序数组 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( 1 ) O(1) O(1) Code class Solution {public int[] twoSum(int[] numbers, int target) {int l 0;int r numbers.length-1;while(l < r){if(numbers[l] numbers[…
阅读更多...
MySQL基础-----多表查询之子查询

MySQL基础-----多表查询之子查询

目录 前言 子查询概述 1.概念 2.分类 一、标量子查询 二、列子查询 三、行子查询 四、表子查询 前言 上一期我们讲了内外连接查询以及自连接查询&#xff0c;那么本期我们就学习多表查询的子查询。本期会详细讲解什么是子查询&#xff0c;以及子查询的相关功能&#xf…
阅读更多...
智慧公厕建设，助力打造宜居、韧性、可持续的智慧城市

智慧公厕建设，助力打造宜居、韧性、可持续的智慧城市

公共厕所作为智慧城市的重要组成部分&#xff0c;对于城市的高质量发展起着至关重要的作用。智慧公厕建设旨在通过全面监测、控制和管理公共厕所&#xff0c;实现多方面功能&#xff0c;包括公共厕所环境监测与调控、厕位占用监测与引导、消耗品监测与缺失提示、安全防范与管理…
阅读更多...
力扣78. 子集

力扣78. 子集

Problem: 78. 子集 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 1.定义一维数组track用于记录决策路径&#xff0c;二维数组res用于存储所有的子集&#xff1b; 2.决策阶段&#xff1a;从0阶段起来&#xff08;0阶段决策路径中为空集&#xff09;&#xff0c;每…
阅读更多...
【拓扑空间】可分性2

【拓扑空间】可分性2

可分拓扑空间 如果拓扑空间有可数的稠密子集&#xff0c;则称是可分拓扑空间。 可分&#xff1a;有可数子集A&#xff0c; 拓扑空间&#xff1a; 1.&#xff0c; 2.任意并 3.有限交 稠密&#xff1a; 闭包 导集&#xff1a;所有聚点的集合 聚点&#xff1a;任意去心领域&am…
阅读更多...
并查集Disjoint Set

并查集Disjoint Set

并查集的概念 并查集是一种简单的集合表示&#xff0c;它支持以下三种操作 1. make_set(x)&#xff0c;建立一个新集合&#xff0c;唯一的元素是x 2. find_set(x)&#xff0c;返回一个指针&#xff0c;该指针指向包含x的唯一集合的代表&#xff0c;也就是x的根节点 3. union_…
阅读更多...
easyExcel 导入、导出Excel 封装公共的方法

easyExcel 导入、导出Excel 封装公共的方法

文档包含三部分功能 1、easyExcel 公共导出list<对象>方法&#xff0c;可以自定义excel中第一行和样式 2、easyExcel 导入逻辑&#xff0c;结合spring Validator 验证导入数据是否符合规范 3、easyExcel 自定义导出 list<map> 、 list<对象> &#xff08;可…
阅读更多...
【论文阅读】Improved Denoising Diffusion Probabilistic Models

【论文阅读】Improved Denoising Diffusion Probabilistic Models

Improved Denoising Diffusion Probabilistic Models 文章目录 Improved Denoising Diffusion Probabilistic Models概述Improving the Log-likelihoodLearning ∑ θ ( x t , t ) \sum_{\theta}(x_{t}, t) ∑θ​(xt​,t)Improving the Noise ScheduleReducing Gradient Nois…
阅读更多...
Kotlin 中List，Set，Map的创建与使用

Kotlin 中List，Set，Map的创建与使用

目录 1. List 的使用 1.1 不可变 List 1.2 可变 List 2. Set 的使用 2.1 不可变 Set 2.2 可变 Set 3. Map 的使用 3.1 不可变Map 3.2 可变Map 本篇主要为已经有Java基础的同学展示Kotlin语言中的List&#xff0c;Set&#xff0c;Map的创建和使用&#xff0c;所以Java代…
阅读更多...
【小白刷leetcode】第15题

【小白刷leetcode】第15题

【小白刷leetcode】第15题 动手刷leetcode&#xff0c;正在准备蓝桥&#xff0c;但是本人算法能力一直是硬伤。。。所以做得一直很痛苦。但是不熟练的事情像练吉他一样&#xff0c;就需要慢速&#xff0c;多练。 题目描述 看这个题目&#xff0c;说实在看的不是很懂。索性我们直…
阅读更多...
uniapp 对video视频组件嵌套倍速按钮

uniapp 对video视频组件嵌套倍速按钮

这次接了需求是要求有倍速功能&#xff0c;去看了文档发现并没有倍速按钮的属性&#xff0c;想着手写一个吧 可最后发现原生层级太高&#xff0c;无论怎么样都迭不上去&#xff0c;就只能去找插件看看咯 找了好多插件发现都不可用&#xff0c;因为我这是app端&#xff0c;有些视…
阅读更多...
Vue组件中引入jQuery

Vue组件中引入jQuery

两种在vue中引入jQuery的方式 1、普通html中使用jQuery 将jQuer的文件导入到项目中&#xff0c;然后直接使用<script src"jQuery.js"></script>即可。 <script src"jQuery.js"></script> 2、vue组件中使用jQuery 安装依赖 c…
阅读更多...
C语言数据结构基础笔记——树、二叉树简介

C语言数据结构基础笔记——树、二叉树简介

1.树 树是一种 非线性 的数据结构&#xff0c;它是由 n &#xff08; n>0 &#xff09;个有限结点组成一个具有层次关系的集合。 把它叫做树是因 为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 &#xff08;图片来源于网络&#xff09;…
阅读更多...
【OJ】string类题目

【OJ】string类题目

个人主页 &#xff1a; zxctscl 如有转载请先通知 题目 1. 415字符串相加1.1 分析1.2 代码 2. 344反转字符串2.1 分析2.2 代码 3. HJ1字符串最后一个单词的长度3.1 分析3.2 代码 4. 387.字符串中的第一个唯一字符4.1 分析4.2 代码 5. 125验证回文串5.1 分析5.2 代码 1. 415字符…
阅读更多...
wordpress被恶意搜索攻击(网址/?s=****)解决方法。

wordpress被恶意搜索攻击(网址/?s=****)解决方法。

源地址&#xff1a;https://www.ctvol.com/seoomethods/1413686.html 什么叫恶意搜索攻击&#xff1f; wordpress恶意搜索攻击并不是像病毒一样的攻击&#xff0c;而是一种seo分支黑帽手段&#xff0c;通过被攻击网站搜索功能中长尾关键词来实现攻击&#xff0c;通过网址不断…
阅读更多...
【LeetCode热题100】146. LRU 缓存（链表）

【LeetCode热题100】146. LRU 缓存（链表）

一.题目要求 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中&#xff0c;则返回关键字的值&#xff0c…
阅读更多...
Jenkins插件Parameterized Scheduler用法

Jenkins插件Parameterized Scheduler用法

Jenkins定时触发构建的同时设定参数。可以根据不同的定时构建器设置不同参数或环境变量的值。可以设置多个参数。并结合when控制stage流程的执行。结合when和triggeredBy区分定时构建的stage和手动执行的stage。 目录 什么是Parameterized Scheduler&#xff1f;如何配置实现呢…
阅读更多...
代码随想录训练营Day24:● 理论基础 ● 77. 组合

代码随想录训练营Day24:● 理论基础 ● 77. 组合

理论基础 回溯算法解决的问题 回溯法&#xff0c;一般可以解决如下几种问题&#xff1a; 组合问题&#xff1a;N个数里面按一定规则找出k个数的集合 切割问题&#xff1a;一个字符串按一定规则有几种切割方式 子集问题&#xff1a;一个N个数的集合里有多少符合条件的子集 排列…
阅读更多...
yolo项目中如何训练自己的数据集

yolo项目中如何训练自己的数据集

1.收集自己需要标注的图片 2.打开网站在线标注网站 2.1 点击右下角Get Start 2.2点击这里上传自己的图片 上传成功后有英文的显示 点击左边的Object Detection&#xff0c;表示用于目标检测 2.3选择新建标签还是从本地加载标签 如果是本地加载标签&#xff08;左边&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023