gesti v1.4.54

主要特性

• Typescript开发，JavaScript,TypeScript都支持
• 支持 ESM & AMD ,支持 TS
• 基于原生Canvas，兼容主流浏览器，PC端以及移动端,兼容微信小程序，Uniapp App 端。
• 极简操作，更多功能，持续更新。

效果图

Gesti

目录 (Table of Contents)

• 保存
• 在 微信小程序 | uniapp 端使用
• 可能会遇到的问题
• 示例 - HTML - JavaScript 或 Typescript

安装

npm install gesti

引入使用

import Gesti from "gesti";

初始化

const gesti=new Gesti();
    //h5端适用，其他端请参考API自行添加
const controller=gesti.initialization({
  renderContext:g,
  rect:{
     canvasWidth:canvas.width,
     canvasHeight:canvas.height
   }
});

加入文字

  controller.load(new TextBox('New Text'));

API

Gesti

GestiController

ViewObject（重要的阅读）

• 画布内的可操作对象，每一张图片对象或者文字对象或者其他都是它在画布上的映射。
• 获取它的途径一般来自于创建对象，它是一个基类，其子类还有TextBox , ImageBox ,WriteViewObj

Button 对象

• 控制ViewObject的功能按钮

Hooks 🚀

• 还挺好用

创建对象系列

监听系列

添加预设系列

创建ViewObject可操作对象系列

• 自己创建的对象，用着放心

use系列

• 涂鸦功能

do系列

• 需要做一些操作? 交给它们

drive系列

• 自定义鼠标/手指事件代理

尺寸适配

• 物理单位转换像素 此处dpi取96
• 值得注意:Gesti内没有一个标准的单位，所有的单位都由您决定，比如画布创建设置大小时，图片创建传入时，字体设置大小时。总之，您输入多大，Gesti就为您显示多大（比如输入图片高宽为物理单位一厘米，那么在Gesti内您所看到的图片大小也会是一厘米高宽）
• 以下提供的方法仅供参考，如需更精准的方案您可以自己实现。

保存

• 该库只是为您提供了canvas的代理操作，并没有改变canvas的任何原有API，所以您可以使用canvas自带的API进行存储。

可能会遇到的问题

• 图片导入不出现？数据变了图片没动？试试update方法刷新一下。
• hooks和普通模式有啥区别吗? 个人认为Hooks更适合FP爱好者，普通模式适合OOP爱好者。
• 图片 | 文字上没有可以直接操作的按钮吗？ 有,不过需要您自己new成按钮对象安装上去。
• 为什么路由切换后再返回页面会发生报错？重新init一下，记得controller也要重新赋值。
• 其他问题可以加下面QQ群
• Demo下载地址: https://ext.dcloud.net.cn/plugin?id=10867

示例

用它，没有多麻烦。

HTML

<canvas id="canvas" width="300" height="300"></canvas>

JavaScript

const canvas = document.querySelector("canvas");
const renderContext= canvas.getContext("2d");
const [gesti,controller]=Gesti.mount({
    renderContext,
    rect:{
      canvasWidth:canvas.width,
      canvasHeight:canvas.height
    }
});
controller.load(new Text(`New Text.
  新建文本`))

不是吗？

需要帮助？

• 添加QQ群聊(Gesti交流群),我们讨论一下问题 756829516