svg教程-初始svg

news2024/12/23 6:28:36

第一章 认识svg

简单来说：

  • 位图：放大会失真图像边缘有锯齿；是由像素点组成；前端的 Canvas 就是位图效果。
  • 矢量图：放大不会失真；使用 XML 描述图形。

我在 知乎 上找了一个图对说明一下。

左边是位图，右边是矢量图

image-20230505164906993

那么 SVG 是什么呢？它是矢量图的其中一种格式。它是用 XML 来描述图形的。

对于初学 SVG 的前端来说，可以简单的理解为 “SVG 是一套新标签”。

所以可以使用 CSS 来设置样式，也可以使用 JS 对 SVG 进行操作。

基本使用：

​ 可以在html中直接使用svg，< svg>< /svg>标签，不需要像canvas在js中操作。

<svg></svg> 
//在不给 <svg> 设置宽高时，它的默认宽度是 300px ，默认高度是 150px 。这点和 <canvas> 是一样的。

第二章 基础图形

矩形

image-20230505170227843

  • 画一个200宽，100高的矩形

  • svg的默认值

    • 填充色：默认黑色
    • svg大小：默认宽度300px,默认高度150px
    <svg style="border: solid 1px red">
    <rect width="200" height="100"></rect>
</svg>

调整矩形位置

image-20230505170513006

通过 x 和 y 可以设置矩形位置

<svg style="border: solid 1px red">
  <rect x="20" y="20" width="200" height="100"></rect>
</svg>

圆角矩形

image-20230505171042136

rx 是设置x轴的半径，ry 设置y轴的半径。

rx 的最大值是矩形宽度的一半，ry 的最大值是矩形高度的一半。

<svg style="border: solid 1px red">
  <rect x="20" y="20" rx="20" ry="40" width="200" height="100"></rect>
</svg>

如果rx，ry只设置其中一个，默认两个值相同

image-20230505171214763

<svg style="border: solid 1px red">
  <rect x="20" y="20" rx="20"  width="200" height="100"></rect>  
</svg>
此时rx，ry都为20

rect版本的圆形

image-20230505171600103

rx，ry有点像css中的圆角border-radius的属性一样，所以画出如下图片。

同样我们也可以通过设置值，变为椭圆形。但是svg中我不推荐。因为我们有专门的标签去实现。

<svg style="border: solid 1px red">
  <rect width="100" height="100" rx="50"></rect>
</svg>

圆形

圆形使用 <circle> 标签，基础属性有：

  • cx: 圆心在x轴的坐标
  • cy: 圆心在y轴的坐标
  • r: 半径
  • 注意cx，cy需要大于半径，否则显示不完全

image-20230505172232887

<svg style="border: solid 1px red">
  <circle cx="60" cy="60" r="50"></circle>
</svg>

椭圆

椭圆使用 <ellipse> 标签，基础属性有：

  • cx: 圆心在x轴的坐标
  • cy: 圆心在y轴的坐标
  • rx: x轴的半径
  • ry: y轴的半径

image-20230505172646611

<svg style="border: solid 1px red">
  <ellipse  cx="60" cy="60" rx="50" ry="30"></ellipse>
</svg>

直线

直线使用 <line> 标签，基础属性有：

  • x1: 起始点x坐标
  • y1: 起始点y坐标
  • x2: 结束点x坐标
  • y2: 结束点y坐标
  • stroke: 描边颜色

注意：只有 x1 和 x2 ，没有 x3 ，也没有 y3 。<line> 需要使用设置 stroke 属性才会有绘制效果。

image-20230506091315655

  <svg style="border: solid 1px red">
    <line x1="10" y1="10" x2="60" y2="60" stroke="red"></line>
  </svg>

折线

使用 <polyline> 可以绘制折线，基础属性有：

  • points: 点集
  • stroke: 描边颜色
  • fill: 填充颜色

如果是绘制折线，需要将fill设置为none，因为自带颜色是黑色填充色。fill=“none”

image-20230506091904310

points 接受的值是一串点集，点集是两两一组表示一个坐标。

其实点集完全不需要用逗号隔开，上面的例子中我使用了逗号隔开，完全是为了让自己阅读代码时比价易懂。一个逗号分隔一个 xy 坐标。

  <svg style="border: solid 1px red">
      <polyline points="10 10,60 60,10 90" stroke="red" fill="none"></polyline>
  </svg>

如果不将填充设置为空，就会出现以下效果

image-20230506092226848

  <svg  height="300" style="border: solid 1px red">
      <polyline points="10 10,60 60,10 90" stroke="red" ></polyline>
  </svg>

多边形

多边形使用 <polygon> 标签，基础属性和 <polyline> 差不多：

  • points: 点集
  • stroke: 描边颜色
  • fill: 填充颜色

<polygon> 会自动闭合（自动将起始点和结束点链接起来）

image-20230506092459720

  <svg  height="300" style="border: solid 1px red">
      <polygon points="10 10,60 60,10 90" stroke="red"></polygon>
  </svg>

path

其实在 SVG 里，所有基本图形都是 <path> 的简写。所有描述轮廓的数据都放在 d 属性里，d 是 data 的简写。

d 属性又包括以下主要的关键字（注意大小写！）：

  • M: 起始点坐标，moveto 的意思。每个路径都必须以 M 开始。M 传入 x 和 y 坐标，用逗号或者空格隔开。
  • L: 轮廓坐标，lineto 的意思。L 是跟在 M 后面的。它也是可以传入一个或多个坐标。大写的 L 是一个绝对位置。
  • l: 这是小写 L，和 L 的作用差不多，但 l 是一个相对位置。
  • H: 和上一个点的Y坐标相等，是 horizontal lineto 的意思。它是一个绝对位置。
  • h: 和 H 差不多，但 h 使用的是相对定位。
  • V: 和上一个点的X坐标相等，是vertical lineto 的意思。它是一个绝对位置。
  • v: 这是一个小写的 v ，和大写 V 的差不多，但小写 v 是一个相对定位。
  • Z: 关闭当前路径，closepath 的意思。它会绘制一条直线回到当前子路径的起点。

概念说了一堆，还是用写 demo 的方式来展示会更加直观。

image-20230506093436830

  <svg  height="300" style="border: solid 1px red">
      <path d="M 10 10 L 50 60 L 10 100" fill="none" stroke="red"></path>
  </svg>

使用 stroke 设置描边的颜色，使用 fill="none" 将填充色改成透明。最后就形成上图的效果。

简写

  <svg  height="300" style="border: solid 1px red">
      <path d="M 10 10  50 60  10 100" fill="none" stroke="red"></path>
  </svg>

上面的 d="M 10 10 50 40 100 10" 等同于 d="M 10 10 L 50 40 L 100 10" 。

闭合路径

在 d 的数据集里，使用 Z 可以闭合路径。

image-20230506094042055

  <svg  height="300" style="border: solid 1px red">
      <path d="M 10 10  50 60  10 100 z" fill="none" stroke="red"></path>
  </svg>

image-20230506094458518

上面的代码中，d="M 10 10 l 50 40 l 100 10 Z" 等同于 d="M 10 10 L 60 50 L 160 60 Z" 。

  <svg width="300" height="300" style="border: 1px solid red;">
    <path
        d="M 10 10 l 50 40 l 100 10 Z"
        stroke="blue"
        fill="none"
    >
    </path>
  </svg>

H 和 h

H 后面只需传入 X坐标 即可，它的 Y坐标 与前一个点相同。

image-20230506094927583

  <svg width="300" height="300" style="border: 1px solid red;">
    <path
        d="M 10 10 H 100"
        stroke="blue"
        fill="none"
    >
    </path>
  </svg>

而 h 和 H 的作用差不多，只不过传入的数据会和前一个点的 X坐标 相加，形成一个新的点，这就是相对位置。

image-20230506095044802

  <svg width="300" height="300" style="border: 1px solid red;">
    <path
        d="M 10 10 h 100"
        stroke="blue"
        fill="none"
    >
    </path>
  </svg>

V 和 v

V 后面只需传入 Y坐标 即可，它的 X坐标 与前一个点相同。

image-20230506095220423

  <svg width="300" height="300" style="border: 1px solid red;">
    <path
        d="M 10 10 V 100"
        stroke="blue"
        fill="none"
    >
    </path>
  </svg>

v 和 V 的作用差不多，小写 v 是一个相对位置。

  <svg width="300" height="300" style="border: 1px solid red;">
    <path
        d="M 10 10 v 100"
        stroke="blue"
        fill="none"
    >
    </path>
  </svg>

椭圆弧

前面讲到的 直线路径 path 是比较好理解的，它把所有点都用直线连接起来即可。只要确定2个点就可以画出一根线段。

但如果只用两个点，可以产生无数条曲线。所以需要添加更多的参数来确定如何绘制一条曲线。而在种种方法中，我认为 椭圆弧曲线 是最简单的。

椭圆弧曲线，顾名思义就是和椭圆有关的。如果在椭圆上选择两个点，就可以截取2条曲线。

image-20230506095848780

比如这样，红线处就将椭圆截取成2段弧线。

椭圆弧公式

在 SVG 中可以使用 path 配合 A属性 绘制椭圆弧。

A(rx, ry, xr, laf, sf, x, y)
复制代码
  • rx: 椭圆X轴半径
  • ry: 椭圆Y轴半径
  • xr: 椭圆旋转角度
  • laf: 是否选择弧长较长的那一段。0: 短边（小于180度）; 1: 长边（大于等于180度）
  • sf: 是否顺时针绘制。0: 逆时针; 1: 顺时针
  • x: 终点X轴坐标
  • y: 终点Y轴坐标

上面的公式中并没有开始点，开始点是由 M 决定的。

也就是说，确定2个点，再确定椭圆半径，就可画出2个椭圆

image-20230506095928738

通过开始点和结束点裁切，可以得到4条弧线，也就是说2个点可以确定2个相同旋转角度的椭圆的位置，可以切出4条弧线。

image-20230506100021922

  <svg width="400" height="400" style="border: 1px solid red;">
    <!-- 红 -->
    <path
        d="M 125 75 A 100 50 0 0 0 225 125"
        stroke="red"
        fill="none"
    />

    <!-- 黄 -->
    <path
        d="M 125 75 A 100 50 0 0 1 225 125"
        stroke="yellow"
        fill="none"
    />

    <!-- 蓝 -->
    <path
        d="M 125 75 A 100 50 0 1 0 225 125"
        stroke="blue"
        fill="none"
    />

    <!-- 绿 -->
    <path
        d="M 125 75 A 100 50 0 1 1 225 125"
        stroke="green"
        fill="none"
    />
  </svg>

第三章 设置样式的方法

设置 SVG 元素样式其实和 CSS 差不多，常见的方法有4种。

  • 属性样式
  • 内联样式
  • 内部样式
  • 外部样式

属性样式

直接在元素属性上设置样式，比如将矩形填充色改成粉红

image-20230506100217842

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="pink"
  />
</svg>
复制代码

内联样式

把所有样式写在 style 属性里

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    style="fill: pink;"
  />
</svg>
复制代码

内部样式

将样式写在 <style> 标签里

<style>
  .rect {
    fill: pink;
  }
</style>

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    class="rect"
  />
</svg>
复制代码

外部样式

将样式写在 .css 文件里，然后在页面中引入该 CSS 文件。

第四章 常用样式设置

SVG 设置样式的属性和 CSS 稍微有点不同，但初学时不需要了解太深入，我们只需将常用的学会即可。

比如填充色、描边颜色等。

说到颜色，SVG 和 CSS 支持的颜色值其实差不多的，比如：

  • 关键字: red、pink、blue 等
  • 十六进制: 支持3位或6位，#0f0、#00ff00
  • RGB 和 RGBA: 比如 rgb(10, 20, 30) 或 rgba(10, 20, 30, 0.4)
  • HSL 和 HSLA

接下来讲到的所有常规属性，除了在元素属性上设置之外，都支持在 CSS 中设置。

填充 fill

要填充图案颜色，可以设置 fill 属性。这个属性在前面的例子也使用过多次。

fill 默认是 #000000 ，也就是黑色。

image-20230506100752761

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="greenyellow"
  />
</svg>
复制代码

也可以使用 none 或者 transparent 将填充色设置成透明。

填充色的不透明度 fill-opacity

如果想让填充色有点 半透明 的感觉，可以设置 fill-opacity 属性，也可以在 fill 属性中使用 RGBA 或者 HSLA。

本例使用 fill-opacity 设置，它的取值是 0 - 1，0 代表完全透明，1 代表完全不透明。小于 0 的值会被改为 0，大于 1 的值会被改为 1 。

image-20230506100807335

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="red"
    fill-opacity="0.2"
  />
</svg>
复制代码

fill 属性中使用 RGBA 或者 HSLA 的方式你自己动手试试看~

描边颜色 stroke

可以通过 stroke 属性设置描边的颜色，之前也使用过。如果不设置 stroke ，图形默认是没有描边颜色的。

image-20230506100820338

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="none"
    stroke="blue"
  />
</svg>
复制代码

我将填充色设置成透明，方便观察蓝色边框。

描边颜色的不透明度 stroke-opacity

和 fill-opacity 差不多，只不过 stroke-opacity 是设置描边的不透明度

image-20230506100831007

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="none"
    stroke="blue"
    stroke-opacity="0.3"
  />
</svg>
复制代码

描边宽度 stroke-width

如果需要调整描边的宽度，可以使用 stroke-width，它接收一个数值

image-20230506100842237

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="none"
    stroke="blue"
    stroke-width="10"
  />
</svg>
复制代码

虚线描边 stroke-dasharray

边框的 点线 或者 虚线 样式，可以使用 stroke-dasharray 设置，这和 Canvas 里设置虚线的操作其实是差不多。

stroke-dasharray 接收一串数字，这串数字可以用来代表 线的长度和空隙的长度，数字之间用逗号或者空格分隔。

建议传入偶数个数字。但如果你传入了奇数个数字，SVG 会将这串数字重复一遍，使它的数量变成 偶数个 。

image-20230506100859178

<svg width="400" height="400" style="border: 1px solid red;">
  <line
    x1="30"
    y1="30"
    x2="300"
    y2="30"
    stroke="blue"
  />

  <line
    x1="30"
    y1="70"
    x2="300"
    y2="70"
    stroke="blue"
    stroke-dasharray="20 10"
  />

  <line
    x1="30"
    y1="110"
    x2="300"
    y2="110"
    stroke="blue"
    stroke-dasharray="20 10 30"
  />
</svg>
复制代码

虚线偏移量 stroke-dashoffset

虚线还可以通过 stroke-dashoffset 属性设置偏移量，它接收一个数值类型的值。

image-20230506100917351

<svg width="400" height="400" style="border: 1px solid red;">
  <line
    x1="30"
    y1="30"
    x2="300"
    y2="30"
    stroke="blue"
    stroke-width="10"
    stroke-dasharray="20 10 30"
  />

  <line
    x1="30"
    y1="90"
    x2="300"
    y2="90"
    stroke="blue"
    stroke-width="10"
    stroke-dasharray="20 10 30"
    stroke-dashoffset="10"
  />
</svg>
复制代码

我加粗了虚线，方便观察偏移量。

线帽 stroke-linecap

线帽就是线的起始点和结束点的位置，用 stroke-linecap 属性可以设置线帽样式。

线帽有3个值：

  • butt: 平头（默认值）
  • round: 圆头
  • square: 方头

image-20230506100928517

<svg width="400" height="400" style="border: 1px solid red;">
  <!-- 平头 -->
  <line
    x1="30"
    y1="30"
    x2="300"
    y2="30"
    stroke="blue"
    stroke-width="10"
    stroke-linecap="butt"
  />

  <!-- 圆头 -->
  <line
    x1="30"
    y1="70"
    x2="300"
    y2="70"
    stroke="blue"
    stroke-width="10"
    stroke-linecap="round"
  />

  <!-- 方头 -->
  <line
    x1="30"
    y1="110"
    x2="300"
    y2="110"
    stroke="blue"
    stroke-width="10"
    stroke-linecap="square"
  />
</svg>
复制代码

可以看到 square 比 butt 要稍微长一丢丢。

拐角 stroke-linejoin

拐角就是折线的交接点，可以使用 stroke-linejoin 设置，它接收以下属性：

  • miter: 尖角（默认）
  • round: 圆角
  • bevel: 平角

image-20230506100941925

<svg width="400" height="400" style="border: 1px solid red;">
  <!-- 尖角 -->
  <polyline
    points="30 60, 60 30, 90 60"
    fill="none"
    stroke="blue"
    stroke-width="20"
    stroke-linejoin="miter"
  />

  <!-- 圆角 -->
  <polyline
    points="30 120, 60 90, 90 120"
    fill="none"
    stroke="blue"
    stroke-width="20"
    stroke-linejoin="round"
  />

  <!-- 平角 -->
  <polyline
    points="30 180, 60 150, 90 180"
    fill="none"
    stroke="blue"
    stroke-width="20"
    stroke-linejoin="bevel"
  />
</svg>
复制代码

消除锯齿 shape-rendering

如果你觉得 SVG 在浏览器显示出来的图像有点模糊，那可能是开启了 反锯齿 功能，可以通过 CSS 属性关闭该功能。

shape-rendering: crispEdges;
复制代码

将该属性设置到对应的 svg 元素上，就会关闭反锯齿功能，突显看起来就会清晰很对，但在某些情况关闭了该功能会让图像看起来有点毛躁的感觉。

如果想开启反锯齿功能，可以这样设置：shape-rendering: geometricPrecision;

第五章 svg地图

在日常的开发中使用svg去画地图（缩放无损还原，显示清晰）

地图下载地址：https://datav.aliyun.com/portal/school/atlas/area_selector

image-20230506141725210

下载完你想要的地图之后，就可以通过文本的形式打开

image-20230506141918033

复制下来到你的html代码中去就可以了

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

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

相关文章

华为开发者大会2023官宣，华为云在憋什么大招？

华为开发者大会2023官宣，华为云在憋什么大招？

文丨智能相对论 作者丨沈浪 华为云也坐不住了。 在此之前&#xff0c;百度、阿里、商汤、科大讯飞等国内科技厂商以及微软、谷歌等国际巨头都已经发布了自家的大模型新品以及AIGC等相关应用。而华为云手握盘古大模型&#xff0c;却始终按兵不动&#xff0c;迟迟没有正式进场…
阅读更多...
实验篇(7.2) 02. 部署物理实验环境（上）❀ 远程访问

实验篇(7.2) 02. 部署物理实验环境（上）❀ 远程访问

【简介】当大家了解到并不需要很高的代价就可以动手做FortiOS 7.2的实验&#xff0c;很多人愿意尝试使用FortiGate防火墙硬件来学习最验难掌握的远程访问部分&#xff0c;这里我们将学习现场部署一套物理实验环境&#xff0c;让大家看到&#xff0c;在一张桌子上&#xff0c;在…
阅读更多...
chatgpt赋能python：Python中大小写转换的方法

chatgpt赋能python：Python中大小写转换的方法

Python中大小写转换的方法 在Python编程中&#xff0c;经常需要对文本进行大小写转换的操作。本文将介绍Python中字符串大小写转换的方法&#xff0c;以及如何使用它们来优化你的代码。 方法一&#xff1a;使用upper()和lower()方法 Python中&#xff0c;可以使用字符串对象…
阅读更多...
数据可视化开发的加入让办公工作更智能！

数据可视化开发的加入让办公工作更智能！

想要实现办公自动化、智能化&#xff0c;就需要选择灵活、简便、易操作的数据可视化开发平台全力助力。因为这是专注于办公高效发展的开发平台&#xff0c;是企业级的应用低代码开发平台&#xff0c;用于职场中可以实现APP、CRM、OA、ERP、WMS各类管理系统开发。可以说&#xf…
阅读更多...
ACL 2022：Graph Pre-training for AMR Parsing and Generation

ACL 2022：Graph Pre-training for AMR Parsing and Generation

Graph Pre-training for AMR Parsing and Generation 论文&#xff1a;https://aclanthology.org/2022.acl-long.415/ 代码&#xff1a;https://github.com/goodbai-nlp/AMRBART 期刊/会议&#xff1a;ACL 2022 摘要 抽象语义表示&#xff08;AMR&#xff09;以图形结构突出…
阅读更多...
2022年天府杯全国大学生数学建模竞赛A题仪器故障智能诊断技术解题全过程文档及程序

2022年天府杯全国大学生数学建模竞赛A题仪器故障智能诊断技术解题全过程文档及程序

2022年天府杯全国大学生数学建模竞赛 A题 仪器故障智能诊断技术 原题再现&#xff1a; 问题背景&#xff1a;   仪器设备故障诊断技术是一种了解和掌握机器在运行过程的状态&#xff0c;确定其整体或局部正常或异常&#xff0c;早期发现故障及其原因&#xff0c;并能预报故…
阅读更多...
关于高三经典励志文章精选

关于高三经典励志文章精选

关于高三经典励志文章精选 篇一 人要心有所向 曾经有幸被母校邀请回校做演讲。那一次的演讲结束后&#xff0c;接到学弟学妹最多的问题是&#xff1a;为什么我的大学生活很充实&#xff0c;自己也很努力&#xff0c;可毕业之后依旧觉得很迷茫? 我觉得关于迷茫的解答最后都能归…
阅读更多...
git创建本地分支的应用实践

git创建本地分支的应用实践

场景 我们希望能够不影响本地master分支的情况下自己单独开发一个功能&#xff0c;等开发完成后再合并到master分支中 操作 创建本地分支sortdev&#xff0c;并且切换到该分支上&#xff1a; git checkout -b sortdev git branch -vv 可以查看到本地master分支追踪的是远程…
阅读更多...
【学习记录】二次曲线、二次曲面、对偶二次曲线、对偶二次曲面

【学习记录】二次曲线、二次曲面、对偶二次曲线、对偶二次曲面

一、二次曲线与对偶二次曲线 最近在看基于椭球体的物体SLAM过程中&#xff0c;经常涉及到椭球体的空间几何知识&#xff0c;这里先补充一下一些空间几何相关的基础&#xff0c;参考链接。 椭球体本身属于二次曲面的一种&#xff0c;二次曲面是对空间形状的描述&#xff0c;属于…
阅读更多...
每天一道面试题之如何将字符串反转？

每天一道面试题之如何将字符串反转？

在java中&#xff0c;我们可以使用StringBuilder或者StringBuffer类的reverse()方法来实现对字符串的反转。 在讲述实现方法之前&#xff0c;首先我们先来介绍一下StringBuilder和StringBuffer是什么&#xff1f;在实际开发中&#xff0c;会有大量的字符串的拼接,但java中的字…
阅读更多...
pytorch 训练EfficientnetV2

pytorch 训练EfficientnetV2

文章目录 前言一、数据摆放二、训练二、测试三、训练和测试结果总结 前言 前不久用pytorch复现了efficientnetv2的网络结构&#xff0c;但是后边自己一直有其他事情再做&#xff0c;所以训练部分的文章拖到了现在。关于Efficientnet的部分文章链接可参考如下&#xff1a; Effic…
阅读更多...
一百二十、Kettle——用kettle把Hive数据同步到ClickHouse

一百二十、Kettle——用kettle把Hive数据同步到ClickHouse

一、目标 用kettle把hive数据同步到clickhouse&#xff0c;简单运行、直接全量导入数据 工具版本&#xff1a;kettle&#xff1a;8.2 Hive:3.1.2 ClickHouse21.9.5.16 二、前提 &#xff08;一&#xff09;kettle连上hive &#xff08;二&#xff09;kettle连上cli…
阅读更多...
10. 数据结构之树

10. 数据结构之树

前言 之前介绍了顺序表的数据结构&#xff0c;包含队列&#xff0c;栈等&#xff0c;这种结构都是一对一的&#xff0c;但是现实生活中&#xff0c;经常会遇见一对多的数据结构&#xff0c;比如族谱&#xff0c;部门机构等&#xff0c;此时我们需要一个更复杂的数据结构来表示…
阅读更多...
分布式系统概念和设计——（事务与并发控制）

分布式系统概念和设计——（事务与并发控制）

分布式系统概念和设计 事务与并发控制 简介 事务的目标是在多个事务访问对象以及服务器面临崩溃的情况下&#xff0c;保证所有由服务器管理的对象始终维持在一个一致的状态上 事务是由客户定义的针对服务器对象的一组操作&#xff0c;组成为一个不可分割的单元&#xff0c;由…
阅读更多...
Unity | HDRP高清渲染管线学习笔记：HDRP配置文件(HDRP Asset)

Unity | HDRP高清渲染管线学习笔记：HDRP配置文件(HDRP Asset)

目录 一、Frame Settings&#xff08;帧设置&#xff09; 二、Volume 三、HDRP配置文件、帧设置和Volume之间的关系 四、HDRP配置文件 1.Rendering &#xff08;1&#xff09;Color Buffer Format&#xff08;颜色缓存格式&#xff09; &#xff08;2&#xff09;Lit Sh…
阅读更多...
芭比Q了，现在的00后实在是太卷了.....

芭比Q了，现在的00后实在是太卷了.....

都说00后躺平了&#xff0c;但是有一说一&#xff0c;该卷的还是卷。 这不&#xff0c;前段时间我们公司来了个00后&#xff0c;工作都没两年&#xff0c;跳槽到我们公司起薪20K&#xff0c;都快接近我了。后来才知道人家是个卷王&#xff0c;从早干到晚就差搬张床到工位睡觉了…
阅读更多...
掌握这个90%的人都不会的大屏技术，裁员、降薪与你无关

掌握这个90%的人都不会的大屏技术，裁员、降薪与你无关

裁员话题时不时就被拉到热搜上溜几圈&#xff0c;一方面让各位打工人们焦虑恐惧失业风险&#xff0c;另一方面也能让各位从一波波裁员危机事件中吸取“经验”。例如&#xff0c;技术人员狂敲代码、业务人员猛冲业绩…该被裁的依旧如此&#xff0c;在当今你得具备点别人没有的技…
阅读更多...
测评补单操作在美客多店铺及产品优化中的决定性角色：深度解读

测评补单操作在美客多店铺及产品优化中的决定性角色：深度解读

许多经营美客多平台的商家有一种观念&#xff0c;他们认为美客多平台的规则与亚马逊有所区别。在美客多上&#xff0c;店铺比产品更重要&#xff0c;而且平台的竞争相对较小。因此&#xff0c;他们认为在美客多平台进行补单操作是不必要的。 然而&#xff0c;是否真的如此呢&a…
阅读更多...
RF接口测试（1）

RF接口测试（1）

RF是做接口测试的一个非常方便的工具&#xff0c;我们只需要写好发送报文的脚本&#xff0c;就可以灵活的对接口进行测试。 做接口测试我们需要做如下工作&#xff1a; 1、拼接发送的报文 2、发送请求的方法 3、对结果进行判断 我们先按步骤实现&#xff0c;再进行RF操作的…
阅读更多...
人效九宫格｜三个提升路径，三种管理模式，让人效实时可量化

人效九宫格｜三个提升路径，三种管理模式，让人效实时可量化

文&#xff5c;盖雅学苑‍‍ 本文共5202字 在经济高速发展的过去&#xff0c;企业更关注机遇&#xff0c;当经济发展速度进入新常态时&#xff0c;企业更关注效率。在盖雅工场发布的《企业人效管理白皮书》中的数据显示&#xff0c;69.9%的企业依旧将人效提升作为紧急事项&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023