seam-render v1.2.0

SeamRender 骨位生成工具

描述

给定一个 path 路径和 n 个图片，以及对应骨位参数和 n 层子参数，生成图片根据 path 路径变形后的，强光混合模式图像。 打包出 commonjs 库.cjs 和 es 库 mjs,位于 dist 文件夹，以供调用。

技术栈

• webgl
• glsl
• paper.js
• typescript
• rollup

定义

• X 方向：path 路径的垂线方向，图片的纵向
• Y 方向：path 路径的路径方向，图片的横向

示例

// 创建实例，此时会创建gl实例和着色器程序
// gl上下文在不同的浏览器和硬件环境中存在上限一般为16个
// 此处使用需要注意实例数量，一般情况下使用单例即可
const sr = new SeamRender();
console.log(sr);
// 第一步 设置骨位参数
sr.setOptions(
  {
    flipX: 1,
    flipY: 1,
    scaleX: 0.5,
    scaleY: 1,
    offsetX: 0,
    offsetY: 0,
    headExtensionLine: 500,
    tailExtensionLine: 500,
  },
  [
    {
      img: document.getElementById('img3'),
      imgW: img.width,
      imgH: img.height,
      flipX: 1,
      flipY: 1,
      scaleX: 1,
      scaleY: 1,
      offsetX: 0,
      offsetY: 0,
      repeatMode: 2,
      SeamSpacing: 0,
      visible: false,
    },
    {
      img: document.getElementById('img'),
      imgW: img.width,
      imgH: img.height,
      flipX: 1,
      flipY: 1,
      scaleX: 0.5,
      scaleY: 1,
      offsetX: 75,
      offsetY: 0,
      repeatMode: 1,
      SeamSpacing: 0,
      visible: true,
    },
  ],
);
const svgpath =
  'M10795.63,-13111.763l-4.784,-2.782l-4.439,-2.891l-3.968,-2.873l-3.431,-2.784l-3.119,-2.868l-2.708,-2.834l-2.503,-3.005l-2.081,-2.898l-1.844,-3.028l-1.445,-2.863l-1.171,-2.879l-0.958,-3.049l-0.872,-3.749l-0.727,-4.455l-0.723,-6.523l-0.44,-6.07l-0.15,-5.17l0.121,-4.163l0.34,-3.533l0.559,-3.283l0.793,-3.189l1.046,-3.113l1.165,-2.698l1.384,-2.562l1.611,-2.393l1.736,-2.076l2.286,-2.205l5.243,-4.235l2.968,-2.483l2.101,-2.063l1.667,-1.993l1.464,-2.151l1.229,-2.286l0.961,-2.393l0.614,-2.254l0.434,-2.848l0.225,-4.18l0.017,-6.322l-0.505,-15.152l-0.309,-12.808l-0.163,-15.069l-0.193,-15.073l-0.414,-15.074l-0.514,-15.057l-0.459,-15.554';
// 第二步 根据路径 创建网格数据
sr.buildMesh(svgpath);
// 绘制
sr.draw();
const res = sr.gl.canvas.toDataURL();
document.getElementById('imgres').src = res;

测试

yarn add -g anywhere
yarn dev
anywhere
// 浏览器中选择test文件夹

构建

yarn build