Achieving consistent alignment for text on a curved path

Question

Achieving consistent alignment for text on a curved path

I am working on a unique "flow-builder" project and I need to achieve this specific result: https://i.sstatic.net/6TTuS.png

At the moment, my current edge looks like this: https://i.sstatic.net/9ydzx.png

The text on the edge is currently aligned with the edge itself, however, I need it to align differently as shown in the first image

Since I am new to path/textPath, I am struggling to figure this out. Here is the code snippet for my "Edge" component:

import React from 'react';
import { getSmoothStepPath, getMarkerEnd } from 'react-flow-renderer';

export default function DefaultEdge({
                                       id,
                                       sourceX,
                                       sourceY,
                                       targetX,
                                       targetY,
                                       sourcePosition,
                                       targetPosition,
                                       style = {},
                                       data,
                                       arrowHeadType,
                                       markerEndId,
                                   }) {
    const edgePath = getSmoothStepPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
    const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);

    return (
        <>
            <path id={id} style={style} className="react-flow__edge-path" d={edgePath} markerEnd={markerEnd} />
            <text>
                <textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="90%" textAnchor="middle" >
                    {data?.text  || 'default text'}
                </textPath>
            </text>
        </>
    );
}

css reactjs canvas

Answer 1

Answer №1

Assuming you are working on a canvas since you tagged canvas, I won't be able to assist with the provided code but can give you an example of how to utilize canvas's built-in methods to achieve your desired outcome.

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
canvas.width = 300;
canvas.height = 300;

let pt1 = {x: 50, y: 50};
let pt2 = {x: 200, y: 50};
let pt3 = {x: 230, y: 150};
let pt4 = {x: 230, y: 220};
let pt5 = {x: 230, y: 250};

let nodes = [];
class Nodes {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.r = 5;
  }
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, 5, 0, Math.PI*2);
    ctx.fill();
  }
}

let node1 = nodes.push(new Nodes(pt1.x, pt1.y));
let node2 = nodes.push(new Nodes(pt3.x, pt3.y));
let node3 = nodes.push(new Nodes(pt4.x, pt4.y));
let node4 = nodes.push(new Nodes(pt5.x, pt5.y));

for (let i=0;i<nodes.length;i++) {
  nodes[i].draw();
}

class Edge {
  constructor(x, y, lw) {
    this.x = x;
    this.y = y;
    this.lw = lw;
  }
  draw() {
    ctx.strokeStyle = 'black';
    ctx.beginPath();
    ctx.moveTo(pt1.x, pt1.y);
    ctx.lineTo(pt2.x, pt2.y);
    ctx.bezierCurveTo(230, 50, 230, 50, 230, 80);
    ctx.lineTo(pt3.x, pt3.y);
    ctx.moveTo(pt4.x, pt4.y);
    ctx.lineTo(pt5.x, pt5.y);
    ctx.stroke();
  }
}

let edge1 = new Edge();

edge1.draw()

ctx.font = 'bold 20px arial';
ctx.textAlign = 'center';
ctx.textBaseline = "middle";
ctx.fillText('Hello world', pt3.x, (pt3.y + pt4.y)/2);

<canvas id="canvas"></canvas>

Answer 2

Assuming you are working on a canvas since you tagged canvas, I won't be able to assist with the provided code but can give you an example of how to utilize canvas's built-in methods to achieve your desired outcome.

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
canvas.width = 300;
canvas.height = 300;

let pt1 = {x: 50, y: 50};
let pt2 = {x: 200, y: 50};
let pt3 = {x: 230, y: 150};
let pt4 = {x: 230, y: 220};
let pt5 = {x: 230, y: 250};

let nodes = [];
class Nodes {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.r = 5;
  }
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, 5, 0, Math.PI*2);
    ctx.fill();
  }
}

let node1 = nodes.push(new Nodes(pt1.x, pt1.y));
let node2 = nodes.push(new Nodes(pt3.x, pt3.y));
let node3 = nodes.push(new Nodes(pt4.x, pt4.y));
let node4 = nodes.push(new Nodes(pt5.x, pt5.y));

for (let i=0;i<nodes.length;i++) {
  nodes[i].draw();
}

class Edge {
  constructor(x, y, lw) {
    this.x = x;
    this.y = y;
    this.lw = lw;
  }
  draw() {
    ctx.strokeStyle = 'black';
    ctx.beginPath();
    ctx.moveTo(pt1.x, pt1.y);
    ctx.lineTo(pt2.x, pt2.y);
    ctx.bezierCurveTo(230, 50, 230, 50, 230, 80);
    ctx.lineTo(pt3.x, pt3.y);
    ctx.moveTo(pt4.x, pt4.y);
    ctx.lineTo(pt5.x, pt5.y);
    ctx.stroke();
  }
}

let edge1 = new Edge();

edge1.draw()

ctx.font = 'bold 20px arial';
ctx.textAlign = 'center';
ctx.textBaseline = "middle";
ctx.fillText('Hello world', pt3.x, (pt3.y + pt4.y)/2);

<canvas id="canvas"></canvas>

Achieving consistent alignment for text on a curved path

Answer №1

Similar questions

Is a fixed div located inside a fluid grid container?

Achieving right to left direction in react-bootstrap: Tips and Tricks

Modifying the active NavLink in Reactstrap with onClick event handler

Easy steps to eliminate background color from text

What is the best way to utilize the properties obtained from a spread operator?

Installing NPM with the mysterious -E prefix, completely unfamiliar

How to effectively manipulate nested arrays in JavaScript without altering their references

Animate the service item with jQuery using slide toggle effect

An error occurred while trying to load the resource in the Redux-Saga: connection refused

Cross-origin resource sharing (CORS) policy issue arises when the 'Access-Control-Allow-Origin' header is not included in the requested resource, especially when utilizing an iframe in a React

Enhancing functionality with extra JavaScript tags in next.js

The issue of webkit animation rotation malfunctioning on Nexus Mobile devices

Adjust the maximum and minimum values on a dual thumb slider

Using useNavigate outside of a React hook: What you need to know

What happens when the reducer is operating with the initialState in place?

Looking to have the image float after reducing the size of the windows in html?

Step-by-step guide to creating a border around text with a number included in between the lines

Tips for adjusting column positions in a table while maintaining a fixed header and utilizing both horizontal and vertical scrolling

Tips for displaying NoOptionsText in MaterialUI Autocomplete based on a specific condition

Encountering difficulties resolving the dependency tree while trying to install @react-navigation/[email protected]