@h_tudou/test-tudou

v1.0.1

Published

a month ago

A lightweight SVG component with drag and resize functionality

0High
0Medium
0Low

h_tudou

svg draggable drag resize component interactive

SVG Draggable Component

一个轻量级的 SVG 拖拽和调整大小组件，无需任何依赖。

A lightweight SVG component with drag and resize functionality, zero dependencies.

特性 Features

✨ 可拖拽 SVG 元素 / Draggable SVG elements
🔧 可调整大小 / Resizable functionality
🎯 零依赖 / Zero dependencies
📦 轻量级 / Lightweight
🚀 易于使用 / Easy to use

安装 Installation

npm install @yourname/testTudou

或者使用 yarn / Or use yarn:

yarn add @yourname/testTudou

使用方法 Usage

基本使用 Basic Usage

import SvgDraggableComponent from "@yourname/testTudou";

// 创建实例 / Create instance
const component = new SvgDraggableComponent();

// 挂载到DOM / Mount to DOM
component.mount("#app");

使用 HTML

<!DOCTYPE html>
<html>
  <head>
    <title>SVG Draggable Component Demo</title>
  </head>
  <body>
    <div id="app"></div>

    <script type="module">
      import SvgDraggableComponent from "./node_modules/@yourname/testTudou/src/index.js";

      const component = new SvgDraggableComponent({
        width: 800,
        height: 600,
        rectFill: "lightblue",
      });

      component.mount("#app");
    </script>
  </body>
</html>

CommonJS

const SvgDraggableComponent = require("@yourname/testTudou");

const component = new SvgDraggableComponent();
component.mount(document.body);

配置选项 Options

const component = new SvgDraggableComponent({
  width: 800, // SVG宽度 / SVG width
  height: 600, // SVG高度 / SVG height
  rectX: 10, // 矩形X坐标 / Rectangle X position
  rectY: 10, // 矩形Y坐标 / Rectangle Y position
  rectWidth: 200, // 矩形宽度 / Rectangle width
  rectHeight: 100, // 矩形高度 / Rectangle height
  rectFill: "yellow", // 矩形填充色 / Rectangle fill color
  rectStroke: "black", // 矩形边框色 / Rectangle stroke color
  compX: 100, // 组件X坐标 / Component X position
  compY: 100, // 组件Y坐标 / Component Y position
  showBorder: true, // 显示边框 / Show border
});

API

`constructor(options)`

创建一个新的 SVG 可拖拽组件实例。

Create a new SVG draggable component instance.

参数 Parameters:

options (Object): 配置选项 / Configuration options

`mount(container)`

将组件挂载到指定容器。

Mount the component to a container.

参数 Parameters:

container (HTMLElement | string): DOM 元素或选择器字符串 / DOM element or selector string

示例 Example:

component.mount("#app");
// or
component.mount(document.getElementById("app"));

`destroy()`

销毁组件并清理事件监听器。

Destroy the component and cleanup event listeners.

示例 Example:

component.destroy();

浏览器支持 Browser Support

支持所有现代浏览器 / Supports all modern browsers:

Chrome
Firefox
Safari
Edge

开发 Development

# 克隆仓库 / Clone repository
git clone https://github.com/yourname/svg-draggable-component.git

# 安装依赖 / Install dependencies
cd svg-draggable-component
npm install

# 构建 / Build
npm run build

示例 Examples

查看 example.html 文件获取完整示例。

See example.html for a complete example.

许可证 License

MIT

作者 Author

Your Name

贡献 Contributing

欢迎提交 Issue 和 Pull Request！

Issues and Pull Requests are welcome!

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme