03 2023 档案

摘要:给定一个 n × n 的二维矩阵表示一个图像。 将图像旋转 90 度、180度、270度。 示例 1: 给定 matrix = [ [1,2,3], [4,5,6], [7,8,9] ], 原地旋转输入矩阵,使其变为: [ [7,4,1], [8,5,2], [9,6,3] ] 示例 2: 给定 m 阅读全文
posted @ 2023-03-15 09:36 imxiangzi 阅读(225) 评论(0) 推荐(0) 编辑
摘要:向量的平移,比较简单。 Xnew = Xold + Tx Ynew = Yold + Ty 缩放也较为简单 矩阵如何进行计算呢?之前的文章中有简介一种方法,把行旋转一下,然后与右侧对应相乘。在谷歌图片搜索旋转矩阵时,看到这张动图,觉得表述的很清晰了。 稍微复杂一点的是旋转,如果只是二维也很简单(因为 阅读全文
posted @ 2023-03-15 09:33 imxiangzi 阅读(210) 评论(0) 推荐(0) 编辑
摘要:目录一、VBO的作用二、VAO的作用三、一个VAO和多个VBO注: VAO和VBO都是用来存储顶点信息的,并把这些信息送入顶点着色器。至于什么是顶点和顶点着色器,这里就不多说了,不了解的读者可自行CSDN。 VBO的B为Buffer之意,用来存储顶点数据;VAO的A为Array,但我认为理解为 At 阅读全文
posted @ 2023-03-13 10:45 imxiangzi 阅读(48) 评论(0) 推荐(0) 编辑
摘要:目录 一. 基本概念: 二. 理解缓冲对象 glVertex 函数 顶点数组(Vertex Array) 三. VBO(Vertex Buffer Object)顶点缓冲区对象 大体流程理解: Qt 中使用QOpenGLWidget 的VBO 例子 四. VAO(Vertex Array Objec 阅读全文
posted @ 2023-03-13 10:41 imxiangzi 阅读(1098) 评论(0) 推荐(0) 编辑
摘要:这俩个O,前面搞了这么多链接,已经迷糊了,捋一捋吧。 事物的发展都是一个过程,所以如果能按着这个技术发展的过程来学习,应该就能捋顺了。 简单的说,如果能亲身经历一遍这个发展过程,重新”发明“出VAO+VBO,自然就明白啥是VAO,VBO了。 过程1——立即渲染模式 这里不从网上找概念,因为我是小白, 阅读全文
posted @ 2023-03-12 22:31 imxiangzi 阅读(139) 评论(0) 推荐(0) 编辑
摘要:目录一、VBO的作用二、VAO的作用三、一个VAO和多个VBO注: VAO和VBO都是用来存储顶点信息的,并把这些信息送入顶点着色器。至于什么是顶点和顶点着色器,这里就不多说了,不了解的读者可自行CSDN。 VBO的B为Buffer之意,用来存储顶点数据;VAO的A为Array,但我认为理解为 At 阅读全文
posted @ 2023-03-12 22:30 imxiangzi 阅读(148) 评论(0) 推荐(0) 编辑
摘要:VS2019的C++语言标准默认是ISO C++14,可是通过VS新建的Qt工程,默认是C++11,那么如何更改为支持C++14呢 在代码中加入以下语句,可以查看正在使用中的C++标准 cout << __cplusplus << endl;1如果输出为199711,那么就说明使用的是C++ 98语 阅读全文
posted @ 2023-03-12 15:34 imxiangzi 阅读(677) 评论(0) 推荐(0) 编辑
摘要:GLSL(OpenGL着色语言OpenGL Shading Language)语法跟C语言很类似,在可编程管线中我们必须要纯手写顶点和片源着色器,这里就要求必须使用GLSL,自行编译,链接,使用,本片文章介绍了GLSL基础语法。 GLSL中提供了许多内建的函数,来方便我们的使用。可以在官方手册中查找 阅读全文
posted @ 2023-03-12 08:46 imxiangzi 阅读(293) 评论(0) 推荐(0) 编辑
摘要:前言 期待您移步上篇:OpenGL笔记十三:GLSL加载纹理颠倒六种方案 概述 GLSL 全称 OpenGL Shading Language,是用来在 OpenGL 中着色编程的语言,即开发人员写的自定义程序代码。是执行在 GPU上的,代替了固定的渲染管线的一部分,使渲染管线中不同层次具有可编程性 阅读全文
posted @ 2023-03-12 08:46 imxiangzi 阅读(183) 评论(0) 推荐(0) 编辑
摘要:我的 OpenGL 专题学习目录,希望和大家一起学习交流进步! OpenGL学习(一)-- 术语了解 OpenGL学习(二)-- Xcode 搭建 OpenGL 环境 OpenGL学习(三)-- OpenGL 基础渲染 OpenGL学习(四)-- 正面&背面剔除和深度测试 OpenGL学习(五)-- 阅读全文
posted @ 2023-03-12 08:45 imxiangzi 阅读(950) 评论(0) 推荐(0) 编辑
摘要:这一小节并不会向你展示非常先进非常酷的新特性,也不会对场景的视觉质量有显著的提高。但是,这一节会或多或少涉及GLSL的一些有趣的地方以及一些很棒的技巧,它们可能在今后会帮助到你。简单来说,它们就是在组合使用OpenGL和GLSL创建程序时的一些最好要知道的东西,和一些会让你生活更加轻松的特性。 我们 阅读全文
posted @ 2023-03-12 08:44 imxiangzi 阅读(68) 评论(0) 推荐(0) 编辑
摘要:目录 GLSL简介 GLSL的内建变量 顶点着色器变量 gl_PointSize gl_VertexID 片段着色器变量 gl_FragCoord gl_FragDepth 参考网站:LearnOpenGL 参考书籍:OpenGL编程指南第九版 GLSL简介OpenGL着色语言(OpenGL Sha 阅读全文
posted @ 2023-03-12 08:43 imxiangzi 阅读(299) 评论(0) 推荐(0) 编辑
摘要:前言# 经过之前一段时间的学习(渲染管线简介)我们已经知道了着色器(Shader)是运行在GPU上的程序,这些小程序为图形渲染管线的某个特定部分而运行,着色器只是一种把输入转化为输出的程序,着色器也是一种非常独立的程序,因为它们之间不能相互通信,它们之间唯一的沟通只有通过输入和输出 之前我们简要地触 阅读全文
posted @ 2023-03-12 08:42 imxiangzi 阅读(371) 评论(0) 推荐(0) 编辑
摘要:GLSL的Hello World 这一节中包含一个最基本的shader,它提供如下功能:顶点变换然后使用单一的颜色渲染图元。 顶点shader 前面已经说过,顶点shader负责完成顶点变换。这里将按照固定功能的方程完成顶点变换。 固定功能流水线中一个顶点通过模型视图矩阵以及投影矩阵进行变换,使用如 阅读全文
posted @ 2023-03-11 22:41 imxiangzi 阅读(67) 评论(0) 推荐(0) 编辑
摘要:WebGL着色器GLSL矩阵mat本文是WebGL教程(电子书)的2.5节内容 着色器语言中通过关键字mat2、mat3、mat4分别声明一个2x2矩阵、3x3矩阵、4x4矩阵,通过内置函数mat2()、mat3()、mat4()分别创建一个2x2矩阵、3x3矩阵、4x4矩阵。 关键字 数据类型ma 阅读全文
posted @ 2023-03-11 22:40 imxiangzi 阅读(216) 评论(0) 推荐(0) 编辑
摘要:1、变量类型 基础类型:bool,int,uint,float,double 向量类型:vecN,bvecN,ivecN,uvecN,dvecN N表示向量维数(N=1,2,3,4)。 含前缀b为bool向量,i为int向量,u为uint向量,d为double向量,不含前缀为float向量。 可以通 阅读全文
posted @ 2023-03-11 22:35 imxiangzi 阅读(132) 评论(0) 推荐(0) 编辑
摘要:在上一篇文章中我们初步了解了 GLSL ES 的基本语法,那么本篇文章就和大家一起学习 GLSL ES 的数据类型。 Let’s go!!! 上一篇:《Shader 入门:GLSL ES(简介和基本语法)》 在本系列文章中主要针对 GLSL ES 3.0 进行讲解 正文 数据类型 标量(Scalar 阅读全文
posted @ 2023-03-11 11:12 imxiangzi 阅读(196) 评论(0) 推荐(0) 编辑
摘要:基本类型: 类型说明 void 空类型,即不返回任何值 bool 布尔类型 true,false int 带符号的整数 signed integer float 带符号的浮点数 floating scalar vec2, vec3, vec4 n维浮点数向量 n-component floating 阅读全文
posted @ 2023-03-10 23:21 imxiangzi 阅读(172) 评论(0) 推荐(0) 编辑
摘要:从零开始学习openGL与GLSL(没有计算机图像学基础),开始确实挺费劲,网上的资料虽然多,但不系统,例子也不全,openGL还好(这里指的是v2.0之前的版本,使用glBegin(), glEnd()方式绘制),完整的例子比较多,而GLSL的例子相对少不少,中间走了不少弯路。下面说一下个人的一些 阅读全文
posted @ 2023-03-10 17:47 imxiangzi 阅读(393) 评论(0) 推荐(0) 编辑
摘要:权威官方文档:https://www.opengl.org/documentation/glsl/ 权威民间金典入门教程:http://blog.csdn.net/racehorse 一个详细完整的GLSL代码:http://www.ituring.com.cn/article/851 GLSL简介 阅读全文
posted @ 2023-03-10 17:46 imxiangzi 阅读(121) 评论(0) 推荐(0) 编辑
摘要:着色器语言和C语言一样,通过一个表示特定数据类型的关键词声明一个变量,比如int num;通过int关键字声明一个整数型变量num,不过着色器语言还提供了三个关键字attribute、uniform和varying用来声明特定用途的变量。 attribute和uniform关键字的目的主要是为了ja 阅读全文
posted @ 2023-03-10 17:02 imxiangzi 阅读(321) 评论(0) 推荐(0) 编辑
摘要:一、前言 2022年圣诞节到来啦,很高兴这次我们又能一起度过~ 这次给大家带来一个简单漂亮圣诞树灯。 当然了,本篇文章主要是讲解一下如何在 Qml 中使用 GLSL 来实现自己的特效。 至于代码嘛,我比较喜欢在 Shadertoy 上寻找,那里有很多超级炫酷的着色器实现的特效,并且可以很轻松的集成到 阅读全文
posted @ 2023-03-10 14:50 imxiangzi 阅读(117) 评论(0) 推荐(0) 编辑
摘要:上节在绘制三角形的时候,简单讲解了一些着色器,GLSL 的相关概念,可能看的云里雾里的。不要担心,在本节中,我将详细讲解着色语言 GL Shader Language(GLSL)的一些基本的概念。 PS:无特殊说明,文中的 GLSL 均指 OpenGL ES 2.0 的着色语言。 概览 OpenGL 阅读全文
posted @ 2023-03-10 13:45 imxiangzi 阅读(967) 评论(0) 推荐(0) 编辑
摘要:矩阵:矩阵的初始化: 可以用向量初始化,或单个值指定,但是OGL是列主序矩阵,所以先填充的是第一 列。mat3 m =mat3 (1.0, 0.0, 0.0, 0.0, 1.0, 2.0, 0.0, 0.0, 1.0);vec3 colum1 = (1.0, 0.0, 0.0);vec3 colum 阅读全文
posted @ 2023-03-10 13:39 imxiangzi 阅读(57) 评论(0) 推荐(0) 编辑
摘要:Detailed DescriptionQOpenGLWidget类是用于渲染OpenGL图形。 除了可以选择使用QPainter和标准的OpenGL渲染图形,QOpenGLWidget类提供了在Qt应用程序中显示OpenGL图形的功能。它使用起来非常简单:新建类继承于QOpenGLWidget,使 阅读全文
posted @ 2023-03-10 11:21 imxiangzi 阅读(450) 评论(0) 推荐(0) 编辑
摘要:前言了解到这本书,是源于这篇文章。https://zhuanlan.zhihu.com/p/95943444加上最近恰好也想加深下对shader的理解,干脆先挖个坑,记录下后面读这本书的笔记。 一.环境搭建首先是练习环境的搭建,先前刚搭建好了 vscode 练习glsl的相关环境。VSCode + 阅读全文
posted @ 2023-03-10 11:05 imxiangzi 阅读(238) 评论(0) 推荐(0) 编辑
摘要:直到目前,我们介绍opengl 的工程准备,窗口建立,画第一个三角形,着色器,纹理贴图。所有这些,都寻求问题描述简单,看上去是平面的操作一样。下面我们要进入opengl 的3D,因此需要了解一些必要的数学知识。本文就此做些简单介绍,向量,矩阵及其运算。如果你不能很好理解,至少看一遍吧,以后碰到不懂的 阅读全文
posted @ 2023-03-10 11:01 imxiangzi 阅读(81) 评论(0) 推荐(0) 编辑
摘要:文章目录缩放glm矩阵表示glm缩放矩阵实现位移齐次坐标glm位移矩阵实现旋转沿x轴旋转沿y轴旋转沿z轴旋转沿任意轴旋转glm旋转矩阵实现矩阵的组合glm矩阵组合使用 接上篇 OpenGL学习笔记:数学基础和常用矩阵总结(一)缩放前面说了一大堆的理论,现在终于可以来点实际应用了对一个向量进行缩放(S 阅读全文
posted @ 2023-03-10 11:00 imxiangzi 阅读(380) 评论(0) 推荐(0) 编辑
摘要:目录3D坐标系统点矩阵(单位矩阵、转置矩阵、逆矩阵;矩阵加法和乘法)变换矩阵(平移、缩放、旋转、投影[透视&推导/正射]、LookAt)旋转矩阵的数学推导向量及操作点积和叉积的应用局部和世界空间——模型矩阵M证明:一个变换矩阵就能完成不同坐标系下的坐标变换视觉空间和合成相机——模型-视图矩阵MV三维 阅读全文
posted @ 2023-03-10 10:58 imxiangzi 阅读(97) 评论(0) 推荐(0) 编辑
摘要:目录 3D数学 向量 点乘 叉乘 矩阵 理解变换 视觉坐标 视图变换 模型变换 模型视图的二元性 投影变换 视口变换 模型视图矩阵 矩阵构造 单位矩阵 平移 旋转 缩放 综合变换 运用模型视图矩阵 更多对象 使用三角形批次类(GLTriangleBatch) 实例案例 投影矩阵 正投影 透视投影 模 阅读全文
posted @ 2023-03-10 10:56 imxiangzi 阅读(80) 评论(0) 推荐(0) 编辑
摘要:opengl除了基础的模型构建和贴图,还需要进行位置变换,缩放等功能,之前定义的顶点坐标(0,0.5,0),纹理坐标(0,0.5)实际上是一个向量,而对多个坐标构成的模型进行变换、缩放实际上是向量与矩阵相乘的结果,这涉及一些向量和矩阵的基础数学知识: 向量 Opengl只涉及三维,这里讨论的向量在一 阅读全文
posted @ 2023-03-09 20:39 imxiangzi 阅读(97) 评论(0) 推荐(0) 编辑
摘要:矩阵向量的乘积可以理解为将一个特定的线性变换作用在向量上, 本次我们先看几个特殊的矩阵下的变换以及矩阵矩阵的乘积. ▌零矩阵 即所有元素都是 0 的矩阵, 记为 O . 可以用下标来表示矩阵的大小: <img src="https://pic2.zhimg.com/v2-ff5b45295e168e 阅读全文
posted @ 2023-03-09 20:38 imxiangzi 阅读(411) 评论(0) 推荐(0) 编辑
摘要:向量之间的叉乘和点乘,概念易混淆,分别不清楚,因此本文专门对这个概念进行了详细分析介绍。首先,介绍一下向量(Vector),在几乎所有的几何问题中,向量(有时也称矢量)是一个基本点。向量的定义包含方向和一个数(长度)。 在二维空间中,一个向量可以用一对x和y来表示。向量:既有方向又有大小的量。通常情 阅读全文
posted @ 2023-03-09 17:06 imxiangzi 阅读(1103) 评论(0) 推荐(0) 编辑
摘要:好的,今天麦子继续跟大家来讲讲两个向量的另一种乘法--叉乘 注:同上篇一样,部分地方会用到矩阵,我们还没讨论过,我会在有矩阵的段落开头加上(*)做为标记,对矩阵不熟的朋友可以之后返回来看,但是不会也并不影响阅读。 叉乘(Cross Product) 叉乘的结果就是一个向量,长这样 v→×u→=( v 阅读全文
posted @ 2023-03-09 17:06 imxiangzi 阅读(460) 评论(0) 推荐(0) 编辑
摘要:书接上文,麦子带大家简单看了下向量是什么以及向量的加减法,到目前为止所有的结论都是很直观的,但是讲到向量的乘法时我们遇到了两个问题: 两个向量相乘是个什么含义呢? 两个向量相乘,结果是个标量呢?还是个向量呢?如果是向量,方向是指向哪儿的呢? 从第二个问题我们能看出一些端倪,这并不是一个很简单的问题。 阅读全文
posted @ 2023-03-09 17:04 imxiangzi 阅读(140) 评论(0) 推荐(0) 编辑
摘要:假设有两个向量a=(x,y,z)、b=(i,j,k),它们之间的夹角为 θ 1、加法 数学运算:a+b=(x+i, y+j,z+k)例如 a=(1,2,4) b=(3,5,6),那么a+b=(1+3, 2+5,4+6) = (4, 7,10)向量加法符合“三角形法则”和“平行四边形法则”,其中“平行 阅读全文
posted @ 2023-03-09 17:02 imxiangzi 阅读(724) 评论(0) 推荐(0) 编辑
摘要:减法:等于各分量相减 公式:[x1,y1,z1]-[x2,y2,z2]=[x1-x2,y1-y2,z1-z2] 几何意义:向量a,向量b相减,理解为以b的终点为始点,以a的终点为终点的向量,方向由b指向a (指向被减数) 在Unity中 两个向量相减 后的向量的起始坐标和a,b的起点相同(如下图) 阅读全文
posted @ 2023-03-09 17:00 imxiangzi 阅读(752) 评论(0) 推荐(0) 编辑
摘要:加法:等于各分量相加 公式:[x1,y1,z1]+[x2,y2,z2]=[x1+x2,y1+y2,z1+z2] 几何意义:向量a,向量b相加,平移使b的终点与a的始点重合,结果为以a的始点为始点,以b的终点为终点的向量 应用:物体的移动 代码实现: void Demo04() { Vector3 d 阅读全文
posted @ 2023-03-09 16:57 imxiangzi 阅读(289) 评论(0) 推荐(0) 编辑
摘要:2.改变空间位置:矩阵乘以向量的本质 https://www.zhihu.com/question/28623194 https://zhuanlan.zhihu.com/p/32133330?utm_source=wechat_session https://www.zhihu.com/quest 阅读全文
posted @ 2023-03-09 16:54 imxiangzi 阅读(67) 评论(0) 推荐(0) 编辑
摘要:C++ Puzzles★1.有如下代码,问:ptr指向了谁?能通过ptr调用Derived类重写的函数吗(即多态还起作用吗)?dynamic_cast到底是什么作用?ptr2与ptr性质是一样的吗? Derived* derived = new Derived();Base *ptr = dynam 阅读全文
posted @ 2023-03-08 13:23 imxiangzi 阅读(193) 评论(0) 推荐(0) 编辑
摘要:这是GLSL shader学习系列的第二篇文章,本文中我们将会学习如何使用shader绘制一个圆形。 引子上一篇文章的内容比较简单易懂,由于gl_FragCoord能够表示每个像素点在画布中的坐标,因此很容易就能通过归一化得到连续渐变的效果。那么,如何使用着色器画出用明显边界感的圆形呢?这里需要使用 阅读全文
posted @ 2023-03-08 11:45 imxiangzi 阅读(187) 评论(0) 推荐(0) 编辑
摘要:这是GLSL shader系列第一篇文章,本文学习目标: 安装编辑工具编写hello world程序安装插件我使用VSCode编写shader代码,在VSCode上有两个好用的插件需要先装一下: Shader languages support for VS Code glsl-canvas:主要用 阅读全文
posted @ 2023-03-08 11:19 imxiangzi 阅读(204) 评论(0) 推荐(0) 编辑
摘要:什么是Shader Language Shader Language的发展方向是设计出在便携性方面可以和C++、Java等相比的高级语言,“赋予程序员灵活而方便的编程方式”,并“尽可能的控制渲染过程”同时“利用图形硬件的并行性,提高算法效率”。 Shader Language目前主要有3种语言: 基 阅读全文
posted @ 2023-03-08 10:48 imxiangzi 阅读(404) 评论(0) 推荐(0) 编辑
摘要:一、OpenGL ES简介 在上一章中,我们介绍了OpenGL,知道了它是用于计算机图形绘制的编程接口标准,支持不同平台上的图形绘制,在计算机上发挥了重要作用。 后来,随着手机等移动设备性能的快速提高,人们已经不满足于将移动设备的应用止于通讯应用、记事等传统平面应用。而越来越注重移动设备功能的多样化 阅读全文
posted @ 2023-03-08 10:43 imxiangzi 阅读(499) 评论(0) 推荐(0) 编辑
摘要:Detailed DescriptionQOpenGLWidget类是用于渲染OpenGL图形。 除了可以选择使用QPainter和标准的OpenGL渲染图形,QOpenGLWidget类提供了在Qt应用程序中显示OpenGL图形的功能。它使用起来非常简单:新建类继承于QOpenGLWidget,使 阅读全文
posted @ 2023-03-08 09:20 imxiangzi 阅读(249) 评论(0) 推荐(0) 编辑
摘要:旧版本的Qt中,模块OpenGL提供了QGL开头类,不提倡使用,只是为了兼容低版本的Qt。新版本的Qt中,有两种方式:1、Qt的GUI模块中的QOpenGL开头的类。2、Qt的Widget模块中的QOpenGLWidget类。 阅读全文
posted @ 2023-03-08 09:20 imxiangzi 阅读(175) 评论(0) 推荐(0) 编辑
摘要:Qt从5.2版开始提供了两个类QCommandLineOption和QCommandLineParser来解析应用的命令行参数。 一、命令行写法命令行:"-abc" 在QCommandLineParser的解析模式为ParseAsCompactedShortOptions(默认)时会被认为是3个参数 阅读全文
posted @ 2023-03-08 07:56 imxiangzi 阅读(466) 评论(0) 推荐(0) 编辑
摘要:作为一个程序员,我们经常会使用UML来绘制各种图,类图就是其中常用之一。对于初学者来讲,如何读懂类图可能是一件有些困惑的事情,这里通过逐步梳理,帮助你详细了解类的关系,以及以后如何绘制类图。 1.0 定义 类图是面向对象系统建模中最常用和最重要的图,是定义其它图的基础。类图主要是用来显示系统中的类、 阅读全文
posted @ 2023-03-06 17:09 imxiangzi 阅读(984) 评论(0) 推荐(0) 编辑
摘要:目录类图关系概述1、泛化关系2、实现关系3、依赖关系4、关联关系4.1、一对一的关系4.2、单向一对多关系4.3、单向多对一关系4.4、双向一对多、多对一关系4.5、单向多对多关系5、聚合关系6、组合关系MySQL笔记: B站宋红康最新教程 (持续更新中) UML 类图浅谈UML中常用的几种图 UM 阅读全文
posted @ 2023-03-06 17:08 imxiangzi 阅读(333) 评论(0) 推荐(0) 编辑
摘要:关联的概念 关联用来表示两个或多个类的对象之间的结构关系,它在代码中表现为一个类以属性的形式包含对另一个类的一个或多个对象的应用。 程序演示:关联关系(code/assocation) 假设:一个公司只有三名员工:一个员工要么没有工作,要么只能在一个公司工作。(代码简化了,主要说明关联关系) Per 阅读全文
posted @ 2023-03-06 17:05 imxiangzi 阅读(177) 评论(0) 推荐(0) 编辑
摘要:区分 UML 类图中的几种关系 UML 类图中的 ”关联关系(association) “、”聚合关系(aggregation) “、”合成关系 (compostion)“ 和”依赖关系 (dependency)“ 不是很容易区分清楚,《UML distilled》 对这几个关系也没有解释的特别清楚 阅读全文
posted @ 2023-03-06 16:57 imxiangzi 阅读(58) 评论(0) 推荐(0) 编辑
摘要:车的类图结构为<>,表示车是一个抽象类; 它有两个继承类:小汽车和自行车;它们之间的关系为实现关系,使用带空心箭头的虚线表示; 小汽车为与SUV之间也是继承关系,它们之间的关系为泛化关系,使用带空心箭头的实线表示; 小汽车与发动机之间是组合关系,使用带实心箭头的实线表示; 学生与班级之间是聚合关系, 阅读全文
posted @ 2023-03-06 12:31 imxiangzi 阅读(35) 评论(0) 推荐(0) 编辑
摘要:webpack安装后需要安装webpack cli: npm install -d webpack-cli1运行后报错: Error: Cannot find module 'webpack-cli/package.json'1解决方案: 全局安装webpack-cli npm i -g webpa 阅读全文
posted @ 2023-03-03 11:57 imxiangzi 阅读(293) 评论(0) 推荐(0) 编辑
摘要:作者:小猪努力学前端 https://juejin.cn/post/7055101823442485255 前言 今时不同往日,能叫我们切图仔的只能是我们自己! 在JavasScrip框架满天飞的年代,前端三板斧之一的CSS也前前后后涌出Sass、Less 、Stylus等多款CSS预处理框架。 今 阅读全文
posted @ 2023-03-03 11:52 imxiangzi 阅读(841) 评论(0) 推荐(0) 编辑
摘要:本文提供了LESS安装的步骤过程。 LESS的系统要求 操作系统:跨平台 浏览器支持: IE(Internet Explorer 8+),Firefox,Google Chrome,Safari。 安装LESS 步骤(1):我们需要NodeJ运行LESS示例。 要下载NodeJ,请打开链接 http 阅读全文
posted @ 2023-03-02 20:40 imxiangzi 阅读(47) 评论(0) 推荐(0) 编辑
摘要:Less CSS 是一个使用广泛的 CSS 预处理器,通过简单的语法和变量对 CSS 进行扩展,可减少很多 CSS 的代码量。 LESS 将 CSS 赋予了动态语言的特性,如 变量、 继承、运算、函数等,LESS 既可以在客户端上运行,支持IE 6+、Webkit、Firefox,也可一在服务端运行 阅读全文
posted @ 2023-03-02 20:39 imxiangzi 阅读(156) 评论(0) 推荐(0) 编辑
摘要:1.考拉软件编译http://koala-app.com/index-zh.html 要引入编译后的css文件 考拉会在后台监听2.js在线编译 <link rel="stylesheet/less" type="text/css" href="css/less01.less" /> <script 阅读全文
posted @ 2023-03-02 20:33 imxiangzi 阅读(163) 评论(0) 推荐(0) 编辑
摘要:系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 创建空项目 使用Less 使用TypeScript 使用WebPack 开始写项目 总结一下 上篇文章我们讲了VsCode的使用以及Node与Npm的使用,并简单的创建了一个Express的简单前端框架项目。那这篇文章我们进阶的使用Le 阅读全文
posted @ 2023-03-02 16:10 imxiangzi 阅读(208) 评论(0) 推荐(0) 编辑
摘要:// 构建单件设计模式 // 第一步:把构造器设置为私有的,不允许外部来创建类的实例【对象】 // 第二步: 至少应该提供一个外部访问的方法或属性,外部可以通过这个方法或属性来得到一个对象 // 所以应该把这个方法设置为静态方法 // 第三步:外部调用第二步提供的静态方法来获取一个对象 export 阅读全文
posted @ 2023-03-01 20:31 imxiangzi 阅读(167) 评论(0) 推荐(0) 编辑
摘要:概述 目前使用TypeScript编写前端项目已成为趋势,所以搞一个运行在Chrome的demo 来方便练习一下TypeScript 相关语法。由于技术更新太快,会导致你在网上参考的例子可能已经过时,或者运行不起来。我的建议还是直接先去看官方文档,尝试这编写demo,实在搞不出来再去Google 查 阅读全文
posted @ 2023-03-01 20:29 imxiangzi 阅读(216) 评论(0) 推荐(0) 编辑
摘要:今天介绍如何用vscode开发typescript程序,开始前我们需要一点小小的配置: 下载vscode,这个就不用说了,下面直接给出链接地址: vscode下载 安装node.js. 安装typescript node包。 npm install -g typescript 创建tsconfig. 阅读全文
posted @ 2023-03-01 20:28 imxiangzi 阅读(233) 评论(0) 推荐(0) 编辑
摘要:中秋假期已经结束了,由于疫情原因阿宝哥在家里待了三天,期间精选了 20 道新的 TS 练习题,目前已经有 30 道题了。 很多小伙伴已提交了他们心目中的答案,撸过 TS 的小伙伴赶紧来练练手👇。 https://github.com/semlinker/awesome-typescript/iss 阅读全文
posted @ 2023-03-01 20:27 imxiangzi 阅读(206) 评论(0) 推荐(0) 编辑
摘要:1.map()方法前言关键词:map 项目中我们常常会遇到要对后端返回的数据进行修改,从而达到符合我们前端开发人员的需要,其中map是常用到的对数组元素进行修改的重要函数。 提示:以下是本篇文章正文内容,下面案例可供参考 一、概念map() 方法定义在JavaScript的Array中,它返回一个新 阅读全文
posted @ 2023-03-01 10:41 imxiangzi 阅读(343) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示