Как реализовать текст вдоль кривой Bezier в react js canvas webapp? ⇐ Javascript

[Anonymous]

Я делаю пользовательский редактор Canvas, используя Polotno SDK с открытым исходным кодом с React JS, WHCIH также использует структуру Конвы. Он предназначен для того, чтобы сделать Heraldry Blazons. Многие обрабатывают пользователь, и иметь возможность иметь текст на нем. Я включаю изображения того, что я хочу реализовать, и как я хочу, чтобы они работали. В Canvas "src =" https://i.sstatic.net/tvrmozyf.png "/>
Я делаю это в отдельных файлах: разделы. Editor.js Imports Sections.js, и app.js - это то, что импорт editor.js and выполняет. Но любой функциональный способ реализации его достаточно хорош.

Код: Выделить всё

const TextePanel = ({ store }) => {
const [text, setText] = useState('');
const [fontSize, setFontSize] = useState(24);
const [fontFamily, setFontFamily] = useState('Arial');

const addNormalText = () => {
const page = store.activePage;
page.addElement({
type: 'text',
text,
fontSize,
fontFamily,
x: 100,
y: 100,
});
};

const addBezierCurve = () => {
const page = store.activePage;
page.addElement({
type: 'bezier-curve',
x1: 100,
y1: 100,
cx: 200,
cy: 50,
x2: 300,
y2: 100,
stroke: 'red',
strokeWidth: 3,
});
};

return (


Text:
 setText(e.target.value)}
style={{ width: '100%' }}
/>

Font:
 setFontFamily(e.target.value)}
>
Arial
Georgia
Courier New
Comic Sans


Font Size:
 setFontSize(parseInt(e.target.value))}
/>

Add Normal Text

Add Bézier Curve


);
};

const TexteSection = {
name: 'Texte',
Tab: (props) => (

[img]/tabicons/fountain-pen.svg[/img]
        alt="Text"
style={{ width: 30, height: 30 }}
/>

),
Panel: TextePanel,
};
< /code>
Вот мой полный файл editor.js: < /p>
// src/Editor.js
import React, { useEffect } from "react";
import {
PolotnoContainer,
SidePanelWrap,
WorkspaceWrap,
} from "polotno";
import { Toolbar } from "polotno/toolbar/toolbar";
import { PagesTimeline } from "polotno/pages-timeline";
import { ZoomButtons } from "polotno/toolbar/zoom-buttons";
import { SidePanel } from "polotno/side-panel";
import { Workspace } from "polotno/canvas/workspace";

import "./elements/BezierCurveElement";

import { createStore } from "polotno/model/store";
import { sections } from "./Sections";

import "@blueprintjs/core/lib/css/blueprint.css";

const store = createStore({
key: "YOUR_API_KEY",
showCredit: true,
});

store.addPage();

const addWatermark = () => {
const page = store.activePage;
const imageUrl = "/watermark.png"; // Make sure it's in /public

const image = new window.Image();
image.src = imageUrl;

image.onload = () => {
const imageWidth = image.width;
const imageHeight = image.height;

const targetWidth = 300;
const scaleFactor = targetWidth / imageWidth;
const scaledHeight = imageHeight * scaleFactor;

// Use the actual page height after ensuring it's available
const pageHeight = page.height || 1080; // Fallback in case undefined
const x = 15;
const y = 850;  // Bottom left

page.addElement({
type: "image",
src: imageUrl,
x,
y,
width: targetWidth,
height: scaledHeight,
alwaysOnTop: true,
showInExport: true,
locked: true,
selectable: false,
draggable: false,
resizable: false,
removable: false,
name: "WATERMARK_IMAGE",
});
};
};

const Editor = () => {
useEffect(() => {
addWatermark();
}, []);

return (











);
};

export default Editor;
< /code>
И вот мой файл app.js: < /p>
// src/App.js
import React from "react";
import Editor from "./Editor";

function App() {
return ;
}

export default App;

Если вам нужны какие -либо дополнительные файлы, информация или больше содержимого из моего файла sections.js, я могу включить его.


Подробнее здесь: https://stackoverflow.com/questions/796 ... vas-webapp