Как создать редактор текстового пути в react js canvas webapp? [закрыто] ⇐ Html

[Anonymous]

Я делаю пользовательский редактор Canvas, используя Polotno SDK с открытым исходным кодом с React JS, WHCIH также использует структуру Конвы. Он предназначен для того, чтобы сделать Heraldry Blazons. изгиб. Для этого я пытаюсь реализовать редактор текстовых путей. Я нашел некоторые ресурсы, но они не используют React JS и делают их для веб -приложения. И ресурсы, специально касающиеся React JS и Konva, не объясняют, как создать редактор текстового пути. src = "https://i.sstatic.net/jp1fqgj2.jpg"/>

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