Geekly articles weekly

CSS Paint API

根据该材料的作者（我们今天将要翻译的翻译）， CSS Paint API是一种非常有趣的技术。 此外，我们不仅在谈论它的当前功能，而且还谈论它所呈现的现象，并且它的出现标志着CSS世界非常显着变化的开始。 在这里，我们将讨论CSS Paint API及其出现的原因，并讨论如何使用它。



什么是CSS Paint API？


有问题的API只是CSS Houdini项目中正在开发的新规范集的一小部分。 简要描述此项目，其实质归结为以下事实：它为开发人员提供了对内部CSS机制的低级访问。

CSS Paint API使您可以在正常情况下（例如，使用描述某种图像的特定值）来完成工作的情况下调用paint()函数。 一个常见的示例是background-image属性，在使用该属性时，可以使用url()函数将系统的链接传递给图像文件：

 area { background-image: url('assets/myimage.jpg'); }

CSS Paint API允许您调用paint()函数paint()而不是类似的函数paint() ，并将其传递给JavaScript描述的所谓的工作集。 vorklet可以看作是一段代码，它允许开发人员以编程方式绘制几乎他想要的任何东西。 并且，由于我们在谈论JavaScript，因此可以使图像动态化。 就其本身而言，该API与HTML5 Canvas API非常相似，现在我们将讨论其所有工作原理。

CSS Paint API功能


如果现在您感觉所有这些听起来不错，但是看起来很复杂，并且您觉得使用普通图像感到很自在，请记住，普通图像不会随着新技术的出现而失去其意义。 像通常一样使用它们是完全正常的。 新事物已经出现并且可能很有前途的事实并不意味着每个人都立即需要使用新事物来解决所有现有问题。 但是，普通图像是静态的。 新的API吸引了创建动态图像的想法。

让我们考虑一下CSS函数linear-gradient 。 这个东西非常强大。 以这个为例。 但是，您是否可以想象，如果不必使用大量背景图像，那么获得重叠层所形成的相同效果会容易得多吗？ 但是，这不是唯一的重点。 如果深入研究CSS Paint API，您可以了解在程序执行期间如何创建此类图像，这可能非常有用（事实上，这是我们计划在此处进行的操作）。

圆锥曲线 CSS函数呢？ 可以说，没有polyfill的浏览器尚不支持它。 使用新的API，您可以创建圆锥形渐变，调整其参数，这与规范中的没有什么特别的不同。 所有这些意味着在实践中，可以使用新的API创建自己的本机polyfill。 这真是太好了。

请记住，所有这些都是称为CSS Houdini的一大堆功能的一部分。 项目文档对此的说明是这样的：“ CSS-TAG Houdini工作组（CSS Houdini）的目标是共同开发一种机制，以打破网页样式和布局布局技术的奥秘。”

听起来不错吧？ 而且，实际上，这些新机制旨在允许开发人员扩展CSS本身的功能，从而为他们提供更好的样式工具，跨浏览器支持以及创建polyfill的能力。

新技术的标准化过程可能需要一些时间。 首先，对新的CSS功能提出了建议。 接下来-编写规范，发生其他过程。 结果，浏览器制造商正在实施新的规范。 而且，由于开发人员常常迫不及待地希望尽快开始使用新功能，因此他们必须考虑到以下事实：旧版浏览器可能不支持创新，并且如果某些规范尚未完全实现，则它可能会在开发过程中发展，认真转变。 也许没有什么可谈谈在不同浏览器中实现不同技术的典型细微差别。 Houdini项目在缓解这些问题方面可以走得很远，这使我们能够自行开发浏览器功能，使用它并冷静地等待浏览器制造商实现某些功能。 这是有关此主题的一些材料。 第一个致力于Houdini的优势， 第二个则是利用该项目的功能来创建复杂的动画。

浏览器对CSS Paint API的支持


我今天可以使用CSS Paint API吗？ 尽管应该指出的是，并非所有浏览器都支持该技术，但我们可以对这个问题给出肯定的答案。 要获取此API的支持信息，可以使用caniuse.com资源。


各种浏览器对CSS Paint API的支持（2018年7月）

如您所见，该API到目前为止仅支持Chrome。 但是，尽管如此，让我们谈谈如何使用它。 我们将介绍使新API工作所需的软件构造。 这包括新的CSS功能和一些最近的JavaScript机制。 我们的示例将分为三个步骤。

步骤＃1：CSS


回想一下，使用CSS Paint API创建图像时，小部件是JS代码的片段。 因此，对于初学者来说，我们需要给工作件起一个名字，并在CSS中对其进行调用。 awesomePattern称之为awesomePattern 。 结果，CSS将如下所示：

 section { background-image: url('fallback.png'); background-image: paint(awesomePattern); };

初步的准备工作已经完成，但是在我们的示例其余部分准备就绪之前，所有这些都将无法进行。

步骤2：JavaScript


现在我们需要使用JS描述工作表。 这里显示了如何在主脚本中加载另一个实现我们所需功能的脚本。

 CSS.paintWorklet.addModule('patternWorklet.js');

在此阶段，什么也没有发生，因为最有趣的是隐藏在patternWorklet.js文件中。

在patternWorklet.js文件中patternWorklet.js我们需要注册vorklet的类：

 registerPaint('awesomePattern', Shape);

在这里，我们调用registerPaint()函数并将其传递给我们所认为的工作集，在本例中为awesomePattern 。 另外，我们向该函数传递指向将要编写的类的链接，在本例中为Shape 。 必须在相应类的声明之后添加此命令。 在声明和使用类时，您不能依靠某种机制来引发函数声明。 必须先声明它，然后才能使用类。

接下来，我们将使用语法声明ECMAScript 2015类，并编写一个将绘制背景图像的类。 由于该类现在已注册为工人阶级，因此我们可以在其中使用一些特殊的机制，这些机制将在其中自动提供。

 class Shape { paint(ctx, geom, properties) {   ctx.strokeStyle = 'white';   ctx.lineWidth = 4;   ctx.beginPath();   ctx.arc( 200, 200, 50, 0, 2*Math.PI);   ctx.stroke();   ctx.closePath(); } }

paint()回调具有ctx ， geom和properties参数。 ctx参数与可以从<canvas>获得的2D渲染上下文相同。 好吧，几乎是一样的。 事实是<canvas>允许您读取像素数据，但是CSS Paint API不允许这样做。 尽管存在差异，但使用ctx可以使用与<canvas>一起使用的相同图形输出方法。 在此示例中，使用arc()函数，我们绘制了一个圆。

传递给arc()函数的前两个值是圆心的X和Y坐标，以像素为单位，相对于元素左上角的原点。 但是，我希望圆位于元素的中心。 为了解决这个问题， geom参数对我们很有用。 它提供对PaintSize对象的访问，该对象是图像设置的描述。 特别是，参照它，我们可以读取width和height参数，而这正是使圆心居中所需要的。

结果，我们得出以下代码：

 class Shape { paint(ctx, geom, properties) {     let x = geom.width/2;   let y = geom.height/2;   ctx.strokeStyle = 'white';   ctx.lineWidth = 4;   ctx.beginPath();   ctx.arc(x, y, 50, 0, 2*Math.PI);   ctx.stroke();   ctx.closePath();   } } registerPaint('awesomePattern', Shape);

您可以在CodePen上看到该示例的工作版本。 严格来说，这就是这段代码的输出。


使用CSS Paint API创建的圈子

所有这些都很好，但是我们的示例非常简单。 让我们绘制一个更有趣的东西，而不是通常的圆圈。 例如-这样的星号-css-tricks.com网站徽标。


使用CSS Paint API创建的星号

这是一个CodePen项目，您可以执行此操作。

当您查看此项目的JS代码时，请注意drawStar()方法以及使用<canvas>时使用的许多功能。

步骤＃3：自定义CSS属性


使用新技术，我们可以比绘制圆圈和星星走得更远。 我们可以看看自定义CSS属性 （变量）的强大功能。 顺便说一句，即使是他们自己，它们也非常有趣。 就我们而言，它们特别有用。

假设我们希望能够更改先前创建的徽标的大小或颜色。 这些参数可以以自定义属性的形式放置在CSS代码中，然后通过第三个参数在程序中使用它们，传递给paint()回调。 关于properties参数。

我们将--star-scale属性添加到我们的CSS代码中，该属性旨在控制图像的大小调整，并添加--star-color属性，该属性用于直接在CSS中组织徽标颜色的更改。 这是我们得到的：

 section { --star-scale: 2; --star-color: hsla(200, 50%, 50%, 1); background-image: paint(awesomePattern) };

现在回到工作布类。 在这里，我们需要与上述用户属性进行交互。 这是使用inputProperties方法完成的，该方法使我们可以访问所有CSS属性及其分配的值。

 static get inputProperties() { return ['--star-scale','--star-color']; }

现在，您可以在paint()方法中使用它们：

 const size = parseInt(properties.get('--shape-size').toString());

自然地，所获得的值可以在负责图像形成的代码中使用。 这导致以下事实：如果我们在CSS代码中更改--star-scale或--start-color ，则将立即影响图像的外观。

图片

自定义CSS属性对完成图像的影响

此功能是在我们上面提到的同一 CodePen项目中实现的 。

顺便说一句，值得注意的是，在使用新API时，所有与设置元素背景相关的常规CSS属性（例如background-size和background-repeat ）都将与以前一样工作。 他们没有失去相关性。

总结


CSS Paint API是一项非常强大的技术，其功能不仅限于创建背景图像。

想象一下，元素应该有一个特殊的边框，例如，一个不完全可见的边框，或者是一个双重边框。 也许要达到这种效果，通常使用伪元素::before或::after ，或者使用特殊配置的box-shadow 。 边框（以及更多）可以使用CSS Paint API和border-image属性实现。

CSS Paint API汇集了许多出色的功能，例如小部件，ECMAScript 2015类和<canvas> 。 此外，它为开发人员提供了基于JavaScript的图像管理软件。 例如，使用事件机制，您可以组织自定义属性的更新，这意味着图像本身，例如在此处完成的操作中， click事件开始在requestAnimationFrame函数中更新属性的过程，该函数使您可以在用户每次单击按钮时创建动画。 而且，甚至考虑了单击时的鼠标光标坐标。

乍一看，这一切似乎有些令人困惑，但让我们看一下我们可能会遇到的Houdini项目的其他部分：

  • CSS Layout API允许开发人员执行诸如display: layout('myCustomLayout') 。 一个典型的示例是创建自己的砖石样式的布局，但是此功能的使用范围要广泛得多。
  • CSS属性和值API允许您设置自定义属性类型。
  • CSS Animation Worklet API将动画处理操作推到了主流之外，这应该转化为完美流畅的动画。

结果，我们可以说，字面意思是，出现了为Web开发人员打开许多新机会的技术。 它们在浏览器中的标准化和实现过程不是很快，但是很有可能会对与网页样式相关的所有事物产生巨大影响。

亲爱的读者们！ 您发现CSS Paint API应用程序的哪些领域最有趣？

Source: https://habr.com/ru/post/zh-CN417075/

More articles:


All Articles