搜索
首页web前端css教程如何使用口罩创建嵌套正方形的动画图表

如何使用口罩创建嵌套正方形的动画图表

我们有许多众所周知的图表类型:酒吧,甜甜圈,线,派,您可以命名。所有流行的图表库支持这些。然后有图表类型甚至没有名称。使用堆叠的(嵌套)正方形查看此DreamT-Up图表,可以帮助可视化相对大小,或者不同的值相互比较:

我们正在做什么

没有任何互动,创建此设计非常简单。一种方法是堆叠元素(例如SVG 元素,甚至是HTML Divs),尺寸的尺寸均匀,其中所有左下角都触及相同的点。

但是,一旦我们引入了一些互动性,事情就会变得棘手。应该这样做:当我们将鼠标移到其中一种形状上时,我们希望其他人逐渐消失并移开。

我们将使用矩形和掩码创建这些不规则的形状 - 具有元素的字面。如果您是面具的新手,那么您就在正确的位置。这是一篇介绍性的文章。如果您的经验丰富,那么也许这种切割效果是您可以带来的技巧。

现在,在我们开始之前,您可能会想知道是否是使用自定义形状的更好的SVG替代品。绝对是可能的!但是用绘制形状可能令人生畏,甚至会变得凌乱。因此,我们正在使用“更容易”的元素来获得相同的形状和效果。

例如,这是我们必须使用来表示最大的蓝色形状。

 <svg viewbox="“" width="“" height="“">
  
</svg>

如果0H0V56…对您没有任何意义,请查看“ SVG路径语法:插图指南”,以详细说明语法。

图表的基础

给定这样的数据集:

键入datasetEntry = {
  标签:字符串;
  值:数字;
};

键入dataset = datasetEntry [];

const rawdataset:dataset = [
  {label:'bad',值:1231},
  {label:'begint',value:6321},
  {label:'开发',值:10028},
  {label:'已完成',值:12123},,
  {label:'示例',值:2120}
];

…我们想以这样的SVG结束:

 <svg viewbox="“" width="“" height="“">
  <rect width="“" height="“" y="“" fill="“" ...> </rect>
  <rect width="“" height="“" y="“" fill="“" ...> </rect>
  <rect width="“" y="“" fill="“" ...> </rect>
  <rect width="“" y="“" fill="“" ...> </rect>
  <rect width="“" height="“" y="“" fill="“" ...> </rect>
</svg>

确定最高价值

在瞬间,我们需要最高价值会变得很明显。我们可以使用Math.max()获取它。它接受任何数量的参数,并返回集合中的最高值。

 const dataseThighestValue:number = math.max(
  ... RAWDATASET.MAP((输入:DataSetEntry)=> entry.value)
);

由于我们有一个小数据集,因此我们可以说我们将获得12123。

计算矩形的尺寸

如果我们看设计,则代表最高值(12123)的矩形覆盖了图表的整个区域。

我们任意选择320个SVG尺寸。由于我们的矩形是正方形,因此宽度和高度相等。我们如何使12123等于320?较少的“特殊”值怎么样? 6321矩形有多大?

换句话说,我们如何将一个数字从一个范围([0,12123])映射到另一个范围([0,320])?或者,用更多的数学术语,我们如何将变量扩展到[a,b]的间隔?

出于我们的目的,我们将实现这样的功能:

 const remapvalue =(
  价值:数字,
  Frommin:数字,
  Frommax:数字,
  Tomin:数字,
  tomax:数字
):数字=> {
  返回((value -frommin) /(frommax -frommin)) *(tomax -tomin)tomin;
};

重新值(1231,0,12123,0,320); // 32
重新值(6321,0,12123,0,320); // 167
重新值(12123,0,12123,0,320); // 320

由于我们将值映射到代码中的相同范围,而不是一遍又一遍地传递最小值和最大值,因此我们可以创建一个包装函数:

 const valuerMapper =(
  Frommin:数字,
  Frommax:数字,
  Tomin:数字,
  tomax:数字
)=> {
  返回(值:数字):number => {
    返回重新值(Value,Frommin,Frommax,Tomin,Tomax);
  };
};

const remapdatasetValuetosvgdimension = valueremapper(
  0,
  DataseThighestValue,
  0,
  svgdimension
);

我们可以这样使用:

 RemapdatasetValuetosvgdimension(1231); // 32
RemapdatasetValuetosvgdimension(6321); // 167
RemapdatasetValuetosvgdimension(12123); // 320

创建和插入DOM元素

剩下的与DOM操纵有关。我们必须创建和五个元素,设置其属性,然后将它们附加到DOM。我们可以使用基本的createlementn,setAttribute和附录函数来完成所有这些。

请注意,我们使用的是CreateElementn,而不是更常见的Createlement。这是因为我们正在使用SVG。 HTML和SVG元素具有不同的规格,因此它们属于不同的名称空间URI。碰巧的是,CreateElement便利地使用HTML名称空间!因此,要创建一个SVG,我们必须是这个冗长:

 document.createelementns('http://www.w3.org/2000/svg','svg')as svgsvgelement;

当然,我们可以创建另一个辅助功能:

 const createsvgnSelement =(element:string):svgelement => {
  返回document.createelementns('http://www.w3.org/2000/svg',element);
};

当我们将矩形附加到DOM时,我们必须注意它们的命令。否则,我们必须明确指定z索引。第一个矩形必须是最大的,最后一个矩形必须是最小的。最好在循环之前对数据进行分类。

 const data = rawdataset.sort(
  (a:datasetEntry,b:datasetEntry)=> b.value -a.value
);

data.foreach((D:DATASETENTRY,index:number)=> {
  const rect:svgrectelement = keresvgnSelement('rect')作为svgrectelement;
  const rectdimension:number = remapdatasetValuetosvgdimension(d.Value);

  rect.setAttribute('width',`$ {rectDimension}`);
  rect.setAttribute('height',`$ {rectDimension}`);
  rect.setAttribute('y',`$ {svgdimension -rectDimension}`);

  svg.appendchild(rect);
});

坐标系从左上角开始;那就是[0,0]在哪里。我们总是要从左侧绘制矩形。控制水平位置的X属性默认为0,因此我们不必设置它。 Y属性控制垂直位置。

为了给人以视觉印象:所有矩形都源于触摸其左下角的同一点,我们必须将矩形向下推下。多少钱?矩形不填充的确切量。该值是图表的维度和特定矩形之间的差异。如果我们将所有位放在一起,我们最终都会得到这样做:

我们已经使用CSS添加了该动画的代码。

切割矩形

我们必须将矩形变成不规则的形状,看起来像是第七名,或者字母L旋转180度。

如果我们专注于“丢失的零件”,那么我们可以看到它们切入了我们已经与之合作的相同矩形。

我们想隐藏那些切口。这就是我们最终要获得想要的L形状的方式。

掩盖101

掩模是您定义的东西,然后应用于元素。通常,掩码在其属于的元素中夹住。而且,通常,它应该具有唯一的ID,因为我们必须将其引用才能将掩码应用于元素。

 <svg>
  <mask>
    
  </mask>
</svg>

标签中,我们将形状作为实际面具。我们还将蒙版属性应用于元素。

 <svg>
  <mask>
    
  </mask>
  <rect mask="“" url> </rect>
</svg>

这不是定义或涂上口罩的唯一方法,但这是该演示的最直接方法。让我们在编写任何代码以生成口罩之前进行一些实验。

我们说,我们想覆盖与现有矩形大小相匹配的切口区域。如果我们采用最大的元素,并且将先前的矩形应用于掩模,我们最终以此代码:

 <svg viewbox="“" width="“" height="“">
  <mask>
    <rect width="“" height="“" y="“" fill="“”"> </rect>
  </mask>
  <rect width="“" height="“" y="“" fill="“#264653”" mask="“" url> </rect>
</svg>

蒙版内的元素需要一个填充值。那应该是什么?我们会根据选择的填充值(颜色)看到完全不同的结果。

白色填充

如果我们为填充使用白色值,那么我们就会得到:

现在,我们的大矩形与掩蔽矩形相同。不完全是我们想要的。

黑色填充

如果我们使用黑色值,则看起来像这样:

我们什么都没有。那是因为充满黑色的东西变得不可见。我们使用白色和黑色填充物控制面具的可见性。虚线作为视觉辅助,以引用无形区域的尺寸。

灰色填充

现在,让我们使用白色和黑色之间的东西,说格雷:

它既不是完全不透明的也不是坚固的;这是透明的。因此,现在我们知道我们可以使用与白色和黑色值不同的东西来控制这里的“可见度”,这是一个很好的技巧,可以保留在我们的后口袋中。

最后一点

到目前为止,这是我们涵盖和了解的有关面具的知识:

  • 内部的元素控制蒙版区域的尺寸。
  • 我们可以使蒙版区域的内容可见,看不见或透明。

我们只为掩模使用了一种形状,但是与任何通用HTML标签一样,我们可以根据需要在其中嵌套尽可能多的子元素。实际上,实现我们想要的目标的诀窍是使用两个SVG 元素。我们必须将它们堆放在另一个上方:

 <svg viewbox="“" width="“" height="“">
  <mask>
    <rect width="“" height="“" y="“" fill="“"> </rect>
    <rect width="“" height="“" y="“" fill="“"> </rect>
  </mask>
  <rect width="“" height="“" y="“" fill="“#264653”" mask="“" url> </rect>
</svg>

我们的掩蔽矩形之一充满了白色。另一个充满黑色。即使我们知道规则,也要尝试一下可能性。

 <mask>
  <rect width="“" height="“" y="“" fill="“" black> </rect>
  <rect width="“" height="“" y="“" fill="“" white> </rect>
</mask>

是最大元素的维度,最大元素充满了黑色。这意味着该区域下的一切都是看不见的。较小的矩形下的一切都是可见的。

现在让我们对黑色矩形顶部的东西进行翻转:

 <mask>
  <rect width="“" height="“" y="“" fill="“" white> </rect>
  <rect width="“" height="“" y="“" fill="“" black> </rect>
</mask>

这就是我们想要的!

最大的白色矩形下的所有内容都是可见的,但是较小的黑色矩形在其顶部(在Z轴上更靠近我们),掩盖了这一部分。

生成口罩

现在我们知道了我们必须做什么,我们可以相对轻松地创建口罩。这类似于我们首先生成彩色矩形的方式 - 我们创建了一个辅助环,在其中创建掩码和两个矩形。

这次,我们没有将矩形直接附加到SVG上,而是将其附加到蒙版:

 data.foreach((D:DATASETENTRY,index:number)=> {
  constmask:svgMaskElement = svgmaskelement; createSvgnSelement('mask');

  const rectdimension:number = remapdatasetValuetosvgdimension(d.Value);
  const rect:svgrectelement = keresvgnSelement('rect')作为svgrectelement;

  rect.setAttribute('width',`$ {rectDimension}`);
  // ...设置其余属性...

  mask.setAttribute('id',`maskw $ {rectDimension.tofixed()}`);

  mask.appendchild(rect);

  // ...创建和设置较小矩形的属性...

  svg.appendchild(蒙版);
});

data.foreach((D:DATASETENTRY,index:number)=> {
    // ...我们的代码生成彩色矩形...
});

我们可以将索引用作面具的ID,但这似乎是一个更可读的选择,至少对我而言:

 mask.setAttribute('id',`maskw $ {rectDimension.tofixed()}`); // MaskW320,MASW240,...

至于在面罩中添加较小的矩形,我们可以轻松访问所需的值,因为我们以前订购了从最高到最低的矩形值。这意味着循环中的下一个元素是较小的矩形,我们应该引用一个元素。我们可以通过其索引来做到这一点。

 // ...上一部分我们创建了蒙版和矩形...

const smalleRectIndex =索引1;

//当我们处于最小时,没有下一个
if(data [smalleRectIndex]!== undefined){
  const smalleRectDimension:number = remapdatasetValuetosvgdimension(
    数据[SmalleRectIndex]
  );
  const smallErcret:svgrectelement = createSvgnSelement(
    'rect'
  )作为svgrectement;

  // ...设置矩形属性...

  mask.AppendChild(SmallerRect);
}

svg.appendchild(蒙版);

剩下的就是将蒙版属性添加到我们原始循环中的彩色矩形中。它应该匹配我们选择的格式:

 rect.setAttribute('mask',`url(#baskw $ {rectdimension.tofixed()})`); // maskW320,maskW240,...

最终结果

我们完成了!我们已经成功制作了一个由嵌套正方形制成的图表。它甚至在鼠标悬停上分开。而所需的只是使用元素来绘制每个正方形的切口区域的SVG。

以上是如何使用口罩创建嵌套正方形的动画图表的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
模拟鼠标运动模拟鼠标运动Apr 22, 2025 am 11:45 AM

如果您曾经在现场演讲或课程中必须显示一个互动动画,那么您可能知道它并不总是那么容易与您的幻灯片进行互动

通过Astro Action和Fuse.js为搜索提供动力通过Astro Action和Fuse.js为搜索提供动力Apr 22, 2025 am 11:41 AM

对于Astro,我们可以在构建过程中生成大部分网站,但是有一小部分服务器端代码可以使用Fuse.js之类的搜索功能来处理搜索功能。在此演示中,我们将使用保险丝搜索一组个人“书签”

未定义:第三个布尔值未定义:第三个布尔值Apr 22, 2025 am 11:38 AM

我想在我的一个项目中实现一条通知消息,类似于您在保存文档时在Google文档中看到的信息。换句话说,一个

捍卫三元声明捍卫三元声明Apr 22, 2025 am 11:25 AM

几个月前,我正在使用黑客新闻(就像一个人一样),并且遇到了一篇(现已删除的)文章,内容涉及不使用if语句。如果您是这个想法的新手(就像我

使用网络语音API进行多语言翻译使用网络语音API进行多语言翻译Apr 22, 2025 am 11:23 AM

自科幻小说以来,我们就幻想着与我们交谈的机器。今天这很普遍。即便如此,制造的技术

JetPack Gutenberg块JetPack Gutenberg块Apr 22, 2025 am 11:20 AM

我记得当古腾堡被释放到核心时,因为那天我在WordCamp我们。现在已经过去了几个月,所以我想我们越来越多的人

在VUE中创建可重复使用的分页组件在VUE中创建可重复使用的分页组件Apr 22, 2025 am 11:17 AM

大多数Web应用程序背后的想法是从数据库中获取数据,并以最佳方式将其呈现给用户。当我们处理数据时

使用'盒子阴影”和剪辑路径一起使用'盒子阴影”和剪辑路径一起Apr 22, 2025 am 11:13 AM

让我们对您可以做一些有意义的事情做一些逐步的情况,但是您仍然可以用CSS欺骗来完成它。在这个

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器