How to use the @antv/g.BBox function in @antv/g

To help you get started, we’ve selected a few @antv/g examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github antvis / G2Plot / src / plots / scatter / components / quadrant.ts View on Github external
public init() {
    const { xBaseline, yBaseline } = this.options;
    const coord = this.view.get('coord');
    // TODO: xBaseline和yBaseline支持百分比
    // 根据xBaseline和yBaseline分割象限
    const scales = this.view.get('scales');
    const xScale = scales[this.options.plotOptions.xField];
    const yScale = scales[this.options.plotOptions.yField];
    // 先进行x方向的分割
    let xRegion;
    if (xBaseline > xScale.min && xBaseline < xScale.max) {
      const ratio = (xBaseline - xScale.min) / (xScale.max - xScale.min);
      xRegion = [
        new BBox(coord.start.x, coord.end.y, coord.width * ratio, coord.height),
        new BBox(coord.start.x + coord.width * ratio, coord.end.y, coord.width * (1 - ratio), coord.height),
      ];
      const verticalLineData = {
        start: { x: coord.start.x + coord.width * ratio, y: coord.end.y },
        end: { x: coord.start.x + coord.width * ratio, y: coord.start.y },
      };
      this.lineData.push(verticalLineData);
    } else {
      xRegion = new BBox(coord.start.x, coord.start.y, coord.width, coord.height);
    }
    // 再进行y方向的分割
    if (yBaseline > yScale.min && yBaseline < yScale.max) {
      const ratio = (yBaseline - yScale.min) / (yScale.max - yScale.min);
      const horizontalLineData = {
        start: { x: coord.start.x, y: coord.end.y + coord.height * ratio },
        end: { x: coord.end.x, y: coord.end.y + coord.height * ratio },
github antvis / G2Plot / src / plots / pie / component / label / upgrade-label / index.ts View on Github external
labels.forEach((l, idx) => {
        const item = items[idx];
        const oldBox = l.getBBox();
        const newY = oldBox.y + (ry - rx) * Math.cos(Math.PI / 2 - item.angle);
        // 椭圆公式
        let newX = center.x + Math.sqrt(1 - Math.pow(newY - center.y, 2) / Math.pow(ry, 2)) * rx;
        if (_.isNaN(newX)) {
          newX = oldBox.x - DEFAULT_OFFSET;
        }
        // offset between label-text and label-line
        const newBox = new BBox(newX, newY, oldBox.width, oldBox.height);
        l.attr('x', newX);
        l.attr('y', newY);
        l.set('box', newBox);
      });
    }
github antvis / G2Plot / src / plots / scatter / components / quadrant.ts View on Github external
const yScale = scales[this.options.plotOptions.yField];
    // 先进行x方向的分割
    let xRegion;
    if (xBaseline > xScale.min && xBaseline < xScale.max) {
      const ratio = (xBaseline - xScale.min) / (xScale.max - xScale.min);
      xRegion = [
        new BBox(coord.start.x, coord.end.y, coord.width * ratio, coord.height),
        new BBox(coord.start.x + coord.width * ratio, coord.end.y, coord.width * (1 - ratio), coord.height),
      ];
      const verticalLineData = {
        start: { x: coord.start.x + coord.width * ratio, y: coord.end.y },
        end: { x: coord.start.x + coord.width * ratio, y: coord.start.y },
      };
      this.lineData.push(verticalLineData);
    } else {
      xRegion = new BBox(coord.start.x, coord.start.y, coord.width, coord.height);
    }
    // 再进行y方向的分割
    if (yBaseline > yScale.min && yBaseline < yScale.max) {
      const ratio = (yBaseline - yScale.min) / (yScale.max - yScale.min);
      const horizontalLineData = {
        start: { x: coord.start.x, y: coord.end.y + coord.height * ratio },
        end: { x: coord.end.x, y: coord.end.y + coord.height * ratio },
      };
      this.lineData.push(horizontalLineData);
      each(xRegion, (region, index) => {
        const lastName = ['left', 'right'];
        const upper = {
          name: xRegion.length > 1 ? `top-${lastName[index]}` : 'top',
          bbox: new BBox(region.minX, region.minY, region.width, region.height * ratio),
        };
        this.regionData.push(upper);
github antvis / G2Plot / src / plots / pie / component / label / upgrade-label / index.ts View on Github external
labels.forEach((l, idx) => {
        const oldBox = l.getBBox();
        const newY = yPos - oldBox.height;
        // 椭圆公式
        let newX = center.x - Math.sqrt(1 - Math.pow(newY - center.y, 2) / Math.pow(ry, 2)) * rx;
        if (_.isNaN(newX)) {
          const prevLabel = labels[idx - 1];
          newX = prevLabel ? prevLabel.getBBox().x + 8 : oldBox.x - DEFAULT_OFFSET;
        }
        // 不能进入第一象限
        newX = Math.min(newX, center.x);
        // offset between label-text and label-line
        const newBox = new BBox(newX, newY, oldBox.width, oldBox.height);
        l.attr('x', newX);
        l.attr('y', newY);
        l.set('box', newBox);
        yPos = newBox.minY;
      });
    } else {
github antvis / G2Plot / src / combo-plots / util / globalLegend.ts View on Github external
autoWrap: true, // 图例项是否自动换行
    itemMarginBottom: 4, // 图例项之间的底部间距
    backgroundPadding: 0, // 背景内边距
    maxLength: width, // 图例的最大高度或者宽度
  };
  const legend = new Legend.CanvasCategory(legendCfg as any);
  legendLayout(width, height, legend, position);
  addLegendInteraction(legend);
  /** return legend as a padding component */
  const bbox = legend.get('itemsGroup').getBBox();
  let paddingBbox;
  // merge legend inner padding
  const { innerPadding } = legendTheme;

  if (positions[0] === 'left') {
    paddingBbox = new BBox(legend.get('x') + innerPadding[3], legend.get('y'), bbox.width, bbox.height);
  } else if (positions[0] === 'right') {
    paddingBbox = new BBox(legend.get('x') - innerPadding[1], legend.get('y'), bbox.width, bbox.height);
  } else if (positions[0] === 'top') {
    paddingBbox = new BBox(legend.get('x'), legend.get('y') + innerPadding[0], bbox.width, bbox.height);
  } else if (positions[0] === 'bottom') {
    paddingBbox = new BBox(legend.get('x'), legend.get('y') - innerPadding[2], bbox.width, bbox.height);
  }
  return {
    position: positions[0],
    getBBox: () => {
      return paddingBbox;
    },
  };
}
github antvis / G2Plot / src / base / Layer-refactor.ts View on Github external
private getLayerBBox() {
    return new G.BBox(this.x, this.y, this.width, this.height);
  }
github antvis / G2 / packages / component / src / legend / category / canvas.ts View on Github external
private _mergeBBox(bboxes: BBox[]) {
    let minX = Infinity;
    let maxX = -Infinity;
    let minY = Infinity;
    let maxY = -Infinity;
    each(bboxes, (bbox) => {
      const box = bbox;
      minX = Math.min(box.minX, minX);
      maxX = Math.max(box.maxX, maxX);
      minY = Math.min(box.minY, minY);
      maxY = Math.max(box.maxY, maxY);
    });
    return new BBox(minX, minY, maxX - minX, maxY - minY);
  }
}
github antvis / G2Plot / src / base / layer.ts View on Github external
private getLayerBBox() {
    return new G.BBox(this.x, this.y, this.width, this.height);
  }
github antvis / G2Plot / src / plots / scatter / components / quadrant.ts View on Github external
each(xRegion, (region, index) => {
        const lastName = ['left', 'right'];
        const upper = {
          name: xRegion.length > 1 ? `top-${lastName[index]}` : 'top',
          bbox: new BBox(region.minX, region.minY, region.width, region.height * ratio),
        };
        this.regionData.push(upper);
        const lower = {
          name: xRegion.length > 1 ? `bottom-${lastName[index]}` : 'bottom',
          bbox: new BBox(region.minX, region.minY + region.height * ratio, region.width, region.height * (1 - ratio)),
        };
        this.regionData.push(lower);
      });
    } else if (xRegion.length === 2) {