zrender & svg

zrender & svg

window.prompt

double click

https://codepen.io/xgqfrms/pen/jOEGNvw

// 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);

};

---