• 蓝紫集成开发

  const circ = await Lan.import('circ');
  var image = ... // load image         
  const cc = await circ(image, {
    maxradius : 20,
    maxdetail : 150,
  });

  参见示例程序：Afghan Girl。

• 第三方集成

  import {circ} from "https://ddzeb.com/lands/circ";
  var image = ... // load image         
  const cc = await circ(image, {
    maxradius : 20,
    maxdetail : 150,
  });

  const {circ} = await import("https://ddzeb.com/lands/circ");
  var image = ... // load image         
  const cc = await circ(image, {
    maxradius : 20,
    maxdetail : 150,
  });

Circle Packing 实际上就是用圆形进行填充。我们这里是用大小不同的圆来模拟图像细节，细节丰富的地方，圆的半径就会小一点，细节不多的地方，圆形就大一些。

其中的技术原理其实并不复杂，我们先随便找个地方（比如画面中央）生成两个紧挨着（相切）的半径最小的圆，它们相当于种子，然后再生成一个和它们相切的第三个圆，这个圆的半径根据其所覆盖的区域内的颜色分布来进行搜索，我们不希望一个圆覆盖太多细节。圆的颜色就取覆盖区域内的平均色即可。当我们不断重复这个过程，就把整个画面铺满了。

初始化一个 Circle Packing 对象，其中，source 为源图像，options 指定我们的算法选项：

• minradius：最小半径；
• maxradius：最大半径；
• maxdetail：最多覆盖多少细节。

这是 circ 函数返回对象的接口，它负责对源图像进行分析处理，处理过程中会抛出事件。该函数返回 true 时表示全部处理完毕。

生成一个圆的时候就会抛出该事件，我们需要处理该事件进行具体的渲染工作。传入参数 circle 有如下属性：

• x：圆心 x 坐标；
• y：圆心 y 坐标；
• r：半径；
• c：颜色 [r, g, b] 数组。