jeneen1129
jeneen1129

svg 学习 - 基础知识

参考：
w3school => svg-v1.1
svg-mdn
菜鸟教程
参考手册
百度文库-svg基础

其他网站：
与其他文件类型进行转换：链接
显示 svg 工具：链接 | 链接

what

SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics),即放大或者缩小不失真，使用 XML 格式定义图形。
包含形状、样式、标记、滤镜、渐变等。
预定义了七种形状元素：矩形(rect)、圆形(circle)、椭圆(ellipse)、线段(line)、折线(polyline)、多边形(polygon)、路径(path)。

why

与其他图像格式相比，使用 SVG 的优势有以下几点：

  • SVG 可被非常多的工具读取和修改（比如记事本）
  • SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大
  • SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
  • SVG 可以与 Java 技术一起运行
  • SVG 是开放的标准
  • SVG 文件是纯粹的 XML
  • 相比 css 来讲，兼容性更好，早于 css3 实现一些特殊效果，功能强大

适用于 大型渲染区域，如百度地图，不适合游戏。用途：

  • 静态图形绘制
  • 动态动画效果
  • 专门事件绑定

how

入门实例

要点说明：

  1. 以 svg 标签包含，version 为 svg 的版本，xmlns 定义 svg 命名空间
  2. circle 标签创建一个圆，cx 和 cy 属性定义圆的中心坐标，默认是（0，0），r 为半径， fill 为填充颜色， stroke-width 为边框宽带

坐标定位

对于所有元素，SVG 使用的坐标系统或者说网格系统，和Canvas用的差不多（所有计算机绘图都差不多）。这种坐标系统是：以页面的左上角为 (0,0) 坐标点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。注意，这和你小时候所教的绘图方式是相反的。但是在 HTML 文档中，元素都是用这种方式定位的。


内置图形的 html 属性 或 css 样式

fill(填充颜色)
fill-opacity(填充透明度)

stroke(边框颜色)
stroke-width(边框宽度)
stroke-opacity(边框透明度)
stroke-dasharray(创建虚线)
stroke-linecap(路径的终结样式)

transform(变换)
filter(滤镜)(url[#滤镜id])

常见图形用法

1. 矩形(rect)

试一试

  • x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
  • y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
  • rx 和 ry 属性可使矩形产生圆角。

2. 圆形(circle
  • cx 属性定义的椭圆中心的x坐标
  • cy 属性定义的椭圆中心的y坐标

3. 椭圆(ellipse)
  • rx 属性定义的水平半径
  • ry 属性定义的垂直半径

4. 线段(line)
  • x1 属性在 x 轴定义线条的开始
  • y1 属性在 y 轴定义线条的开始
  • x2 属性在 x 轴定义线条的结束
  • y2 属性在 y 轴定义线条的结束

5. 折线(polyline)

元素是用于创建任何只有直线的形状。

6. 多边形(polygon)

标签用来创建含有不少于三个边的图形。
多边形是由直线组成，其形状是"封闭"的（所有的线条 连接起来）。
  • points 属性定义多边形每个角的 x 和 y 坐标

7. 路径(path)
  • d 路径数据： 
    M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

    注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。


8. 文本(text)


  
    I love SVG
    
  


  
    
  
   
  
    I love SVG I love SVG

9. 和

所有互联网的SVG滤镜定义在元素中。元素定义短并含有特殊元素（如滤镜）定义。
标签用来定义SVG滤镜。
  • 定义可复用的部件
  • 定义统一的样式

10. 事件

常用的时间有 onclick \ onactivate \ onmousedown \ onmouseup \ onmouseover \ onmousemove \ onmouseout \ onload \ onresize \ onunload \ onrepeat

svg 嵌入 Html 中

svg 滤镜

新增参考连接：链接->点击 | 链接2

SVG可用的滤镜是（19个）：

feBlend - 与图像相结合的滤镜
feColorMatrix - 用于彩色滤光片转换
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting - 散射光照明
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - 过滤阴影
feSpecularLighting - 镜面照明
feTile
feTurbulence
feDistantLight - 用于照明过滤
fePointLight - 用于照明过滤
feSpotLight - 用于照明过滤

可以用滤镜实现想要的模糊、阴影等等效果（用来增加对SVG图形的特殊效果），类似 css 滤镜中blur()、contrast()、drop-shadow()， for example:
  • 元素id属性定义一个滤镜的唯一名称
  • in="SourceGraphic"这个部分定义了由整个图像创建效果
  • 元素的滤镜属性用来把元素链接到"f1"滤镜
  • result 用于 中间结果的输出(也称作 primitives 图元)，其他滤镜可以使用 in 属性导入 result
  • in2 用于接收某个 result 输出，在此效果上面进行过滤

多个滤镜合并使用

在不同的滤镜利用 result 和 in 属性，可以实现在前一个基本变换基础上建立另一个操作。其中可能涉及的标签可能有feComposite|feMerge|feFlood等。

  • feMerge 滤镜允许同时应用滤镜效果而不是按顺序应用滤镜效果。
  • 遵循 后输入 的层级更高的原则。

标签属性

基本每个滤镜标签都有的属性:

x,y - 坐标
width,height - 宽|高
result - 定义一个滤镜效果的输出名称，以便 in
in - 指定滤镜效果的输入源，可以是某个 result ，也可以是下面 6 个值：
    SourceGraphic - 图形元素本身作为 输入源
    SourceAlpha - 与 SourceGraphic，相比不同在于 只使用元素的非透明部分
    BackgroundImage 
    BackgroundAlpha
    FillPaint
    StrokePaint

混合模式

css 中，有混合模式 mix-blend-mode 和 background-blend-mode。
svg 中有 5 个 - normal(正常) | multiply(正片叠底) | screen(滤色) | darken(变暗) | lighten(变亮)

该滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值（[红，绿，蓝，透明度]的矢量）都经过矩阵乘法 (matrix multiplated) 计算出的新颜色。

// 包含两个私有属性
type:  saturate | hueRotate | luminanceToAlpha | matrix
values:  0.0 - 1.0 | 0.0 - 360 | 只有一个效果 | 4x5 的矩阵

saturate 和 hueRotate 与 css 中 filter 中的 saturate 和 hue-rotate 作用一模一样。

图形的表示：数字图形的本质是一个多维矩阵，把图像的R分量放进红色通道里，B分量放到蓝色通道里，G分量放到绿色通道里，经过处理，显示在屏幕上的是我们看到的彩色图像。

// 矩阵计算得到 rgba() 值
/*R G B A 1*/
1 0 0 0 0 = 1*R + 0*G + 0*B + A*0 + 0 //R
0 1 0 0 0 = 0*R + 1*G + 0*B + A*0 + 0 //G
0 0 1 0 0 = 0*R + 0*G + 1*B + A*0 + 0 //B
0 0 0 1 0 = 0*R + 0*G + 0*B + A*1 + 0 //A

两种光源及其他

光照滤镜

是 svg 区别于 css 的独特魅力。
feSpecularLighting（镜面照明） | feDiffuseLighting （散射光照明） 都为光照滤镜，使用它们照亮一个源图形。
feDiffuseLighting : 来自外部光源，适合模拟太阳光或者灯光照明
feSpecularLighting : 指定从反射面反射的二次光

形态滤镜

feMorphology ：形态滤镜，输入源是 图形的 alpha 通道，利用 operator 设置腐蚀（变薄 erode）或者扩张（加粗 dilate）, 默认 erode, radius 标识笔触的大小，该模式下的效果程度，默认 0 。

纹理滤镜

turbulence 为 湍流，不稳定气流，svg 能够实现半透明或者波状图像，利用 Perlin 噪声函数 可以实现 人造纹理。
feTurbulence : 可以创建纹理图作为置换图，不需要借助外部图形的纹理效果，即可创建复杂的效果。三个需要注意的属性：

type - fractalNoise (分形噪声更加平滑，更接近云雾)| turbulence (湍流噪声)
baseFrequency - 噪声函数的基本频率的参数，频率越小，产生的图形越大， 取值在 0.02 ~ 0.2 
numOctaves - 噪声函数的精细度，数值越高，噪声更详细，默认值为 1

示意两种噪声效果

映射置换滤镜

feDisplacementMap 为映射置换滤镜，需要掌握很多 PhotoShop 纹理创建或者是图形色彩相关的知识。使用该滤镜用于改变元素和图形的像素位置，将遍历原图的所有像素点，映射到新的位置，形成新图形。可以将纹理滤镜过后的图形进行形变、扭曲、液化等等，转化的一个公式-P（x + scale * (XC*(x,y) - 0.5, y + scale * (YC*(x,y) - 0.5) → P(x,y)。

svg 渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
SVG渐变主要有两种类型：

  • Linear(线性渐变)
  • Radial(放射渐变)

标签必须嵌套在的内部。
线性渐变可以定义为水平，垂直或角渐变：

  • 当y1和y2相等，而x1和x2不同时，可创建水平渐变
  • 当x1和x2相等，而y1和y2不同时，可创建垂直渐变
  • 当x1和x2不同，且y1和y2不同时，可创建角形渐变
  • 可以利用 class 或者 id 在 style 里面写 fill 或者 filter。url 是 css 滤镜属性的关键字之一，允许引入特定的 svg 过滤器，极大增强了 css 滤镜的能力。

好用的库

svg.js

  • 更加接近原生 svg 语法，可以直观的操作 svg。svg.js 更快，兼容性好，上手更方便。
  • 免费开源。轻量级，总共只有16kb。

Snap.svg

  • Snap.svg 更接近 jquery 的语法，其更全，功能丰富。
  • JavaScript库，可以跨任何类型的 svg 工作，包括从 Illustrator\InkScape 或者 HTML。

其他

Paper.js, 拉斐尔, Two.js, Velocity.js, Vivus.js

如果您都能看到这里了，对您有用的话，可以点个赞不@*@

你可能感兴趣的:(svg 学习 - 基础知识)

  • Linux命令学习笔记之 network NetworkManager kfepiza OS操作系统WindowsLinux等#LinuxCentOSUbuntu等linux学习centos
    networkNetworkManager前言CentOS7最小安装下的测试220511心得:启动network能打开网络,关闭network能关闭网络启动NetworkManager能打开网络,关闭不会关闭网络在两者都启动的情况下,单停network会断网,单停NetworkManager不会一些摘抄前言这两个东西在centOS7最小安装无勾选附加时就存在Ubuntu20.04中只有Networ
  • 【AI大模型智能应用】Deepseek生成测试用例 柳柳的博客 AI大模型测试用例
    在软件开发过程中，测试用例的设计和编写是确保软件质量的关键。然而，软件系统的复杂性不断增加，手动编写测试用例的工作量变得异常庞大，且容易出错。DeepSeek基于人工智能和机器学习，它能够依据软件的需求和设计文档，自动生成高质量的测试用例，显著减轻人工编写测试用例的负担。体验一把用DeepSeek编写测试用例，还生成清晰直观的思维导图，整个流程十分顺畅。这篇文章讲解如何使用deepseek生成功能
  • Linux 命令学习记录 hxung 面试学习使用linux学习运维
    Linux命令详解与进阶指南Linux是一种广泛使用的开源操作系统，掌握Linux命令是开发者和系统管理员的必备技能。本文将详细介绍Linux的常用命令，并涵盖一些高级进阶技巧，帮助你更高效地使用Linux。目录基础命令文件与目录操作文本处理系统信息权限管理进阶命令进程管理网络操作磁盘管理Shell脚本高级技巧管道与重定向正则表达式任务调度性能监控案例实战日志分析自动化部署服务器监控基础命令文件与
  • kmp报错→Cannot find skiko-windows-x64.dll.sha256 淡淡的id 其他kotlinKMP
    1、前言  学习kmp（KotlinMultiPlatform简称）过程中报了错误，这个报错在直接运行desktop的main方法才会出现，用gradle运行却不会报错，新建的kmp项目也不会出现，我学习的写了一些代码的项目才会出现。  运行main方法主要是需要运行main方法才能debug，gradle不能debug环境kmp版本：1.7.0gradle版本：8.13kotlin版本：2.1.
  • Python依赖管理工具分析 xdpcxq1029 python开发语言
    Python的依赖管理工具一直没有标准化，原因主要包括：历史发展的随意性：Python发展早期对于依赖管理的重视程度不足，缺乏从一开始就进行统一规划和设计的意识社区的分散性：Python社区庞大且分散，众多开发者和团队各自为政，根据自己的需求和偏好开发工具，缺乏统一的协调和整合机制多样化的使用场景：Python应用场景广泛，从Web开发到数据科学、机器学习、系统管理脚本等。不同场景对依赖管理有着不
  • 92.HarmonyOS NEXT开发学习路径与最佳实践总结：构建高质量应用 harmonyos-next
    温馨提示：本篇博客的详细代码已发布到git:https://gitcode.com/nutpi/HarmonyosNext可以下载运行哦！HarmonyOSNEXT开发学习路径与最佳实践总结：构建高质量应用1.学习路径指南1.1基础知识阶段阶段重点内容相关教程学习目标入门基础开发环境、基本语法01-03搭建环境，理解基础概念组件开发UI组件、生命周期04-06掌握组件开发和状态管理数据处理状态管理
  • 人工智能之数学基础:线性代数中矩阵的初印象 每天五分钟玩转人工智能 机器学习深度学习之数学基础线性代数人工智能矩阵机器学习深度学习
    本文重点从本篇文章开始，我们将开始学习矩阵的概念，矩阵，作为线性代数的核心概念之一，就像是一个个精心编织的网格，将复杂的数据和关系以一种简洁而直观的方式呈现出来。矩阵矩阵的初印象想象一下，你手里有一张空白的表格，上面布满了等待填充的格子。这些格子按照行和列整齐排列，形成了一个二维的平面结构。如果我们把数字、符号或者更复杂的元素填入这些格子中，那么这个表格就变成了一个“矩阵”。简单来说，矩阵就是一个
  • Go+Vue通用后台管理项目实战 - 带源码课件 6v6-博客网 6v6-博客 golangvue.js开发语言
    Go+Vue通用后台管理项目实战-带源码课件课程描述本课程从0到1搭建前后端项目，帮助学员掌握Go+Vue开发前后端分离项目的能力。通过实战项目，学员将学习到如何设计系统架构、实现核心功能模块，并最终完成一个完整的后台管理系统。课程亮点前后端分离：基于Go语言后端和Vue前端，实现高效开发模式。实战项目：通过完整项目实战，掌握从需求分析到部署上线的全流程。源码提供：附带完整源码，方便学员学习和二次
  • 【产品经理】设计一流产品九步法 程矢 Axure原型设计axure
    转载自：老二牛车教育»【产品经理】设计一流产品九步法百度高管舒迅（@舒迅）曾经带领百度贴吧创造出一年内用户注册量增长10倍、浏览量3倍增长的奇迹，作为一名在中国互联网摸爬滚打超过12年的老兵，在和百度内部同事的相互磨砺中，总结出了极其丰富而是用的产品设计经验。他在这篇文章中介绍的九条方法不仅值得每一个PM的认真学习，同样也值得每一个有志于打造出一流产品的互联网创业者和从业者的揣摩。本文描述的产品设
  • 《我的Python觉醒之路》之转型Python（十四）——控制流 Python破壁人手记 python开发语言网络
    以下是2025年3月份学习的核心内容，接下来我再练习一段例子，为后续做准备了！！**`第一章节的核心内容就是下面的了`**1.启动IDLE，打开的带有>>>提示符的界面便是Python的交互式解释器2.表达式（Expression）是Python中能产生一个值的代码片段，由**操作数**（如变量、常量）和运算符（如加减乘除、逻辑判断符）组合而成.3.表达式包含“值”（例如2）和“操作符”（例如+）
  • 编程思想:从图片类设计看程序结构,以及对图片类对象的展望 jllws1 C++编程思想数据类设计数据类设计C++编程思想
    前言不管是学习,还是创造,都得反复总结,得到解决某个或者某类问题的一般方法,那么下次遇到同样的问题就是信手拈来.图片类对象的抽象含义其实就一句话:怎样把一个数据静止放到一个场景中.把图片类对象的范围放宽,同样适用.数据对象可能是字符,一段音乐,一段话,按照前面的定义:计算机世界的一种客观存在,都可以被视作数据.当然字符,音乐或者一段话会被写入对应硬件中.程序结构以下是笔者理解的程序结构这里引入了几
  • AI技术学习笔记系列001：FastLanguageModel.get_peft_model 函数各参数的详细解释 新说一二 人工智能学习笔记
    以下是关于代码中FastLanguageModel.get_peft_model函数各参数的详细解释，以及企业实际微调时的选择考量：参数详解及对微调的影响1.r=32（秩）作用：控制LoRA适配器的低秩矩阵的维度（秩），直接影响可训练参数数量。影响：r越大：适配器表达能力更强，能捕捉更复杂的任务特征，但可能导致过拟合（尤其数据量少时），训练时间和显存占用增加。r越小：参数量少，训练更快，显存占用低
  • Python个人学习笔记（2）：编程入门知识与基础语法介绍 NEET_LH 樵夫老师Python零基础课程个人学习笔记python学习笔记
    一、注释（一）作用1.对代码进行解释和说明避免自己忘了写的代码是做什么的——写给人看的，机器不运行不要去注释你代码做了什么，而要去注释我的代码为什么要这么做。用于记录思路、实现方法、代码功能注释很重要，大厂很重视，尤其日企2.调试代码报错的一篇代码，从下到上一句一句加#，依次运行，如果某行代码加了#后，程序运行成功，那么就是这行有问题，但这个方法不好。（二）注释方法1.单行注释==句子前加#快捷键
  • JavaEE系统架构师学习路线(基础篇) 淘小五
    大纲：第1阶段(Java程序员)-Java语言基础第2阶段(Java初级软件工程师)-JSP、Servlet、HTML、CSS、JS、Bootstrap、XML、AJAX、MySQL、SQLServer、Oracle第3阶段(Java中级软件工程师)-Struts2、Spring、Hibernate、SpringMVC、Mybatis、Shiro、JVM第4阶段(Java高级软件工程师)-WebS
  • Java学习笔记1.1_初识 Java 火车爱上轨道 Java编程语言基础java学习
    初识Java前言一、Java概述1.什么是程序2.Java语言的产生和发展史3.Java可以做什么4.Java语言的特点二、Java语言环境搭建1.JDK、JRE、JVM关系2.安装JDK3.配置环境变量4.环境测试三、开发第一个Java程序1.开发Java程序的步骤2.用记事本开发Java程序四、Java程序的注释1.单行注释和多行注释2.文档注释五、Java程序的结构六、JavaAPI文档前言
  • YOLOv5+UI界面在车辆检测中的应用与实现 深度学习&目标检测实战项目 YOLOv5实战项目YOLOui分类数据挖掘目标跟踪人工智能
    1.引言随着智能交通系统（ITS）的快速发展，车辆检测已成为计算机视觉领域的重要研究方向。车辆检测技术广泛应用于交通流量监控、车辆违章抓拍、无人驾驶等场景中。近年来，深度学习技术的突破，特别是卷积神经网络（CNN）的崛起，使得目标检测技术取得了显著进展。其中，YOLO（YouOnlyLookOnce）系列模型以其高效的实时检测能力和出色的性能成为车辆检测领域的首选方法之一。在本文中，我们将基于YO
  • Python Turtle 海龟画图 官方文档 Leleprogrammer python开发语言后端turtle
    turtle---海龟绘图源码：Lib/turtle.py概述海龟绘图很适合用来引导孩子学习编程。最初来自于WallyFeurzeig,SeymourPapert和CynthiaSolomon于1967年所创造的Logo编程语言。请想象绘图区有一只机器海龟，起始位置在x-y平面的(0,0)点。先执行importturtle，再执行turtle.forward(15)，它将(在屏幕上)朝所面对的x轴
  • DeepSeek：技术教育领域的AI变革者——从理论到实践的全面解析 量子纠缠BUG DeepSeekDeepSeek部署AI人工智能python
    一、技术教育为何需要DeepSeek？在数字化转型的浪潮下，技术教育面临着知识更新快、实践门槛高、个性化需求强三大核心挑战。传统的教学模式难以满足开发者快速掌握前沿技术、构建复杂系统能力的需求。DeepSeek作为国产开源大模型的代表，凭借其推理能力、多模态支持与低成本部署的特性，正在为技术教育带来突破性解决方案。二、DeepSeek赋能技术教育的核心技术优势1.推理能力驱动深度学习思维链（CoT
  • 【人工智能基础2】机器学习、深度学习总结 roman_日积跬步-终至千里 人工智能习题人工智能机器学习深度学习
    文章目录一、人工智能关键技术二、机器学习基础1.监督、无监督、半监督学习2.损失函数：四种损失函数3.泛化与交叉验证4.过拟合与欠拟合5.正则化6.支持向量机三、深度学习基础1、概念与原理2、学习方式3、多层神经网络训练方法一、人工智能关键技术领域基础原理与逻辑机器学习机器学习基于数据，研究从观测数据出发寻找规律，利用这些规律对未来数据进行预测。基于学习模式，机器学习可以分为监督、无监督、强化学习
  • 一文搞懂 AI Agent 与 AI 大模型的区别 a小胡哦 人工智能ManusAiagent
    在人工智能蓬勃发展的当下，新术语和新技术层出不穷。AIAgent和AI大模型便是其中的“明星”，但不少人对它们的区别感到困惑。今天，我们就以Manus这类AIAgent为例，深入剖析AIAgent与一般AI大模型的不同之处。Manus：Manus定义与核心能力AI大模型AI大模型是基于深度学习架构，通过海量数据训练得到的复杂模型，像GPT-4、文心一言等。它们具备强大的知识储备和语言理解生成能力，
  • 基于python的家政预约管理系统源码+运行步骤 冷琴1996 Python系统设计python开发语言
    功能介绍平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。学习技术问题可以留言。整个平台包括前台和后台两个部分。前台功能包括：首页、详情页、用户中心、家政入驻模块。后台功能包括：总览、家政管理、分类管理、标签管理、评论管理、用户管理、运营管理、日志管理、系统信息模块。源码地址https://github.com/geeeeeeeek/python_ji
  • 基于python+django+vue.js开发的健身房管理系统源码+运行步骤 冷琴1996 Python系统设计pythondjangovue.js
    功能介绍平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。技术学习中的问题可以留言。功能包括：教练管理、会员管理、场地管理、设备管理、用户管理、日志管理、系统信息模块。源码地址https://github.com/geeeeeeeek/python_fitness演示地址http://fitness.gitapp.cn演示帐号：用户名：admin123
  • HarmonyOS第24天:鸿蒙应用安全秘籍：如何为用户数据筑牢防线？ 老三不说话、 HarmonyOS开发harmonyos华为
    开篇引入在数字化时代，我们的生活越来越依赖各种应用程序。从社交娱乐到移动支付，从健康管理到工作学习，应用已经渗透到生活的方方面面。然而，随着应用使用的日益频繁，用户隐私数据泄露的风险也在不断增加。前几年，某知名社交平台被曝光数百万用户数据泄露事件，用户的个人信息、聊天记录等敏感数据被非法获取并在暗网上出售。这一事件引发了轩然大波，让人们深刻意识到应用安全与隐私保护的重要性。类似的案例还有很多，如某
  • MVC框架详解 大王算法 软件架构设计指南mvc
    目录一、背景二、MVC框架简介2.1、模型（Model）2.2、视图（View）2.3、控制器（Controller）三、Qt的MVC框架设计3.1、Qt中的模型（Model）3.2、Qt中的视图（View）3.3、Qt中的控制器（Controller）四、MVC架构的优缺点1、MVC的优点(1).分离关注点：(2).促进模块化：(3).代码重用：2、MVC的缺点(1).学习曲线(2).代码复杂性
  • 清华大学《DeepSeek赋能家庭教育》深度解析：AI如何重塑现代家庭教育模式 硅基打工人 AI人工智能经验分享大数据开源语言模型
    引言：家庭教育的困境与AI的破局在数字化与智能化浪潮下，家庭教育面临多重挑战：家长教育能力不足、教育资源分配不均、亲子沟通效率低下、个性化需求难以满足等。清华大学发布的《DeepSeek赋能家庭教育》系列报告（共56页）提出了一种基于人工智能的解决方案，通过深度学习平台DeepSeek，为家庭教育注入科技动能。本文将从技术原理、核心功能、应用场景、伦理安全及未来展望等多维度展开分析。一、DeepS
  • 【CodeMirror】系列（一）官网文档学习（一）系统指南 一棵开花的树，枝芽无限靠近你 CodeMirror学习CodeMirror前端编辑器
    这个系列来学习一下CodeMirror编辑器。这篇文章主要是记录一下官方文档的学习，先把官方文档大致浏览一遍。CodeMirror是一个Web端的代码编辑器，和前面学习的MonacoEditor一样。应该比MonacoEditor轻便一些，而且有Vue版本，对Vue用户友好。另外可以将代码显示成DOM元素，对于代码和DOM元素的转换这块比较简单，在MonacoEditor中就没有这么方便，Mona
  • IMX6ULL学习整理篇——UBoot的一些基础知识（1.编译流程） charlie114514191 从0开始的学习ARMv7aIMX6ULL芯片学习UBoot嵌入式软件编译
    前言笔者整理了最近刷IMX6ULL的一些学习笔记，这里打算稍微整理一下东西发上来作为作为一个补充正文大部分而言，当我们拿到源码的时候，一般都是——先使用make来生成一份针对我们目标开发板的配置。举个例子，正点原子针对他们的开发板（EMMC作为类似于我们电脑的硬盘，DDR类似我们电脑的内存），使用的就是他们自己配置的mx6ull_14x14_ddr512_emmc_defconfig文件。也就是说
  • Python常用10个模块详解：提升开发效率的利器 Python_trys pythonmicrosoft数据库开发语言Python入门Python基础Python教程
    包含编程籽料、学习路线图、爬虫代码、安装包等！【点击领取！】Python作为一门功能强大且易于学习的编程语言，拥有丰富的标准库和第三方模块，能够帮助开发者快速实现各种功能。本文将详细介绍Python中常用的10个模块，帮助你在开发中更高效地完成任务。1.os模块：操作系统交互os模块提供了与操作系统交互的功能，包括文件操作、目录管理、环境变量等。常用功能：文件与目录操作：importos#获取当前
  • Python模块详解：定义、操作方法与高级特性 编程咕咕gu- python数据库开发语言学习路线数据分析
    如果你正在学习Python，那么你需要的话可以点击这里Python重磅福利：入门&进阶全套学习资料、电子书、软件包、项目源码等等免费分享！在Python中，模块是一个包含Python定义和语句的文件。模块可以定义函数、类和变量。模块也可以包含可执行的代码。你可以通过import语句将一个模块中的函数、类等导入到当前的程序中，以便能够重复使用代码，提高代码的可维护性。模块定义一个Python文件（.
  • STL学习笔记 2301_76962440 c++学习笔记
    包含数据结构和数学函数#includeusingnamespacestd;boolcmp(paira,pairb){//第二位从小到大if(a.second!=b.second)returna.secondb.first;}intgcd(inta,intb){if(!b)returna;elsereturngcd(b,a%b);}intlcm(inta,intb){returna/gcd(a,b)
  • 基本数据类型和引用类型的初始值 3213213333332132 java基础
    package com.array; /** * @Description 测试初始值 * @author FuJianyong * 2015-1-22上午10:31:53 */ public class ArrayTest { ArrayTest at; String str; byte bt; short s; int i; long
  • 摘抄笔记--《编写高质量代码：改善Java程序的151个建议》 白糖_ 高质量代码
            记得3年前刚到公司，同桌同事见我无事可做就借我看《编写高质量代码：改善Java程序的151个建议》这本书，当时看了几页没上心就没研究了。到上个月在公司偶然看到，于是乎又找来看看，我的天，真是非常多的干货，对于我这种静不下心的人真是帮助莫大呀。           看完整本书，也记了不少笔记
  • 【备忘】Django 常用命令及最佳实践 dongwei_6688 django
    注意：本文基于 Django 1.8.2 版本   生成数据库迁移脚本（python 脚本） python manage.py makemigrations polls  说明：polls 是你的应用名字，运行该命令时需要根据你的应用名字进行调整   查看该次迁移需要执行的 SQL 语句（只查看语句，并不应用到数据库上）： python manage.p
  • 阶乘算法之一N! 末尾有多少个零 周凡杨 java算法阶乘面试效率
                                     &n
  • spring注入servlet g21121 Spring注入
    传统的配置方法是无法将bean或属性直接注入到servlet中的，配置代理servlet亦比较麻烦，这里其实有比较简单的方法，其实就是在servlet的init()方法中加入要注入的内容： ServletContext application = getServletContext(); WebApplicationContext wac = WebApplicationContextUtil
  • Jenkins 命令行操作说明文档 510888780 centos
    假设Jenkins的URL为http://22.11.140.38:9080/jenkins/ 基本的格式为 java 基本的格式为 java -jar jenkins-cli.jar [-s JENKINS_URL] command [options][args] 下面具体介绍各个命令的作用及基本使用方法 1. &nb
  • UnicodeBlock检测中文用法 布衣凌宇 UnicodeBlock
    /**  * 判断输入的是汉字  */ public static boolean isChinese(char c) {        Character.UnicodeBlock ub = Character.UnicodeBlock.of(c);    
  • java下实现调用oracle的存储过程和函数 aijuans javaorale
    1.创建表：STOCK_PRICES     2.插入测试数据：     3.建立一个返回游标：  PKG_PUB_UTILS   4.创建和存储过程：P_GET_PRICE     5.创建函数：   6.JAVA调用存储过程返回结果集 JDBCoracle10G_INVO
  • Velocity Toolbox antlove 模板toolboxvelocity
    velocity.VelocityUtil package velocity; import org.apache.velocity.Template; import org.apache.velocity.app.Velocity; import org.apache.velocity.app.VelocityEngine; import org.apache.velocity.c
  • JAVA正则表达式匹配基础 百合不是茶 java正则表达式的匹配
      正则表达式;提高程序的性能,简化代码,提高代码的可读性,简化对字符串的操作   正则表达式的用途; 字符串的匹配 字符串的分割 字符串的查找 字符串的替换       正则表达式的验证语法     [a] //[]表示这个字符只出现一次 ,[a] 表示a只出现一
  • 是否使用EL表达式的配置 bijian1013 jspweb.xmlELEasyTemplate
            今天在开发过程中发现一个细节问题，由于前端采用EasyTemplate模板方法实现数据展示，但老是不能正常显示出来。后来发现竟是EL将我的EasyTemplate的${...}解释执行了，导致我的模板不能正常展示后台数据。         网
  • 精通Oracle10编程SQL(1-3)PLSQL基础 bijian1013 oracle数据库plsql
    --只包含执行部分的PL/SQL块 --set serveroutput off begin dbms_output.put_line('Hello,everyone!'); end; select * from emp; --包含定义部分和执行部分的PL/SQL块 declare v_ename varchar2(5); begin select
  • 【Nginx三】Nginx作为反向代理服务器 bit1129 nginx
    Nginx一个常用的功能是作为代理服务器。代理服务器通常完成如下的功能：   接受客户端请求 将请求转发给被代理的服务器 从被代理的服务器获得响应结果 把响应结果返回给客户端 实例 本文把Nginx配置成一个简单的代理服务器 对于静态的html和图片，直接从Nginx获取 对于动态的页面，例如JSP或者Servlet，Nginx则将请求转发给Res
  • Plugin execution not covered by lifecycle configuration: org.apache.maven.plugin blackproof maven报错
    转：http://stackoverflow.com/questions/6352208/how-to-solve-plugin-execution-not-covered-by-lifecycle-configuration-for-sprin   maven报错： Plugin execution not covered by lifecycle configuration:
  • 发布docker程序到marathon ronin47 docker 发布应用
    1 发布docker程序到marathon 1.1 搭建私有docker registry 1.1.1 安装docker regisry docker pull docker-registry docker run -t -p 5000:5000 docker-registry 下载docker镜像并发布到私有registry docker pull consol/tomcat-8.0
  • java-57-用两个栈实现队列&&用两个队列实现一个栈 bylijinnan java
    import java.util.ArrayList; import java.util.List; import java.util.Stack; /* * Q 57 用两个栈实现队列 */ public class QueueImplementByTwoStacks { private Stack<Integer> stack1; pr
  • Nginx配置性能优化 cfyme nginx
    转载地址：http://blog.csdn.net/xifeijian/article/details/20956605   大多数的Nginx安装指南告诉你如下基础知识——通过apt-get安装，修改这里或那里的几行配置，好了，你已经有了一个Web服务器了。而且，在大多数情况下，一个常规安装的nginx对你的网站来说已经能很好地工作了。然而，如果你真的想挤压出Nginx的性能，你必
  • [JAVA图形图像]JAVA体系需要稳扎稳打,逐步推进图像图形处理技术 comsci java
         对图形图像进行精确处理，需要大量的数学工具，即使是从底层硬件模拟层开始设计，也离不开大量的数学工具包，因为我认为，JAVA语言体系在图形图像处理模块上面的研发工作，需要从开发一些基础的，类似实时数学函数构造器和解析器的软件包入手，而不是急于利用第三方代码工具来实现一个不严格的图形图像处理软件......   &nb
  • MonkeyRunner的使用 dai_lm androidMonkeyRunner
    要使用MonkeyRunner，就要学习使用Python，哎 先抄一段官方doc里的代码 作用是启动一个程序（应该是启动程序默认的Activity），然后按MENU键，并截屏 # Imports the monkeyrunner modules used by this program from com.android.monkeyrunner import MonkeyRun
  • Hadoop-- 海量文件的分布式计算处理方案 datamachine mapreducehadoop分布式计算
    csdn的一个关于hadoop的分布式处理方案，存档。 原帖：http://blog.csdn.net/calvinxiu/article/details/1506112。     Hadoop 是Google MapReduce的一个Java实现。MapReduce是一种简化的分布式编程模式，让程序自动分布到一个由普通机器组成的超大集群上并发执行。就如同ja
  • 以資料庫驗證登入 dcj3sjt126com yii
    以資料庫驗證登入 由於 Yii 內定的原始框架程式, 採用綁定在UserIdentity.php 的 demo 與 admin 帳號密碼:    public function authenticate()    {        $users=array( &nbs
  • github做webhooks：[2]php版本自动触发更新 dcj3sjt126com githubgitwebhooks
    上次已经说过了如何在github控制面板做查看url的返回信息了。这次就到了直接贴钩子代码的时候了。 工具/原料 git github 方法/步骤   在github的setting里面的webhooks里把我们的url地址填进去。   钩子更新的代码如下： error_reportin
  • Eos开发常用表达式 蕃薯耀 Eos开发Eos入门Eos开发常用表达式
    Eos开发常用表达式 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2014年8月18日 15:03:35 星期一     &
  • SpringSecurity3.X--SpEL 表达式 hanqunfeng SpringSecurity
    使用 Spring 表达式语言配置访问控制，要实现这一功能的直接方式是在<http>配置元素上添加 use-expressions 属性：   <http auto-config="true" use-expressions="true"> 这样就会在投票器中自动增加一个投票器：org.springframework
  • Redis vs Memcache IXHONG redis
    1. Redis中，并不是所有的数据都一直存储在内存中的，这是和Memcached相比一个最大的区别。 2. Redis不仅仅支持简单的k/v类型的数据，同时还提供list，set，hash等数据结构的存储。 3. Redis支持数据的备份，即master-slave模式的数据备份。 4. Redis支持数据的持久化，可以将内存中的数据保持在磁盘中，重启的时候可以再次加载进行使用。 Red
  • Python - 装饰器使用过程中的误区解读 kvhur JavaScriptjqueryhtml5css
    大家都知道装饰器是一个很著名的设计模式，经常被用于AOP(面向切面编程)的场景，较为经典的有插入日志，性能测试，事务处理，Web权限校验， Cache等。 原文链接：http://www.gbtags.com/gb/share/5563.htm Python语言本身提供了装饰器语法（@），典型的装饰器实现如下：   @function_wrapper de
  • 架构师之mybatis-----update 带case when 针对多种情况更新 nannan408 case when
    1.前言.    如题. 2. 代码.   <update id="batchUpdate" parameterType="java.util.List"> <foreach collection="list" item="list" index=&
  • Algorithm算法视频教程 栏目记者 Algorithm算法
    课程：Algorithm算法视频教程 百度网盘下载地址： http://pan.baidu.com/s/1qWFjjQW 密码: 2mji 程序写的好不好,还得看算法屌不屌！Algorithm算法博大精深。 一、课程内容： 课时1、算法的基本概念 + Sequential search 课时2、Binary search 课时3、Hash table 课时4、Algor
  • C语言算法之冒泡排序 qiufeihu c算法
    任意输入10个数字由小到大进行排序。 代码： #include <stdio.h> int main() { int i,j,t,a[11]; /*定义变量及数组为基本类型*/ for(i = 1;i < 11;i++){ scanf("%d",&a[i]); /*从键盘中输入10个数*/ } for
  • JSP异常处理 wyzuomumu Webjsp
    1.在可能发生异常的网页中通过指令将HTTP请求转发给另一个专门处理异常的网页中: <%@ page errorPage="errors.jsp"%>   2.在处理异常的网页中做如下声明： errors.jsp: <%@ page isErrorPage="true"%>，这样设置完后就可以在网页中直接访问exc