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 学习 - 基础知识)

  • 推荐开源项目：Free Templates for AWS CloudFormation 褚知茉Jade
    推荐开源项目：FreeTemplatesforAWSCloudFormationaws-cf-templateswiddix/aws-cf-templates:是一个包含各种AWSCloudFormation模板的存储库。适合查找和学习AWSCloudFormation模板的示例，以及用于构建自己的基础设施。特点是包含了许多AWS服务和功能的模板示例，可以快速地了解如何使用CloudFormati
  • 探索AWS CloudFormation样本模板：构建云环境的新起点 劳泉文Luna
    探索AWSCloudFormation样本模板：构建云环境的新起点aws-cloudformation-templatesawslabs/aws-cloudformation-templates:是一个包含各种AWSCloudFormation模板的存储库。适合查找和学习AWSCloudFormation模板的示例，以及用于构建自己的基础设施。特点是包含了许多AWS服务和功能的模板示例，可以快速地
  • 批量安装 Python 库的脚本：提高python学习效率的第一步（附源码） TAGRENLA Interestingpythonprojectpython学习开发语言
    批量安装Python库批量安装Python库的脚本：提高数据分析效率的一步（附源码）批量安装脚本前提条件使用pip：Python包管理工具批量安装脚本查看当前python解释器中安装的所有的库批量安装Python库的脚本：提高数据分析效率的一步（附源码）在现代数据分析领域，Python已成为一个不可或缺的工具。为了进行数据处理、分析、可视化和建模等任务，Python社区涌现出了众多强大的库和工具。
  • K8S学习之基础二十八：k8s中的configMap 云上艺旅 K8S学习kubernetes学习容器云原生
    k8s中的configMapconfigMap是k8s的资源对象，简称cm，用于保存非机密性的配置，数据可以用key/value键值对形式保存，也可以通过文件形式保存在部署服务的时候，每个服务都有自己的配置文件，如果一台服务器上部署多个服务：nginx、tomcat、apache等，那么这些配置都存在这个节点上，假如一台服务器不能满足线上高并发的要求，需要对服务器扩容，扩容之后的服务器还是需要部署
  • kubernetes(K8S)学习（七）：K8S之系统核心组件 ꯭ 瞎꯭扯꯭蛋꯭ Kuberneteskubernetes学习容器
    K8S之系统核心组件K8s系统核心组件1.1Master和Node1.2kubeadm1.3先把核心组件总体过一遍1.4Kubernetes源码查看方式1.5kubectl1.6APIServer1.7集群安全机制之APIServer1.8Scheduler1.9kubelet1.10kube-proxyK8s系统核心组件1.1Master和Node官网：https://kubernetes.io
  • Python编码系列—Python代码重构：提升代码质量 学步_技术 Python编码python重构开发语言
    欢迎来到我的技术小筑，一个专为技术探索者打造的交流空间。在这里，我们不仅分享代码的智慧，还探讨技术的深度与广度。无论您是资深开发者还是技术新手，这里都有一片属于您的天空。让我们在知识的海洋中一起航行，共同成长，探索技术的无限可能。探索专栏：学步_技术的首页——持续学习，不断进步，让学习成为我们共同的习惯，让总结成为我们前进的动力。技术导航：人工智能：深入探讨人工智能领域核心技术。自动驾驶：分享自动
  • lua C语言api学习3 lua中调用C语言函数 刘阿去 lualuac语言学习
    本文介绍如何在lua中如何调用自定义C语言函数1C函数要求Lua可以调用C语言函数，但这并不意味着Lua可以调用所有的C函数。当Lua调用C函数时，这个C函数必须遵循某种规则来获取参数和返回结果。此外，当Lua调用C函数时，我们必须注册该函数，即必须以一种恰当的方式为Lua提供该C函数的地址。所有在lua中注册的函数必须遵循下面原型。typedefint(*lua_CFunction)(lua_S
  • Dubbo、SpringCloud框架学习 种豆走天下 dubbospringcloud学习
    学习Dubbo和SpringCloud框架是微服务架构的一个重要部分。这两个框架在分布式系统中起着重要的作用，分别是阿里巴巴和Spring团队开发的。下面我将为你提供一些基础知识和学习路线，帮助你更好地理解和掌握这两个框架。1.Dubbo框架学习1.1什么是DubboDubbo是阿里巴巴开源的一款高性能的微服务框架。它提供了RPC（远程过程调用）、服务注册与发现、负载均衡、容错、监控等功能。Dub
  • python 使用microsoft-Florence-2-base进行图片描述生成 哦里 哦里哦里给 AI大语言模型实战pythonmicrosoft开发语言
    目录一、Florence-2简介二、代码实践三、多语言模型一、Florence-2简介Florence-2是一个先进的视觉基础模型，采用基于提示（prompt）的方式，处理广泛的视觉和视觉-语言任务。Florence-2能够解析简单的文本提示，执行如图像描述、物体检测和分割等任务。该模型利用FLD-5B数据集，该数据集包含54亿个注释，涵盖1.26亿张图像，用于掌握多任务学习。模型的序列到序列架构
  • 从0到1构建AI深度学习视频分析系统--基于YOLO 目标检测的动作序列检查系统：（2）消息队列与消息中间件 shiter 人工智能系统解决方案与技术架构人工智能深度学习音视频
    文章大纲原始视频队列Python内存视频缓存优化方案（4GB以内）一、核心参数设计二、内存管理实现三、性能优化策略四、内存占用验证五、高级优化技巧六、部署建议检测结果队列YOLO检测结果队列技术方案一、技术选型矩阵二、核心实现代码三、性能优化策略四、可视化方案对比五、部署建议逻辑判定队列时间片图论时间序列大模型引入参考文献原始视频队列想要在单机内存中缓存1-5分钟的视频片段，python技术栈的话
  • LuaJIT 学习（4）—— FFI 语义 alenliu0621 LuaLuaLuaJIT
    文章目录CLanguageSupportCTypeConversionRulesConversionsfromCtypestoLuaobjects例子：访问结构体成员ConversionsfromLuaobjectstoCtypesConversionsbetweenCtypes例子：修改结构体成员ConversionsforvarargCfunctionargumentsInitializers
  • k8s系统学习路径 LCY133 kubernetes学习容器
    学习Kubernetes（K8s）需要循序渐进，结合理论知识和实践操作。以下是学习Kubernetes的推荐步骤：1.先决条件•掌握容器基础：先学习Docker，理解容器化概念（镜像、容器、仓库）、Dockerfile编写和容器生命周期管理。•熟悉Linux基础：了解Linux命令行操作、网络、文件系统等。•了解云计算概念：如虚拟化、负载均衡、服务发现、分布式系统等。2.Kubernetes核心概
  • 【esp32】VSCODE + esp-idf 使用记录 zscredstone vscodeide编辑器
    旨在进行学习使用过程中的问题记录。esp已经把vscode插件做的不错了，可以直接进行编译调试。使用的是esp32S3内置的usb/jtag主要参考：https://blog.csdn.net/weixin_50993868/article/details/136498570https://blog.csdn.net/weixin_43842462/article/details/12329584
  • 从零开始大模型开发与微调：PyCharm的下载与安装 AI天才研究院 AI大模型企业级应用开发实战AI大模型应用入门实战与进阶DeepSeekR1&大数据AI人工智能大模型计算科学神经计算深度学习神经网络大数据人工智能大型语言模型AIAGILLMJavaPython架构设计AgentRPA
    从零开始大模型开发与微调：PyCharm的下载与安装1.背景介绍随着人工智能和深度学习技术的不断发展,大型语言模型(LargeLanguageModels,LLMs)已经成为当前最引人注目的研究热点之一。LLMs能够在各种自然语言处理任务上展现出惊人的性能,例如机器翻译、文本生成、问答系统等。PyTorch和TensorFlow等深度学习框架为训练和微调大型语言模型提供了强大的支持。PyCharm
  • 系分 02 软件工程 一越王超 软考系统分析师软件工程
    软件工程本身涵盖内容很广，从系统规划到分析……到维护都属于软件工程，但是我们将会在其他章节讨论相关内容，本节我们主要内容如下：系统规划软件工程信息系统生命周期（★）软件开发模型（★★★★）逆向工程（★★）净室软件工程（★）需求工程系统设计系统测试与维护基础知识软件工程是指应用计算机科学、数学及管理科学等原理，以工程化的原则和方法来解决软件问题的工程，其目的是提高软件生产率、提高软件质量、减低软件成
  • Python第二十三课：自监督学习 | 无标注数据的觉醒 程之编 Python全栈通关秘籍python开发语言人工智能机器学习
    本节目标理解自监督学习的核心范式与优势掌握对比学习（ContrastiveLearning）框架实现图像掩码自编码器（MaskedAutoencoder）开发实战项目：亿级参数模型轻量化探索数据增强的创造性艺术一、自监督学习基础（AI的拼图游戏）1.核心思想解析学习范式数据需求生活比喻监督学习海量标注数据老师逐题批改作业无监督学习纯无标签数据自学杂乱笔记自监督学习自动生成伪标签玩拼图游戏（根据碎片
  • 【从零开始学习计算机科学】软件工程（三）需求工程 贫苦游商 学习软件工程需求分析软件需求需求文档软件开发敏捷编程
    【从零开始学习计算机科学】软件工程（三）需求工程需求工程好的需求应具备的特征：需求工程（RequirementEngineering,RE）起始导出需求讨论会头脑风暴调查问卷场景分析法实地考察原型法精化协商规格说明确认需求管理需求工程设计和开发一个计算机软件时，如果软件解决的问题不对，那么再精巧的软件也满足不了任何人的要求。理解问题的需求是软件工程师所面对的最困难的任务之一。困难的原因有二：客户不
  • 【从零开始学习计算机科学】软件工程（五）软件设计 贫苦游商 学习软件工程软件开发软件设计敏捷开发极限编程软件需求
    【从零开始学习计算机科学】软件工程（五）软件设计软件设计概述良好的设计具有三大特性设计主要包含的方面设计中的一些概念设计的方法与策略体系结构设计体系结构设计的基本问题：体系结构的设计模式体系结构设计的过程构建级设计面向对象构件设计用户接口设计用户接口设计原则：用户接口分析的目标：设计的评审软件设计概述软件的分析偏重于问题域，描述软件要做什么，而设计则偏重于解决方案，描述软件究竟要如何做。设计创建了
  • 简单工厂模式、工厂方法模式、抽象工厂模式 对比学习笔记 idgoodbye 简单工厂模式工厂方法模式抽象工厂模式
    工厂模式架构设计原则开闭原则：是指一个软件实体（如类、模块和函数）应该对扩展开放，对修改关闭。依赖倒置原则：是指设计代码结构时，高层模块不应该依赖低层模块，二者都应该依赖其抽象。抽象不应该依赖细节，细节应该依赖抽象。单一职责：是指一个类只负责一个主要任务，避免因一个类负责两个以上任务时，修改其中一个任务代码导致另一个任务代码受到连带影响。接口隔离原则：是指用多个专门的接口，而不使用单一的总接口，客
  • 【从零开始学习计算机科学】软件工程（一）软件工程中的过程模型 贫苦游商 学习软件工程过程模型瀑布模型敏捷开发极限编程V模型
    【从零开始学习计算机科学】软件工程（一）软件工程中的过程模型软件与软件工程软件工程具有以下核心要素软件工程中的过程模型惯用过程模型瀑布模型V模型增量过程模型演化过程模型原型模型螺旋模型协同开发模型喷泉模型专用过程模型构件组装模型统一过程模型（RUP）统一过程模型的起源与发展面向对象UMLRUP有9个工作流：敏捷模型敏捷开发的立场极限编程工业级极限编程（IXP）ScrumScrum中有三种角色：Sc
  • 【从零开始学习计算机科学】软件工程（二）软件工程方法学 贫苦游商 学习软件工程hadoop面向过程面向对象软件开发敏捷开发
    【从零开始学习计算机科学】软件工程（二）软件工程方法学软件工程方法学结构化/面向过程结构化编程结构化设计结构化分析结构化方法的常见问题面向对象软件工程方法学我们通常把在软件生命周期全过程中使用的一整套技术方法的集合称为方法学(methodology)，也称为范型(paradigm)。软件工程中有许多方法：结构化/面向过程对于结构化方法，其又被称为传统方法学，也称为生命周期方法学或结构化范型。它采用
  • 【从零开始学习计算机科学】设计模式（四）责任链模式、命令模式、解释器模式、迭代器模式、中介者模式、备忘录模式、观察者模式、状态模式、空对象模式、策略模式、模板模式、访问者模式 贫苦游商 学习设计模式责任链模式迭代器模式访问者模式命令模式解释器模式
    【从零开始学习计算机科学】设计模式（四）责任链模式、命令模式、解释器模式、迭代器模式、中介者模式、备忘录模式、观察者模式、状态模式、空对象模式、策略模式、模板模式、访问者模式责任链模式主要特点工作原理适用场景优点缺点命令模式主要特点工作原理适用场景优点缺点解释器模式主要特点工作原理：适用场景优点缺点迭代器模式主要特点工作原理适用场景优点缺点中介者模式主要特点工作原理适用场景优点缺点备忘录模式主要特
  • 【从零开始学习计算机科学】设计模式（五）MVC模式、业务代表模式、组合实体模式、数据访问对象模式、前端控制器模式、拦截过滤器模式、服务定位器模式、传输对象模式 贫苦游商 学习设计模式mvc业务代理模式组合实体模式数据访问对象模式传输对象模式
    【从零开始学习计算机科学】设计模式（五）MVC模式、业务代表模式、组合实体模式、数据访问对象模式、前端控制器模式、拦截过滤器模式、服务定位器模式、传输对象模式MVC模式主要组件工作原理优点缺点适用场景总结业务代表模式主要特点组成部分工作原理优点缺点适用场景总结组合实体模式主要特点组成部分工作原理适用场景优点缺点总结数据访问对象模式主要特点组成部分工作原理适用场景优点缺点总结前端控制器模式主要特点组
  • 【从零开始学习计算机科学】设计模式（一）设计模式概述 贫苦游商 学习设计模式软件工程软件开发软件设计行为模式建造者模式
    【从零开始学习计算机科学】设计模式（一）设计模式概述设计模式简介设计模式与软件架构设计模式的分类1.创建型模式（CreationalPatterns）2.结构型模式（StructuralPatterns）3.行为型模式（BehavioralPatterns）4.J2EE模式（J2EEPatterns）设计模式的实际应用设计模式简介设计模式在现代软件开发中扮演着至关重要的角色。它们是开发者在长期实践
  • 【从零开始学习计算机科学】设计模式（二）工厂模式、抽象工厂模式、单例模式、建造者模型、原型模式 贫苦游商 学习设计模式抽象工厂模式工厂模式单例模式原型模式建造者模式
    【从零开始学习计算机科学】设计模式（二）工厂模式、抽象工厂模式、单例模式、建造者模型、原型模式工厂模式主要特点类型适用场景抽象工厂模式主要特点工作原理适用场景举例优点缺点总结单例模式主要特点工作原理适用场景优点缺点总结建造者模式主要特点工作原理适用场景优点缺点总结原型模式主要特点工作原理适用场景优点缺点总结工厂模式工厂模式（FactoryPattern）是一种常用的创建型设计模式，目的是通过工厂方
  • 【从零开始学习计算机科学】数字逻辑（二）数字逻辑电路 贫苦游商 学习数字逻辑逻辑电路EDACAD集成电路电路设计
    【从零开始学习计算机科学】数字逻辑（二）数字逻辑电路数字逻辑电路数字逻辑电路的类型数字逻辑电路的研究方法电子设计自动化(EDA)数字逻辑电路用来处理数字信号的电子线路称为数字电路。由于数字电路的各种功能是通过逻辑运算和逻辑判断来实现的，所以数字电路又称为数字逻辑电路或者逻辑电路。数字逻辑电路具有如下特点：电路的基本工作信号是二值信号。它表现为电路中电压的“高”或“低”、开关的“接通”或“断开”、晶
  • 【从零开始学习计算机科学】数字逻辑（四）数字系统设计 贫苦游商 学习数字逻辑verilog数字系统HDL数字电路FPGA
    【从零开始学习计算机科学】数字逻辑（四）数字系统设计数字系统设计硬件描述语言HDL（HardwareDescriptionLanguage）VerilogHDL的起源与发展HDL软核、固核和硬核的重用HDL的应用数字系统设计实现数字系统设计一个数字集成电路的可以从不同的层次（系统级、算法级、寄存器传输级、门级、开关级）以及不同的领域（行为领域、结构领域、物理领域）进行描述。三个领域主要含义如下：行
  • 【从零开始学习计算机科学】硬件设计与FPGA原理 贫苦游商 【从零开始学习计算机】硬件设计fpga开发学习数字逻辑verilogHDL硬件设计硬件工程
    硬件设计硬件设计流程在设计硬件电路之前，首先要把大的框架和架构要搞清楚，这要求我们搞清楚要实现什么功能，然后找找有否能实现同样或相似功能的参考电路板（要懂得尽量利用他人的成果，越是有经验的工程师越会懂得借鉴他人的成果）。如果你找到了的参考设计，最好还是先看懂并理解，这一方面能提高我们的电路理解能力，而且能避免设计中的错误。在开始做硬件设计前，根据自己的项目需求，可以去找能够满足硬件功能设计的，有很
  • 新手村：数据预处理-异常值检测方法 嘉羽很烦 机器学习机器学习
    机器学习中异常值检测方法一、前置条件知识领域要求编程基础Python基础（变量、循环、函数）、JupyterNotebook或PyCharm使用。统计学基础理解均值、中位数、标准差、四分位数、正态分布、Z-score等概念。机器学习基础熟悉监督/无监督学习、分类、聚类、回归等基本概念。数据预处理数据清洗、特征缩放（标准化/归一化）、数据可视化（Matplotlib/Seaborn）。二、渐进式学习
  • 新手村：数据预处理-特征缩放 嘉羽很烦 机器学习线性回归算法机器学习
    新手村：数据预处理-特征缩放特征缩放（FeatureScaling）是数据预处理中的一个重要步骤，特别是在应用某些机器学习算法时。特征缩放可以使不同尺度的特征具有相同的量级，从而提高模型训练的效率和性能。常见的特征缩放方法包括标准化（Standardization）和归一化（Normalization）。常见的特征缩放方法标准化（Standardization）将特征转换为均值为0，标准差为1的标
  • 基本数据类型和引用类型的初始值 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