如何绘制从角度派生的点的线？

Question

I'm writing a component (React) which draws a fancy box around a bit of text with SVG. The component receives the width and height of the dom element and draws a polygon derived from those values. Simplified example follows:

import React from 'react';

const Box = ({ dimensions }) => {
  const { width, height } = dimensions;
  const mod = 10;
  const tlX = 0;
  const tlY = 0;
  const trX = tlX + width;
  const trY = tlY;
  const brX = trX;
  const brY = trY + height;
  const blX = 0;
  const blY = tlY + height;

  return (
    <picture>
      <svg height={height + 50} width={width + 200}>
        <polygon
          points={`${tlX},${tlY} ${trX},${trY} ${brX},${brY} ${blX},${blY}`}
          style={{ fill: 'black', fillOpacity: '0.5' }}
        />
      </svg>
    </picture>
  );
};

In this stripped down example the result is a rectangle with straight corners based on the width and height of the supplied dom element. In reality these values are given some random modifiers to create more of a trapezoid, as in fig A.

Illustration of desired result

In the fig B you can see my problem with this method. When drawing a longer or shorter box, the figure looks squished. What I want is for the box to behave like in fig C, in that it will draw the horizontal lines at a given angle until it has reached a certain width.

From what I can intuit this should be possible with some math savvy, but I am unable to quite figuring it out on my own.

Thanks in advance for any input, and please let me know if I'm being unclear on anything.

Edit: A "trapezoid" shape is apparently not what I'm looking for. My apologies. I just want a sort of janky rectangle. I was asked to show the code I've been using in more detail. As you will see I am basically just taking the values from the last example and messing them up a bit by adding or subtracting semi-randomly.

import React from 'react';
import PropTypes from 'prop-types';

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

const point = (core, edge) => getRandomArbitrary(core - edge, core + edge);

const Box = ({ dimensions }) => {
  const { width, height } = dimensions;
  const mod = 10;
  const tlX = point(25, mod);
  const tlY = point(40, mod);
  const trX = point(width + 55, mod);
  const trY = point(25, mod);
  const brX = point(width + 25, mod);
  const brY = point(height - 25, mod);
  const blX = point(5, mod);
  const blY = point(height - 40, mod);

  return (
    <picture>
      <svg height={height + 50} width={width + 200}>
        <polygon
          points={`${tlX},${tlY} ${trX},${trY} ${brX},${brY} ${blX},${blY}`}
          style={{ fill: 'black', fillOpacity: '0.5' }}
        />
      </svg>
    </picture>
  );
};

Box.propTypes = {
  dimensions: PropTypes.shape({
    width: PropTypes.number,
    height: PropTypes.number,
  }).isRequired,
};

export default Box;

Answer 1

In order to calculate the y for the top right point I'm imagining a circle with the center in the top left point. The radius of the circle is tlX - trX , The angle is -5 degs but you can change it to what you need. In order to calculate the value for the y you can do

const trY = tlY - (tlX - trX)*Math.sin(a1)

To calculate the y for the bottom right point I'm doing the same only this time the angle is 5 degs, the center in the bottom left point and the radius of the circle is blX - brX

const brY = blY - (blX - brX)*Math.sin(a2)

The important part of the demo is this:

  //calculating the points for the polygon

  const tlX = BB.x-10;
  const tlY = BB.y-5;
  const trX = tlX + 20 + BB.width;
  //const trY = tlY - 10;
  const trY = tlY - (tlX - trX)*Math.sin(a1)
  const brX = trX - 5;

  const blX = tlX + 5;
  const blY = tlY + 10 + BB.height;

  //const brY = trY + 30+ BB.height;
  const brY = blY - (blX - brX)*Math.sin(a2)

Next comes a demo where I'm using plain javascript. Please change the length of the text to see if this is what you need.

 let bb = txt.getBBox(); let m = 10; // the blue rect updateSVGelmt({x:bb.xm,y:bb.ym,width:bb.width+2*m,height:bb.height+2*m},theRect) // the bounding box of the blue rect let BB = theRect.getBBox(); //the angles for the polygon let a1 = -5*Math.PI/180; let a2 = -a1; //calculating the points for the polygon const tlX = BB.x-10; const tlY = BB.y-5; const trX = tlX + 20 + BB.width; //const trY = tlY - 10; const trY = tlY - (tlX - trX)*Math.sin(a1) const brX = trX - 5; const blX = tlX + 5; const blY = tlY + 10 + BB.height; //const brY = trY + 30+ BB.height; const brY = blY - (blX - brX)*Math.sin(a2) let points = `${tlX},${tlY} ${trX},${trY} ${brX},${brY} ${blX},${blY}`; poly.setAttributeNS(null, "points", points) let polybox = poly.getBBox(); svg.setAttributeNS(null, "viewBox", `${polybox.x-2} ${polybox.y-2} ${polybox.width+4} ${polybox.height+4}`) svg.setAttributeNS(null, "width",3*(polybox.width+4)) function updateSVGelmt(o,elmt) { for (let name in o) { if (o.hasOwnProperty(name)) { elmt.setAttributeNS(null, name, o[name]); } } }

 svg{border:1px solid}

 <svg id="svg"> <polygon id="poly" points="" style="stroke: black; fill:none" /> <rect id="theRect" fill="#d9d9ff" /> <text id="txt" text-anchor="middle">element</text> </svg>