Использование SVG

2024-01-10

SVGUtils — это набор функций и классов для упрощения манипуляций SVG для визуальных элементов Power BI.

Установка

Чтобы установить пакет, выполните следующую команду в каталоге с текущим визуальным элементом:

npm install powerbi-visuals-utils-svgutils --save

CssConstants

Модуль CssConstants предоставляет специальную функцию и интерфейс для работы с селекторами классов.

Модуль powerbi.extensibility.utils.svg.CssConstants предоставляет следующую функцию и интерфейс:

ClassAndSelector

Этот интерфейс описывает общие свойства селектора классов.

interface ClassAndSelector {
  class: string;
  selector: string;
}

createClassAndSelector

Эта функция создает экземпляр ClassAndSelector с именем класса.

function createClassAndSelector(className: string): ClassAndSelector;

Пример:

import { CssConstants } from "powerbi-visuals-utils-svgutils";
import createClassAndSelector = CssConstants.createClassAndSelector;
import ClassAndSelector = CssConstants.ClassAndSelector;

let divSelector: ClassAndSelector = createClassAndSelector("sample-block");

divSelector.selector === ".sample-block"; // returns: true
divSelector.class === "sample-block"; // returns: true

манипуляция

Этот manipulation метод предоставляет некоторые специальные функции для создания строк, которые можно использовать со свойством преобразования SVG.

Модуль предоставляет следующие функции:

translate

Эта функция создает строку перевода для использования со свойством преобразования SVG.

function translate(x: number, y: number): string;

Пример:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.translate(100, 100);

// returns: translate(100,100)

translateXWithPixels

Эта функция создает строку translateX для использования со свойством преобразования SVG.

function translateXWithPixels(x: number): string;

Пример:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.translateXWithPixels(100);

// returns: translateX(100px)

translateWithPixels

Эта функция создает строку перевода для использования со свойством преобразования SVG.

function translateWithPixels(x: number, y: number): string;

Пример:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.translateWithPixels(100, 100);

// returns: translate(100px,100px)

translateAndRotate

Эта функция создает строку преобразования преобразования для использования со свойством преобразования SVG.

function translateAndRotate(
  x: number,
  y: number,
  px: number,
  py: number,
  angle: number
): string;

Пример:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.translateAndRotate(100, 100, 50, 50, 35);

// returns: translate(100,100) rotate(35,50,50)

scale

Эта функция создает строку масштабирования для использования в свойстве преобразования CSS.

function scale(scale: number): string;

Пример:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.scale(50);

// returns: scale(50)

преобразованиеOrigin

Эта функция создает строку источника преобразования для использования в свойстве преобразования преобразования CSS.

function transformOrigin(xOffset: string, yOffset: string): string;

Пример:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.transformOrigin(5, 5);

// returns: 5 5

flushAllD3Transitions

Эта функция заставляет каждый переход D3 завершить.

function flushAllD3Transitions(): void;

Пример:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.flushAllD3Transitions();

// forces every transition of D3 to complete

parseTranslateTransform

Эта функция анализирует строку преобразования со значением "translate(x,y)".

function parseTranslateTransform(input: string): { x: string; y: string };

Пример:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.parseTranslateTransform("translate(100px,100px)");

// returns: { "x":"100px", "y":"100px" }

createArrow

Эта функция создает стрелку.

function createArrow(
  width: number,
  height: number,
  rotate: number
): { path: string; transform: string };

Пример:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.createArrow(10, 20, 5);

/* returns: {
    "path": "M0 0L0 20L10 10 Z",
    "transform": "rotate(5 5 10)"
}*/

Rect

Модуль Rect предоставляет некоторые специальные функции для управления прямоугольниками.

Модуль предоставляет следующие функции:

getOffset

Эта функция возвращает смещение прямоугольника.

function getOffset(rect: IRect): IPoint;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.getOffset({ left: 25, top: 25, width: 100, height: 100 });

/* returns: {
    x: 25,
    y: 25
}*/

getSize

Эта функция возвращает размер прямоугольника.

function getSize(rect: IRect): ISize;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.getSize({ left: 25, top: 25, width: 100, height: 100 });

/* returns: {
    width: 100,
    height: 100
}*/

setSize

Эта функция изменяет размер прямоугольника.

function setSize(rect: IRect, value: ISize): void;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

let rectangle = { left: 25, top: 25, width: 100, height: 100 };

Rect.setSize(rectangle, { width: 250, height: 250 });

// rectangle === { left: 25, top: 25, width: 250, height: 250 }

right

Эта функция возвращает правое положение прямоугольника.

function right(rect: IRect): number;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.right({ left: 25, top: 25, width: 100, height: 100 });

// returns: 125

Снизу

Эта функция возвращает нижнее положение прямоугольника.

function bottom(rect: IRect): number;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.bottom({ left: 25, top: 25, width: 100, height: 100 });

// returns: 125

topLeft

Эта функция возвращает верхнюю левую позицию прямоугольника.

function topLeft(rect: IRect): IPoint;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.topLeft({ left: 25, top: 25, width: 100, height: 100 });

// returns: { x: 25, y: 25 }

topRight

Эта функция возвращает правое верхнее положение прямоугольника.

function topRight(rect: IRect): IPoint;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.topRight({ left: 25, top: 25, width: 100, height: 100 });

// returns: { x: 125, y: 25 }

bottomLeft

Эта функция возвращает левое нижнее положение прямоугольника.

function bottomLeft(rect: IRect): IPoint;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.bottomLeft({ left: 25, top: 25, width: 100, height: 100 });

// returns: { x: 25, y: 125 }

нижний Райт

Эта функция возвращает правое нижнее положение прямоугольника.

function bottomRight(rect: IRect): IPoint;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.bottomRight({ left: 25, top: 25, width: 100, height: 100 });

// returns: { x: 125, y: 125 }

clone

Эта функция создает копию прямоугольника.

function clone(rect: IRect): IRect;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.clone({ left: 25, top: 25, width: 100, height: 100 });

/* returns: {
    left: 25, top: 25, width: 100, height: 100}
*/

toString

Эта функция преобразует прямоугольник в строку.

function toString(rect: IRect): string;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.toString({ left: 25, top: 25, width: 100, height: 100 });

// returns: {left:25, top:25, width:100, height:100}

offset

Эта функция применяет смещение к прямоугольнику.

function offset(rect: IRect, offsetX: number, offsetY: number): IRect;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.offset({ left: 25, top: 25, width: 100, height: 100 }, 50, 50);

/* returns: {
    left: 75,
    top: 75,
    width: 100,
    height: 100
}*/

add

Эта функция добавляет первый прямоугольник во второй прямоугольник.

function add(rect: IRect, rect2: IRect): IRect;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.add(
  { left: 25, top: 25, width: 100, height: 100 },
  { left: 50, top: 50, width: 75, height: 75 }
);

/* returns: {
    left: 75,
    top: 75,
    height: 175,
    width: 175
}*/

getClosestPoint

Эта функция возвращает ближайшую точку прямоугольника к определенной точке.

function getClosestPoint(rect: IRect, x: number, y: number): IPoint;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.getClosestPoint({ left: 0, top: 0, width: 100, height: 100 }, 50, 50);

/* returns: {
    x: 50,
    y: 50
}*/

равно

Эта функция сравнивает прямоугольники и возвращает значение true, если они одинаковы.

function equal(rect1: IRect, rect2: IRect): boolean;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.equal(
  { left: 0, top: 0, width: 100, height: 100 },
  { left: 50, top: 50, width: 100, height: 100 }
);

// returns: false

equalWithPrecision

Эта функция сравнивает прямоугольники, учитывая точность значений.

function equalWithPrecision(rect1: IRect, rect2: IRect): boolean;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.equalWithPrecision(
  { left: 0, top: 0, width: 100, height: 100 },
  { left: 50, top: 50, width: 100, height: 100 }
);

// returns: false

isEmpty

Эта функция проверяет, пуст ли прямоугольник.

function isEmpty(rect: IRect): boolean;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.isEmpty({ left: 0, top: 0, width: 0, height: 0 });

// returns: true

containsPoint

Эта функция проверяет, содержит ли прямоугольник определенную точку.

function containsPoint(rect: IRect, point: IPoint): boolean;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.containsPoint(
  { left: 0, top: 0, width: 100, height: 100 },
  { x: 50, y: 50 }
);

// returns: true

isIntersecting

Эта функция проверяет, пересекаются ли прямоугольники.

function isIntersecting(rect1: IRect, rect2: IRect): boolean;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.isIntersecting(
  { left: 0, top: 0, width: 100, height: 100 },
  { left: 0, top: 0, width: 50, height: 50 }
);

// returns: true

пересечение

Эта функция возвращает пересечение прямоугольников.

function intersect(rect1: IRect, rect2: IRect): IRect;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.intersect(
  { left: 0, top: 0, width: 100, height: 100 },
  { left: 0, top: 0, width: 50, height: 50 }
);

/* returns: {
    left: 0,
    top: 0,
    width: 50,
    height: 50
}*/

combine

Эта функция объединяет прямоугольники.

function combine(rect1: IRect, rect2: IRect): IRect;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.combine(
  { left: 0, top: 0, width: 100, height: 100 },
  { left: 0, top: 0, width: 50, height: 120 }
);

/* returns: {
    left: 0,
    top: 0,
    width: 100,
    height: 120
}*/

getCentroid

Эта функция возвращает центральную точку прямоугольника.

function getCentroid(rect: IRect): IPoint;

Пример:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.getCentroid({ left: 0, top: 0, width: 100, height: 100 });

/* returns: {
    x: 50,
    y: 50
}*/

Поделиться через

Использование SVG

Установка

CssConstants

ClassAndSelector

createClassAndSelector

манипуляция

translate

translateXWithPixels

translateWithPixels

translateAndRotate

scale

преобразованиеOrigin

flushAllD3Transitions

parseTranslateTransform

createArrow

Rect

getOffset

getSize

setSize

right

Снизу

topLeft

topRight

bottomLeft

нижний Райт

clone

toString

offset

add

getClosestPoint

равно

equalWithPrecision

isEmpty

containsPoint

isIntersecting

пересечение

combine

getCentroid

Обратная связь

Дополнительные ресурсы