JL 2D Engine

2d 模型引擎

例子:

import { Engine, Model } from 'jl-engine';

/**
 * 初始化引擎
 */
const engine = Engine.init(
  document.getElementById('App'),
  {
    imageBaseUrl: 'path/to/bucket/',
    backgroundColor: '#ace'
  }
)

/**
 * 添加模型
 */
const model = new Model(modelData).addTo(engine, [100, 100])

/**
 * 修改模型属性
 */
model.attr({
  position: [200, 200],
  rotation: 90, //角度
  scale: 0.5 //缩放以模型中心为基准
})

数据示例

/*modelData*/
const modelData = {
  name: '9527-yly-test',
  shapeList: [
    {
      type: 'Line',
      basic: {
        points: [
          [0, 32],
          [298, 254],
        ],
      },
      style: { fill: '#ffffff00', stroke: '#000000', opacity: 1, lineWidth: 1 },
      common: { z: 0 },
    },
    {
      type: 'Polyline',
      basic: {
        points: [
          [88, 291],
          [416, 72],
          [522, 324],
          [269, 477],
          [303, 55],
          [405, 250],
          [212, 381],
          [149, 381],
        ],
        rotation: 0,
      },
      style: { fill: '#ffffff00', stroke: '#000000', opacity: 1, lineWidth: 1 },
      common: { z: 0 },
    },
  ],
}

/* mapData */
const mapData = {
  modelList: [
    {
      position: [0, 0],
      model: modelData,
    },
    {
      position: [400, 400],
      rotation: 90,
      model: modelData,
    },
    {
      position: [0, 400],
      scale: 0.3,
      model: modelData,
    },
    {
      position: [400, 0],
      model: modelData,
    },
  ],
}