How to use the react-art.Transform function in react-art

To help you get started, we’ve selected a few react-art 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 circuitsim / circuit-simulator / src / ui / diagram / showComponentLabel.js View on Github external
const mid = midPoint(...dragPoints),
          dir = direction(...dragPoints),
          offsetDir = dir.perpendicular().invert(),
          offsetAngle = dir.angle(),
          offsetLength = CircuitComponent.width / 2,

          textWidth = CONTEXT.measureText(label).width,

          extraX = Math.sin(offsetAngle) * (textWidth / 2),
          extraY = -Math.cos(offsetAngle) * (FONT_SIZE / 2),

          offset = offsetDir.multiply(offsetLength).add(new Vector(extraX, extraY)),

          textPos = mid.add(offset),
          t = new Transform().moveTo(textPos.x, textPos.y - FONT_SIZE / 2);

    return (
      
    );
  };
github rosskhanas / react-qr-code / examples / main / index.js View on Github external
import React from 'react';
import ReactART from 'react-art';
import Rectangle from 'react-art/lib/Rectangle.art';
import ReactDOM from 'react-dom';
import QRCode from 'react-qr-code';

ReactDOM.render(
	,
	document.getElementById('Container')
);

react-art

React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).

MIT
Latest version published 3 months ago

Package Health Score

92 / 100
Full package analysis