相关疑难解决方法(0)

我一直在寻找一个体面和快速的解决方案,如何在圆圈内放置一段文字.我发现有两种解决方案.

解决方案1

浮动与文本左侧和文本右侧文本相同高度的多个div,并通过更改divs 宽度来调整文本剩余的空间.

解决方案2

使用生成器来做同样的事情,http://www.csstextwrap.com/index.php.

奖金(不是问题的一部分,只是提示)

我不是在寻找这个,但也许有人可能会需要它,我觉得把它作为一个链接很好> http://csswarp.eleqtriq.com/它是一个基于网络的生成器,可以帮助你将文字环绕在圆圈上.

问题？

是否有一个更简单的解决方案,将文本段落放在一个圆圈内,而不必添加浮动div和额外的标记.拍摄包含该文本的图像不是解决方案.最好的情况是,该解决方案将具有干净的HTML标记,在CSS中几乎没有调整.

我正在使用d3绘制UML图,并希望将文本包装在用d3绘制的形状中.我已经得到了下面的代码,并找不到解决方案,使文本"适合"我的形状(见下图).

var svg =  d3.select('#svg')
    .append('svg')
        .attr('width', 500)
        .attr('height', 200);

var global = svg.append('g');

global.append('circle')
      .attr('cx', 150)
      .attr('cy', 100)
      .attr('r', 50);

global.append('text')
  .attr('x', 150)
  .attr('y', 100)
  .attr('height', 'auto')
  .attr('text-anchor', 'middle')
  .text('Text meant to fit within circle')
  .attr('fill', 'red');

我想像附加图片一样完美地适合和对齐 css 和 html 中的文本。

我试图在打字时让文本适合一个圆圈，如下所示：

我尝试遵循Mike Bostock 的将文本调整为圆形教程，但到目前为止失败了，这是我可怜的尝试：

import React, { useEffect, useRef, useState } from "react";

export const TwoPI = 2 * Math.PI;

export function setupGridWidthHeightAndScale(
  width: number,
  height: number,
  canvas: HTMLCanvasElement
) {
  canvas.style.width = width + "px";
  canvas.style.height = height + "px";

  // Otherwise we get blurry lines
  // Referenece: [Stack Overflow - Canvas drawings, like lines, are blurry](/sf/answers/4140044961/)
  const scale = window.devicePixelRatio;

  canvas.width = width * scale;
  canvas.height = height * scale;

  const canvasCtx = canvas.getContext("2d")!; …