zrender & svg

window.prompt

double click
// https://cdn.xgqfrms.xyz/svg/zrender/zrender.min.js

window.onload = () => {

  const log = console.log;

  const default_pts = {

    renderer: 'canavs',// 渲染方式，支持：'canavs'、'svg'、'vml'

    devicePixelRatio: 2, // 画布大小与容器大小之比，仅当 renderer 为 'canvas' 时有效。

    width: 'auto',// 画布宽度，设为 'auto' 则根据 devicePixelRatio 与容器宽度自动计算。

    height: 'auto', // 画布高度，设为 'auto' 则根据 devicePixelRatio 与容器高度自动计算。

  };

  const opts = {

    renderer: 'svg',

    width: 400,

    height: 400,// 画布大小

  };

  const zr = zrender.init(document.getElementById('app'), opts);

  // log(`zr`, zr);

  const version = zrender.version;

  log(`zr version`, version);

  // version 4.1.2

  let w = zr.getWidth();

  let h = zr.getHeight();

  log(`w / h`, w, h);

  let text = null;

  const boundingRect = new zrender.Rect({

    shape: {

      r: 0,

      // r: 1,

      // r: 10,

      // r: [1],

      // cx: 0,

      // cy: 0,

      x: 100,

      y: 100,

      // x: 0,

      // y: 0,

      width: 200,

      height: 200,

    },

    style: {

      fill: '#0f0',

      // fill: 'none',

      stroke: '#666',

    },

    color: "abc",

  });

  // boundingRect.on(`click`, function(e) {

  //   // log(`click e`, e);

  //   log(`click this`, this,);

  //   log(`click this.color`, this.color);

  //   this.color = "xyz";

  //   log(`click new this.color`, this.color);

  //   // boundingRect

  // }, boundingRect);

  boundingRect.on(`dblclick`, function(e) {

    // log(`click e`, e);

    log(`dblclick this`, this);

    // log(`dblclick this.style`, this.style);

    let rect = this.getBoundingRect();

    log(`dblclick rect\n%c ${JSON.stringify(rect, null, 4)}`, `color: #0f0`);

    const x = rect.width / 2 + rect.x;

    const y = rect.height / 2 + rect.y;

    log(`x, y`, x, y);

    // let msg = window.confirm(`请输入选区的名称？`);

    let msg = window.prompt(`请输入选区的名称？`);

    // prompt([string message], [string defaultValue]);

    if(text){

      zr.remove(text);

      // zr.clear(text);

    }

    log(`text`, text);

    text = new zrender.Text({

      style: {

          text: msg || 'A 区',

          textAlign: 'center',

          textVerticalAlign: 'middle',

          fontSize: 18,

          fontFamily: 'Lato',

          fontWeight: 'bolder',

          textFill: '#f0f',

          blend: 'lighten',

      },

      position: [x, y],

    });

    log(`text`, text);

    zr.add(text);

  }, boundingRect);

  // boundingRect.on(`click`, (e) => {

  //   // log(`click e`, e);

  // log(`click this`, this);

  // this bind bug

  //   log(`click this`, boundingRect);

  //   // boundingRect

  // }, boundingRect);

  zr.add(boundingRect);

};
巴特西

zrender & svg

zrender & svg

window.prompt

最新文章

热门文章
