切图

2023-12-04 20:02:46

当 UI 不给切图，自己动手写一个切图！

身为前端开发者，我们都听过那句让无数 UI 设计师 PTSD 的名言：“我前端王境泽就是写代码猝死，死外面从这里跳下去，也不用你们一点切图！”

当 UI 真正不给切图时，我们该怎么办？难道真的要“从这里跳下去”？当然不是！自己写一个切图并非难事，而且相比之下更加灵活、可控。

如何自己写切图？

方法一：HTML 和 CSS

最简单的方法是使用 HTML 和 CSS 创建切图。创建一个 HTML 文件，使用 <div> 元素定义切图区域，再用 CSS 设置区域样式即可。

<!DOCTYPE html>
<html>
<head>
  <style>
    .cut-image {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="cut-image"></div>
</body>
</html>

方法二：SVG

SVG（可缩放矢量图形）是一种基于 XML 的矢量图形格式，可以创建可缩放、分辨率无关的图像。对于跨设备和屏幕尺寸使用的切图，SVG 是极佳选择。

<svg width="200" height="200">
  <rect width="200" height="200" fill="red" />
</svg>

方法三：JavaScript

如果需要动态生成切图，可以使用 JavaScript。例如，我们可以创建一个根据给定宽度和高度生成切图的函数。

function createCutImage(width, height) {
  var canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;

  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, width, height);

  return canvas.toDataURL();
}