介绍
因为一些特点的工作场景, 写文章的须要每次解决一些图片, 在下面加阐明文字, 或者加一些图形
刚开始应用 PPT 来解决, 一张张复制过来, 做一些边框暗影解决, 再加一些图形, 而后再导出来复制到须要的中央, 而且导出后的图片之后可能不会再应用了还要清理.
图片多了反复操作的步骤就多了, 比拟的繁琐, 想想是否有个工具去解决这个问题, 搜了一下, 要么就是太重的业余的软件, 要么就是不太合乎批量的要求的软件.
简略总结一下我的场景就是: 来了一堆图片, 都须要做一些 "轻解决", 有些须要加文字, 或者加个箭头等.
- 要害就是 "轻", 不须要去期待几十秒去关上, 进行繁琐的解决
- 不须要下载就能应用, 用完敞开即可
- 简略, 易用, 可视化, 不须要一些简单的操作, 鼠标点击就能实现
一款纯 JS 实现的轻量化图片编辑器
如果下面的场景是你所遇见的, 也想轻量疾速的解决一些图片, 这个我的项目就是为你而筹备的
- GenOptimizer 在线演示地址
- 反对多图操作
- 反对图片拖拽增加
- 反对所有属性的动静配置
- 反对一键复制批改后的后果
- 反对画笔、文字、矩形、圆形、箭头、线条、图像的增加
这个我的项目没有依赖于任何的第三方框架, 以纯 JS 实现
最初形象出了一个框架 (GenOptimizer), 以一种非常简洁易用的形式写出了整个我的项目
上面是我的项目的 git 地址, 笔者初学前端, 还请多多指教
- Github 地址
- Gitee 地址
上面是介绍框架的一些技术总结, 特地的轻量化, 后序会对揭秘一下具体的实现计划
Optimizer 框架特点
- 事件、画图、交互 全局治理
- 反对注册自定义组件, 可自定义配置管理
- 基于面向对象, 高度形象代码
- 简略易用, 能疾速开发出各种成果
Optimizer 框架应用
启动
首先须要场景管理器, 通过继承 GenScene 来创立场景, 场景里对于页面中的多个控制器进行治理
class MainScene extends GenScene { constructor(optimizer) { super(optimizer) }}全局应用 instance 获取实例, 加载场景管理器, 最简略的 Optimizer 程序就启动了
GenOptimizer.instance(function(o){ let scene = MainScene.new(o) o.runWithScene(scene)})场景管理器 (Scene)
事件 (Event)
页面事件
...<div class='gen-auto-button-area'> <button class='gen-auto-button' data-value='config.arg1'>text</button></div>...// 注册页面 class, 全局可用this.registerPageClass({ "buttonArea": 'gen-auto-button-area', ...})// 注册全局事件 this.registerGlobalEvents([ { eventName: "click", // 事件绑定的元素区域 className: sc.pageClass.buttonArea, // 在 所有 configToEvents 响应之 前 触发 after: function(bindVar, target) { // bindVar: 绑定的变量 // target: 事件触发的指标 }, // 在 所有 configToEvents 响应之 后 触发 before: function(bindVar, target) { // bindVar: 绑定的变量 // target: 事件触发的指标 }, // 事件响应 configToEvents: { // 自定义绑定的变量: 事件触发后的响应 "config.arg1": function(target) { }, "action.arg1": function(target) { }, ... } }, ...])鼠标事件
this.resgisterMouse(function(event, action) { // event 是鼠标点击的事件 // action 为鼠标点击的事件名称 if (action == 'mouseleave') { console.log('mouseleave canvas') } else if (action == 'up') { console.log('up canvas') } else if (action == 'down') { console.log('down canvas') } else if (action == 'move') { console.log('move canvas') }})键盘事件
this.registerAction("Backspace", status => { // status 为 'down' 时, 示意按下, 为 'up' 时, 示意松开 console.log("Backspace", status)})this.registerAction("s", status => { // status 为 'down' 时, 示意按下, 为 'up' 时, 示意松开 console.log("s", status)})组件 (Component)
注册组件
class MyComponent extends GenComponent { constructor(control) { super(control.scene) this.control = control } ...}this.bindComponent('attribute', MyComponent.new(this))应用组件
// 全局可应用组件let data = ...this.getComponent('attribute').buildWith(data)总结
本文介绍了笔者实现的一款可拖拽、低代码、轻量化的图片编辑器, 解决了繁琐解决图片的问题
有时候一些小的操作, 都可能引发咱们的思考, 如何能力更不便的解决这一类的问题?
这个例子就是我的思考, 心愿能给于你一点灵感或启发.