← Back

ofxVectorEditor

github.com/ofxyz/ofxVectorEditor · @ofxyz
OF 0.12 GUI 2D Geometry

ImGui Vector Editor Widget for openFrameworl

0 0 Last commit 2mo ago Created 5mo ago

README

ofxVectorEditor



preview

ofxVectorEditor packages a small, generic ImVectorEditor path editor widget for openFrameworks projects. The core widget follows the ImPlot / ImNodes / ImGuizmo style: reusable immediate-mode types live in the ImVectorEditor namespace.

Two layers, one addon:

dependency: drop the two files into any ImGui project. Inside an OF project it automatically gains ofPath conversion (Path::loadOfPath / Path::toOfPath, arcs imported as cubics). (bind an ofPath, edit it in a self-contained pan/zoom/ruler panel), PathDocument (ofPath layers + ImGui layers panel), and header-only SVG import (ofxVectorEditorSvg.h, needs ofxSvg).

Everything is instantiable โ€” plain classes, no singletons or global state.

Basic Use



#include "ofxImGui.h"

include "ofxVectorEditor.h"

ofxImGui::Gui gui; ImVectorEditor::Editor editor; ImVectorEditor::Path path; ImVectorEditor::Config config; void ofApp::draw() { gui.begin(); ImGui::Begin("Vector Editor"); config.tool = ImVectorEditor::Tool::Pen; config.canvasSize = ImVec2(800, 500); auto result = editor.Draw("##editor", path, config); if (result.changed) { // Convert or consume path in your host application. } ImGui::End(); gui.end(); }


ofPath-First Use



#include "ofxVectorEditor.h"

ofPath myPath;                          // your existing ofPath
ImVectorEditor::PathEditor pathEditor;

void ofApp::setup() {
    pathEditor.bind(myPath);            // edits write back automatically
}

void ofApp::draw() {
    myPath.draw();                      // native rendering, always current

    gui.begin();
    ImGui::Begin("Editor");
    pathEditor.draw("##editor");        // pan: middle-drag, zoom: wheel
    ImGui::End();
    gui.end();
}


Any ofPath imports: lines and cubics map 1:1, quads are promoted to cubics, arcs are approximated with cubic segments. PathDocument adds ordered layers (visibility, lock, color, rename, drag-reorder) with drawImGuiPanel(), and ofxVectorEditorSvg.h loads each SVG path into a layer.

Coordinate Model



Path anchors are stored in local path space. Config::transform maps that local space into the ImGui canvas:

1. Apply objectScale. 2. Apply objectRotationRadians. 3. Apply objectTranslation. 4. Apply canvas zoom. 5. Apply canvas pan.

Object transforms belong to the host application, while anchor and handle edits belong to the vector editor.

ImGuizmo Compatibility



The widget does not depend on ImGuizmo, but it is designed to compose with it. Use ImGuizmo for object transforms and feed the resulting values into Config::transform. Use the capture flags to decide who receives pointer input:

auto result = editor.Draw("##editor", path, config);

if (!editor.WantsMouseCapture()) {
    // Safe for the host to route mouse input to ImGuizmo.
}

Get this addon

HTTPS
SSH