3 突破编程_前端_SVG(rect 矩形)

1 rect 元素的基本属性和用法

在SVG中,<rect> 元素用于创建矩形。

<rect> 元素有一些基本的属性,可以用来定义矩形的形状、位置、颜色等。以下是这些属性的详细解释:

  1. x 和 y :这两个属性定义矩形左上角的位置。 x 是矩形左上角到SVG画布左边缘的水平距离, y 是矩形左上角到SVG画布上边缘的垂直距离。这两个属性的值都是长度,可以是像素值(如 “50px”),也可以是百分比值(如 “10%”)。
<rect x="10" y="20" width="100" height="50" />

在这里插入图片描述

在这个例子中,矩形的左上角位于SVG画布的(10, 20)位置。

  1. width 和 height :这两个属性定义矩形的宽度和高度。这两个属性的值也是长度,可以是像素值或百分比值。
<rect x="10" y="20" width="100" height="50" />

在这个例子中,矩形的宽度是100,高度是50。

  1. rx 和 ry :这两个属性定义矩形的圆角半径。如果只设置了 rx ,那么矩形的所有四个角都将有相同的圆角半径。如果同时设置了 rx 和 ry ,那么矩形的左上角和右下角的圆角半径为 rx ,左下角和右上角的圆角半径为 ry 。
<rect x="10" y="20" width="100" height="50" rx="10" ry="20" />

在这里插入图片描述

在这个例子中,矩形的左上角和右下角的圆角半径为10,左下角和右上角的圆角半径为20。

  1. fill :这个属性定义矩形的填充颜色。它接受颜色名、RGB、RGBA、HSL、HSLA 或十六进制颜色代码。如果省略此属性,矩形将不会被填充。
<rect x="10" y="20" width="100" height="50" fill="blue" />

在这里插入图片描述

在这个例子中,矩形的填充颜色是蓝色。

  1. stroke :这个属性定义矩形的描边颜色。与 fill 属性类似,它也接受颜色名、RGB、RGBA、HSL、HSLA 或十六进制颜色代码。如果省略此属性,矩形将没有描边。
  2. stroke-width :这个属性定义矩形描边的宽度。它的值是一个长度,可以是像素值或百分比值。
<rect x="10" y="20" width="100" height="50" fill="none" stroke="black" stroke-width="5" />

在这里插入图片描述

在这个例子中,矩形没有填充,但有黑色的描边,描边的宽度为5。

这些属性可以一起使用,以创建具有各种形状、位置和颜色的矩形。同时,你也可以使用CSS来样式化SVG元素,包括 <rect> 元素。例如,可以使用CSS来改变矩形的颜色、描边宽度等。

2 使用 CSS 样式设置矩形的颜色、边框和阴影

在SVG中,使用CSS样式设置 元素的颜色、边框和阴影略有不同,因为SVG有自己的属性和方法来处理这些样式。以下是如何在SVG中设置 元素的填充颜色(相当于背景颜色)、描边(相当于边框)和阴影的示例:

<svg width="200" height="100">  
    <style>  
        .styled-rect {  
            fill: #f00; /* 设置矩形的填充颜色为红色 */  
            stroke: #00f; /* 设置矩形的描边颜色为蓝色 */  
            stroke-width: 5; /* 设置矩形的描边宽度为5 */  
            filter: drop-shadow(10px 10px 5px #0f0); /* 设置矩形的阴影 */  
        }  
    </style>  
    <rect class="styled-rect" x="10" y="20" width="100" height="50" />
</svg>

在这里插入图片描述

在这个例子中,<style> 标签被放置在 SVG 元素内部,用于定义 CSS 样式。.styled-rect 是一个类选择器,它应用于 <rect> 元素。

  • fill 属性用于设置矩形的填充颜色。
  • stroke 属性用于设置矩形的描边颜色。
  • stroke-width 属性用于设置矩形的描边宽度,这相当于HTML/CSS中的边框宽度。
  • filter 属性用于设置阴影效果,其中 drop-shadow() 函数用于创建阴影。它的参数与CSS的 box-shadow 类似,但语法略有不同。

注意:SVG 的阴影是通过 filter 和 drop-shadow() 函数来实现的,而不是像 HTML 元素那样使用 box-shadow 属性。这是因为 SVG 有自己的滤镜系统,用于实现更复杂的视觉效果。

3 SVG 矩形的交互性

3.1 使用 JavaScript 为 SVG 矩形添加点击事件

以下是一个简单的示例,演示了如何为SVG矩形添加点击事件处理器:

<svg width="200" height="100">  
    <rect id="myRect" width="100" height="50" style="fill:blue;stroke:pink;stroke-width:5;"/>  
    <script>  
        // 获取SVG矩形元素  
        var rect = document.getElementById('myRect');  
          
        // 为矩形添加点击事件处理器  
        rect.addEventListener('click', function(event) {  
            // 在控制台输出点击事件的信息  
            console.log('Rectangle clicked!', event);  
              
            // 你可以在这里添加其他逻辑,比如改变矩形的颜色  
            // rect.style.fill = 'green';  
        });  
    </script>  
</svg>

在这个例子中,我们首先通过 document.getElementById 获取到 <rect>元素的引用。然后,我们使用 addEventListener 方法为这个元素添加一个点击事件处理器。当用户点击这个矩形时,会触发这个处理器,并调用提供的函数。在这个函数中,你可以执行任何你需要的操作,比如改变矩形的颜色、显示一个弹出框,或者发送一个网络请求。

注意:addEventListener 的第一个参数是事件的名称(在这个例子中是 ‘click’),第二个参数是一个处理该事件的函数。这个函数通常接收一个 event 对象作为参数,这个对象包含了关于事件的信息,比如点击的位置、触发事件的元素等。

3.2 使用 SVG 的动画功能为矩形添加动画效果

SVG 提供了强大的动画功能,可以使用 SVG 的 <animate> 元素或者 CSS 动画和过渡来创建动画效果。

(1)使用 SVG 的 元素

可以直接在 SVG 矩形上使用 <animate> 元素来创建动画。例如,可以创建一个颜色变化的动画:

<svg width="200" height="100">  
    <rect width="100" height="50" style="fill:blue;">  
        <animate attributeName="fill" values="blue;red;green" dur="3s" repeatCount="indefinite" />  
    </rect>  
</svg>

在这个例子中,<animate> 元素改变了矩形的 fill 属性值。values 属性定义了颜色变化的序列,dur 属性定义了动画的持续时间,而 repeatCount 属性决定了动画应该重复多少次(indefinite 表示无限次)。

(2)使用 CSS 动画

也可以使用 CSS 来定义 SVG 元素的动画。首先,需要给 SVG 矩形添加一个类名,然后在 CSS 中定义动画:

<svg width="200" height="100">  
    <rect class="animated-rect" width="100" height="50" style="fill:blue;">  
        <!-- 无需使用 <animate> 元素 -->  
    </rect>  
</svg>  
  
<style>  
    @keyframes colorChange {  
        0% { fill: blue; }  
        50% { fill: red; }  
        100% { fill: green; }  
    }  
  
    .animated-rect {  
        animation-name: colorChange;  
        animation-duration: 3s;  
        animation-iteration-count: infinite;  
    }  
</style>

在这个例子中,我们定义了一个名为 colorChange 的关键帧动画,它会在 3 秒内改变矩形的填充颜色。然后,我们将这个动画应用到具有 animated-rect 类名的 元素上。animation-name 指定了要使用的动画名称,animation-duration 定义了动画的持续时间,而 animation-iteration-count 定义了动画应该重复的次数(infinite 表示无限次)。

(3)使用 JavaScript 触发动画

如果想要通过 JavaScript 来触发或控制动画,则可以给动画定义一个名称,并使用 JavaScript 来添加或移除类名,或者使用 JavaScript 来修改 CSS 属性。以下是一个简单的例子,展示了如何使用 JavaScript 来添加类名从而启动动画:

<svg width="200" height="100">  
    <rect id="myAnimatedRect" width="100" height="50" style="fill:blue;">  
        <!-- 无需使用 <animate> 元素 -->  
    </rect>  
</svg>  
  
<style>  
    .animated-rect {  
        animation-name: colorChange;  
        animation-duration: 3s;  
        animation-iteration-count: infinite;  
    }  
  
    @keyframes colorChange {  
        0% { fill: blue; }  
        50% { fill: red; }  
        100% { fill: green; }  
    }  
</style>  
  
<script>  
    // 获取 SVG 矩形元素  
    var rect = document.getElementById('myAnimatedRect');  
      
    // 添加类名以启动动画  
    rect.classList.add('animated-rect');  
      
    // 在某个时刻,你可以通过移除类名来停止动画  
    // rect.classList.remove('animated-rect');  
</script>

在这个例子中,我们首先在 CSS 中定义了一个动画和对应的类名。然后,在 JavaScript 中,我们获取了 SVG 矩形的引用,并添加了 animated-rect 类名来启动动画。如果需要在某个时刻停止动画,可以移除这个类名。

3.3 使用 SVG 的 transform 属性实现矩形的变换

SVG 的 transform 属性允许改变元素的位置、大小、倾斜和旋转。使用 JavaScript,可以动态地控制这些变换,为 SVG 元素添加交互性和动画效果。

以下是一个示例,演示如何使用 JavaScript 控制 SVG 矩形的变换:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>header tab</title>
    <style>
        html {
            height: 100%;
        }

        body {
            margin: 0;
            height: 100%;
        }
    </style>
</head>

<body>
    <button onclick="translateRect()">移动矩形</button>  
    <button onclick="scaleRect()">缩放矩形</button>  
    <button onclick="rotateRect()">旋转矩形</button>  
    <svg width="200" height="200">  
    <rect id="myRect" width="50" height="50" style="fill:blue;"/>  
    <script>  
        function translateRect() {  
            var rect = document.getElementById('myRect');  
            // 使用 translate 函数移动矩形  
            // 参数分别是 x 和 y 轴的移动量  
            rect.setAttribute('transform', 'translate(50, 50)');  
        }  
  
        function scaleRect() {  
            var rect = document.getElementById('myRect');  
            // 使用 scale 函数缩放矩形  
            // 参数分别是 x 和 y 轴的缩放因子  
            rect.setAttribute('transform', 'scale(1.5)');  
        }  
  
        function rotateRect() {  
            var rect = document.getElementById('myRect');  
            // 获取当前的变换矩阵  
            var currentTransform = rect.getAttribute('transform') || '';  
            // 使用 rotate 函数旋转矩形  
            // 参数是旋转的角度(以度为单位)  
            // 如果之前有变换,需要使用空格分隔  
            rect.setAttribute('transform', currentTransform + ' rotate(45)');  
        }  
    </script>  
</svg>
</body>


</html>

在这个例子中,我们创建了一个蓝色的矩形,并提供了三个按钮来控制矩形的变换。每个按钮都关联一个 JavaScript 函数,这些函数分别用于移动、缩放和旋转矩形。

  • translateRect 函数使用 translate 变换来移动矩形。它接受两个参数,分别表示在 x 轴和 y 轴上移动的距离。
  • scaleRect 函数使用 scale 变换来缩放矩形。它接受两个参数,分别表示在 x 轴和 y 轴上的缩放因子。如果两个参数相同,则矩形会等比例缩放;如果不同,则矩形会按不同比例缩放。
  • rotateRect 函数使用 rotate 变换来旋转矩形。它接受一个参数,表示旋转的角度(以度为单位)。注意,如果元素之前已经有变换(如平移或缩放),你需要先获取当前的变换矩阵,并在新变换前加上这个矩阵,以确保变换是累加的。

4 高级 SVG 矩形技巧

4.1 使用 SVG 的 clipPath 属性裁剪矩形

SVG 的 clipPath 属性允许你定义一个裁剪区域,只有该区域内的部分才会被显示出来。这对于创建各种形状和效果的裁剪非常有用。以下是一个示例,演示如何使用 clipPath 属性来裁剪一个矩形:

<svg width="200" height="200">  
    <!-- 定义裁剪路径 -->  
    <defs>  
        <clipPath id="myClip">  
            <rect x="50" y="50" width="100" height="100" />  
        </clipPath>  
    </defs>  
  
    <!-- 使用裁剪路径的矩形 -->  
    <rect x="0" y="0" width="200" height="200" style="fill:blue; clip-path: url(#myClip);" />  
</svg>

裁剪前:
在这里插入图片描述

裁剪后:
在这里插入图片描述

在这个例子中,我们首先在 <defs> 元素中定义了一个 clipPath。这个 clipPath 包含一个矩形,其位置和大小定义了裁剪区域。id 属性为 clipPath 提供了一个唯一的标识符,以便我们可以在其他地方引用它。

然后,我们创建了一个较大的蓝色矩形,并使用了 clip-path 属性来应用我们之前定义的裁剪路径。clip-path 属性的值是一个 URL,它指向了我们定义的 clipPath 的 id。这意味着只有位于裁剪区域内的矩形部分(即坐标 (50, 50),宽度和高度均为 100 的区域)会被显示出来。

如果你想要通过 JavaScript 动态地改变裁剪区域,你可以修改 clipPath 中的矩形元素。例如:

<button onclick="updateClipPath()">更新裁剪区域</button> 
<svg width="200" height="200">  
    <defs>  
        <clipPath id="myClip">  
            <rect id="clipRect" x="50" y="50" width="100" height="100" />  
        </clipPath>  
    </defs>  
  
    <rect x="0" y="0" width="200" height="200" style="fill:blue; clip-path: url(#myClip);" />  
  
    <script>  
        function updateClipPath() {  
            var clipRect = document.getElementById('clipRect');  
            // 修改裁剪区域的位置和大小  
            clipRect.setAttribute('x', 10);  
            clipRect.setAttribute('y', 10);  
            clipRect.setAttribute('width', 150);  
            clipRect.setAttribute('height', 150);  
        }  
    </script>   
</svg>

在这个改进的例子中,我们给 clipPath 中的矩形元素添加了一个 id(clipRect)。然后,我们创建了一个 JavaScript 函数 updateClipPath,该函数会修改 clipRect 的 x、y、width 和 height 属性,从而改变裁剪区域的大小和位置。最后,我们添加了一个按钮,当点击该按钮时,会调用 updateClipPath 函数并更新裁剪区域。

4.2 使用 SVG 的 mask 属性为矩形添加遮罩效果

SVG 的 mask 属性允许你使用遮罩来隐藏元素的某些部分,从而创建出复杂的视觉效果。遮罩元素通常包含一个黑白图像,其中白色区域表示完全可见,黑色区域表示完全透明,而灰色区域则表示部分透明。

以下是一个示例,演示如何使用 SVG 的 mask 属性为矩形添加遮罩效果:

<svg width="200" height="200">  
    <!-- 定义遮罩 -->  
    <mask id="myMask">  
        <rect width="200" height="200" fill="white" />  
        <circle cx="100" cy="100" r="50" fill="black" />  
    </mask>  
  
    <!-- 使用遮罩的矩形 -->  
    <rect x="0" y="0" width="200" height="200" style="fill:blue; mask: url(#myMask);" />  
</svg>

在这里插入图片描述

在这个例子中,我们首先定义了一个遮罩,其 id 为 myMask。遮罩包含一个白色的矩形背景和一个黑色的圆形。因为黑色表示完全透明,所以这个圆形区域内的内容将会在应用遮罩时被隐藏。

接下来,我们创建了一个蓝色的矩形,并使用了 mask 属性来应用我们之前定义的遮罩。mask 属性的值是一个 URL,它指向了我们定义的遮罩的 id。

这样,当遮罩应用于矩形时,圆形区域内的蓝色矩形部分将变得透明,从而创建出一个带有圆形透明区域的矩形效果。

如果你想要通过 JavaScript 动态地改变遮罩的效果,你可以修改遮罩中的元素。例如,你可以改变圆形的大小、位置或颜色来创建不同的遮罩效果。以下是一个简单的例子,通过点击按钮来动态改变遮罩中的圆形半径:

<button onclick="changeMaskRadius()">改变遮罩圆形半径</button>  
<svg width="200" height="200">  
    <mask id="myMask">  
        <rect width="200" height="200" fill="white" />  
        <circle id="maskCircle" cx="100" cy="100" r="50" fill="black" />  
    </mask>  
  
    <rect x="0" y="0" width="200" height="200" style="fill:blue; mask: url(#myMask);" />  
  
    <script>  
        function changeMaskRadius() {  
            var maskCircle = document.getElementById('maskCircle');  
            // 改变遮罩中圆形的半径  
            var newRadius = Math.random() * 100; // 随机生成新半径  
            maskCircle.setAttribute('r', newRadius);  
        }  
    </script>  
</svg>

在这个改进的例子中,我们给遮罩中的圆形元素添加了一个 id(maskCircle)。然后,我们创建了一个 JavaScript 函数 changeMaskRadius,该函数会获取 maskCircle 元素,并随机生成一个新的半径值来设置给 r 属性。最后,我们添加了一个按钮,当点击该按钮时,会调用 changeMaskRadius 函数并改变遮罩中圆形的半径,从而动态地改变遮罩效果。

4.3 使用 SVG 的 pattern 属性为矩形添加图案填充

SVG 的 pattern 属性允许定义一个图案,并将其用作其他形状(如矩形、圆形等)的填充。这样,就可以创建具有复杂填充模式的图形。

下面是一个使用 SVG 的 pattern 属性为矩形添加图案填充的示例:

<svg width="240" height="240">  
    <!-- 定义图案 -->  
    <defs>  
        <pattern id="myPattern" width="80" height="80" patternUnits="userSpaceOnUse">  
            <circle cx="40" cy="40" r="40" fill="blue" />  
            <circle cx="40" cy="40" r="10" fill="white" />  
        </pattern>  
    </defs>  
  
    <!-- 使用图案填充的矩形 -->  
    <rect x="0" y="0" width="240" height="240" fill="url(#myPattern)" />  
</svg>

在这里插入图片描述

在这个例子中,我们首先定义了一个图案,其 id 为 myPattern。图案的大小为 10x10 单位,并且我们使用了 patternUnits=“userSpaceOnUse”,这意味着图案的宽度和高度是相对于用户空间坐标系的。

图案中包含了两个圆形,一个大的灰色圆形和一个小的白色圆形。白色圆形位于灰色圆形的中心,形成了一种靶心图案的效果。

接下来,我们创建了一个矩形,并使用 fill 属性来引用我们之前定义的图案。fill 属性的值是一个 URL,它指向了我们定义的图案的 id。

这样,当图案应用于矩形时,矩形的填充将会呈现出我们定义的图案效果。

开发者可以根据需要修改图案中的形状、颜色、大小等属性,以创建出不同的填充效果。同样,也可以通过 JavaScript 动态地改变图案的定义,从而动态地改变矩形的填充图案。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Day:005 | Python爬虫:高效数据抓取的编程技术(爬虫效率)

爬虫之多线程-了解 单线程爬虫的问题 因为爬虫多为IO密集型的程序&#xff0c;而IO处理速度并不是很快&#xff0c;因此速度不会太快如果IO卡顿&#xff0c;直接影响速度 解决方案 考虑使用多线程、多进程 原理&#xff1a; 爬虫使用多线程来处理网络请求&#xff0c;使用线程…

服务器云主机进入黑洞了怎么解决

黑洞是指服务器受进犯流量超过本机房黑洞阈值时&#xff0c;云核算服务商屏蔽服务器的外网拜访。当服务器进入黑洞一段时间后&#xff0c;假如体系监控到进犯流量中止&#xff0c;黑洞会主动解封。 1&#xff1a;进入“黑洞”了&#xff0c;该怎么办&#xff1f; 由于黑洞是各…

unable to find a medium containing a live file system解决办法!

背景&#xff1a; 用Ventoy制作U盘系统安装盘&#xff0c;只需要把ISO镜像拷进去就可以&#xff0c;可以放多少个镜像取决于U盘的大小&#xff0c;无需重复制作。Ventoy 将U盘的第一个分区默认格式化为exFAT文件系统来存放ISO文件。 但是&#xff0c;今天鲲鹏920平台安装银河…

第十三届蓝桥杯C/C++大学B组真题题解(一)

1、扫雷 #include <bits/stdc.h> using namespace std; int n,m; const int N110; int g[N][N]; int dx[8]{-1,-1,-1,0,1,1,1,0}; int dy[8]{-1,0,1,1,1,0,-1,-1}; int dfs(int x,int y){int ans0;for(int i0;i<8;i){int axdx[i],bydy[i];if(a<0||a>n-1||b<0…

水牛社:互联网赚钱秘籍,免费项目,你真敢要吗?

免费是最贵的。真正理解并使用这句话的只有少数人&#xff0c;今天在网上分享一下免费项目背后的逻辑&#xff0c;抛开现象&#xff0c; 本质是最重要的。 我从事互联网工作15年。不管是过去还是现在&#xff0c;总有人喜欢问有没有免费项目&#xff1f; 其实我平时懒得回答…

面试经典算法系列之链表2 -- 环形链表

面试经典算法8-环形链表 LeetCode.141 公众号&#xff1a;阿Q技术站 问题描述 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&am…

day7 nest商业项目初探·三(java转ts全栈/3R教室)

背景&#xff1a;从头一点点学起太慢了&#xff0c;直接看几个商业项目吧&#xff0c;看看根据Java的经验&#xff0c;自己能看懂多少&#xff0c;然后再系统学的话也会更有针对性。今天看下一个项目 * 【法国 | 3.75w】Nextjs&#xff1a;小雯工作室创意官网 &#xff08;2023…

C语言进阶|顺序表

✈顺序表的概念及结构 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使 用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串.. 线性表在逻辑上是线性结构&#xff0c;也就说是连…

Proxmox VE qm 方式备份虚拟机

前言 使用qm 备份Proxmox VE虚拟机&#xff0c;高效便捷。 登录Proxmox VE shell 执行备份操作 备份建议关闭虚拟机 qm shutdown 虚拟机名称号--compress 备份格式 0(代表vma格式) gzip lzo zstd--storage local&#xff08;备份的位置&#xff09;备份默认位置/var/lib/…

NL2SQL基础系列(1):业界顶尖排行榜、权威测评数据集及LLM大模型(Spider vs BIRD)全面对比优劣分析[Text2SQL、Text2DSL]

NL2SQL基础系列(1)&#xff1a;业界顶尖排行榜、权威测评数据集及LLM大模型&#xff08;Spider vs BIRD&#xff09;全面对比优劣分析[Text2SQL、Text2DSL] Text-to-SQL&#xff08;或者Text2SQL&#xff09;&#xff0c;顾名思义就是把文本转化为SQL语言&#xff0c;更学术一…

【笔试】02

TCP TCP&#xff08;传输控制协议&#xff09;是一种面向连接的、可靠的、基于字节流的传输层通信协议 它能够提供以下服务&#xff1a; 可靠传输 通过序列号、确认应答、重传机制等确保数据完整、准确地从发送端传输到接收端。 三次握手&#xff1a; 点对点全双工面向字节流…

leetcode之35 搜索插入位置

文章目录 每日碎碎念一、题目要求及测试点35 搜索插入位置测试点提示 二、题解自己上手正经题解暴力法二分法之优化了一下逻辑 三、总结 每日碎碎念 苦痛生活继续 hello LeetCode&#xff0c;今天还是数组二分专项刷题… 一、题目要求及测试点 35 搜索插入位置 给定一个排序…

RecyclerView的使用

首先是activity_Main.xml 注意&#xff0c;少了下面那行活动页面会空白 app:layoutManager"androidx.recyclerview.widget.LinearLayoutManager" 1.然后需要创建一个java对象 public class NewsBean implements Serializable { // private String title;priva…

JR-SMD201-P便携式网络解码器

详细介绍&#xff1a; JR-SMD201-P便携式网络解码器采用1/2U设计&#xff0c;支持AVS/H.265/H.264/MPEG2解码&#xff0c;支持IP输入&#xff0c;支持1080P/1080I/720P/576I/480I多种分辨率&#xff0c;支持DRA/AC3/EAC3/AAC/MPEG等音频。 产品特点 支持输入方式IP 接口丰富&a…

Spring Boot 切面的一种的测试方法,java中级开发面试

void afterReturnName() { Assertions.assertEquals(studentController.getNameById(123L).getName(), "测试姓名Yz");} } 但往往切面中的逻辑并非这么简单&#xff0c;在实际的测试中其实我们也完成没有必要关心在切面中到底发生了什么&#xff08;发生了什么应该在…

Spring boot 入门 ---(一),2024年最新java进阶训练营

spring-snapshots http://repo.spring.io/snapshot spring-milestones http://repo.spring.io/milestone spring-boot-starter-parent是使用Spring Boot的一种不错的方式&#xff0c;但它 并不总是最合适的。有时你可能需要继承一个不同的父POM&#xff0c;或只是不喜欢我…

Kafka是什么,以及如何使用SpringBoot对接Kafka

系列文章目录 上手第一关&#xff0c;手把手教你安装kafka与可视化工具kafka-eagle 架构必备能力——kafka的选型对比及应用场景 Kafka存取原理与实现分析&#xff0c;打破面试难关 防止消息丢失与消息重复——Kafka可靠性分析及优化实践 Kafka是什么&#xff0c;以及如何使用…

Android输入框架

输入是一个操作系统的重要组成部分&#xff0c;没有输入&#xff0c;用户就无法向系统发送指令&#xff0c;也就没法完成人机交互。在Android系统中&#xff0c;输入系统是不可缺少的&#xff0c;下面简单介绍输入系统的整体框架&#xff0c;以下内容参考清华出版社出版的《And…

DSP笔记6-C2000的中断机制

中断Interrupt&#xff1a; 单核CPU顺序执行程序 中断源&#xff0c;引起计算机中断的时间&#xff0c;解放cpu&#xff0c;提高效率。 三个等级&#xff1a;CPU中断&#xff0c;PIE中断&#xff0c;外设中断 cpu定时器&#xff0c;EPWM&#xff0c;ADC&#xff0c;eCAP&…

计算机网友将饭卡余额改成100多万

你在学校干过最疯狂的事是什么&#xff1f; 一位学计算机的网友说&#xff0c;他改造过的水卡和饭卡都能无限使用&#xff0c;两年后在食堂刷卡&#xff0c;被食堂阿姨发现余额竟然还剩一百多万&#xff0c;虽然没有赔钱&#xff0c;但是被学校教务处处分了&#xff0c;怎么说…