它是什么

Gesti 是一个基于 Canvas 的贴图库，专注于提供快速的图片编辑功能。它设计小巧，力求简洁，以满足用户对于简单而高效编辑工具的需求。 Gesti 提供了可装卸的按钮和一系列组件，旨在使用户体验更加流畅。这些功能点可以轻松地满足用户的各种需求，让用户在编辑图片时更加得心应手。 此外，Gesti 还支持序列化功能，允许用户将在画布内编辑的内容序列化为 JSON 格式。这项功能使得用户能够轻松保存和分享他们的编辑工作，同时增强了工作流程的可管理性和可扩展性。

总而言之，Gesti 旨在为用户提供轻量级、高效的图片编辑工具，强调快速、简单和灵活的编辑体验。

Gesti 名字的由来

在一个充满创意与技术的未来世界里，人们生活在数字化的环境中。在这个世界里，虚拟现实技术已经成为日常生活的一部分，人们可以通过虚拟现实眼镜与数字化的世界进行互动。各种数字创作工具不断涌现，让人们可以在虚拟空间中尽情创作与表达。

主人公是一位名叫亚历克斯的年轻设计师，他对数字艺术充满热情，梦想着创造出一款能够让人们更加轻松、自由地在虚拟空间中创作的工具。在一次偶然的机会下，亚历克斯接触到了一种全新的虚拟画布技术，这种技术可以让用户通过手势在虚拟画布上操作图片、文字并调整它们的大小和层级，从而实现更加直观、自然的创作体验。

受到这种技术的启发，亚历克斯决定开发一款基于这种虚拟画布技术的创作工具，他决定将这款工具命名为 "Gesti"。"Gesti" 这个名字来源于英语单词 "gesture"，代表手势和动作，因为这款工具可以通过用户的手势来实现创作操作。同时，这个名字也暗示着工具的简单易用性，让用户可以通过简单的手势实现复杂的创作效果。

随着时间的推移，亚历克斯不断完善 "Gesti" 工具，它逐渐受到了广大数字创作者的欢迎。人们通过 "Gesti" 可以轻松地在虚拟空间中进行各种创作，释放他们的想象力，创造出令人惊叹的作品。这款工具成为了数字艺术领域的一颗耀眼的新星，为人们带来了全新的创作体验和乐趣。

该故事纯属虚构，如有雷同，纯属巧合。

概念

正如上面所述，Gesti 是一个基于 Canvas 的贴图库，它并非是 Canvas 本身，而是一个建立在 Canvas 上的工具。Gesti 旨在提供快速的元素拖动操作等功能，以便用户可以更轻松地编辑和操作画布内的元素。

安装


    npm install gesti

Gesti仅支持Canvas 2d

Gesti

它只关心画布的初始化和Gesti的声明周期，以下是Gesti在开始时的必要代码。


    import Gesti from "gesti";

    const canvas = document.querySelector("#canvas") as HTMLCanvasElement;
    const renderContext = canvas.getContext("2d");
    const rect = canvas.getBoundingClientRect();
    const gesti = new Gesti();
    gesti.initialization({
        renderContext,
        rect: {
            x: rect.x,
            y: rect.y,
             canvasWidth: rect.width,
            canvasHeight: rect.height,
        },
    });

注意：renderContext必须为canvas.getContext("2d")返回参数，且不能为空，请保障在canvas挂载页面完成后再创建Gesti。

GestiController

画布内元素操作控制器，可以使用它操作画布内的元素。


    import { GestiController } from "gesti";

    //创建控制器对象
    const controller = new GestiController();
    //绑定上述gesti实例
    gesti.bindController(controller);

绑定完controller和gesti实例后，该controller就具备控制对应gesti画布内的元素

现在让我们使用已经被绑定的controller加入文字到画布内


    import { TextBox } from "gesti";

    const handleAddTextBox = () => {
        const textBox = new TextBox("Hello Gesti", {
            weight: "bold",
            color: "white",
            backgroundColor: "black",
        });
        controller.load(textBox);
        controller.center(textBox);
     };