sleepy-zone / fabritor-web

👻 A creative editor based on fabricjs. 一款基于 fabricjs 的开源创意图片编辑器，旨在让开发者快速构建属于自己的图片编辑器。可应用于海报设计、小红书公众号封面设计、banner 设计等场景。

Hi 👋, I'm SleepyZone 😴

A 30+、LowLevel P😅 frontend developer from China🇨🇳

• 🔭 I’m currently working on fabritor

• 🖼️ I’m currently working on Photor

• 📚 I’m currently writing a book about fabric.js, fabritor handbook

• 🌱 I’m currently learning How to become an independent/opensource developer

• 👨‍💻 All of my projects are available at https://github.com/sleepy-zone

• 📝 I regularly write articles on my website

• 📫 How to reach me https://bio.link/sleepyzone

fabritor-web's Issues

请教：如何修改配置，npm run build打包后，可以放置在网站根目录里的二级目录(如：fabritor)里

framework.js:1 e {status: 404, statusText: 'Not Found', internal: true, data: 'Error: No route matches URL "/fabritor/index.html"', error: Error: No route matches URL "/fabritor/index.html" at ey (http://192.168.1.3/fabritor/js/framew…} data : "Error: No route matches URL \"/fabritor/index.html\"" error : Error: No route matches URL "/fabritor/index.html" at ey (http://192.168.1.3/fabritor/js/framework.js:1:47360) at http://192.168.1.3/fabritor/js/framework.js:1:23067 at http://192.168.1.3/fabritor/js/87.js:1:34657 at Object.next (http://192.168.1.3/fabritor/js/87.js:1:34762) at r (http://192.168.1.3/fabritor/js/87.js:1:27396) at a (http://192.168.1.3/fabritor/js/87.js:1:27593) at http://192.168.1.3/fabritor/js/87.js:1:27652 at new Promise (<anonymous>) at http://192.168.1.3/fabritor/js/87.js:1:27534 at eJ (http://192.168.1.3/fabritor/js/framework.js:1:24195)
网上搜索了一下，在package.json里添加homepage: './fabritor' 无效

导出的图片左边和上边有边框

如图，是设计如此还是 bug?

后续计划

请问作者后续有什么迭代计划吗，最近毕设刚好在用 fabric，如果能参与该项目的共建就更好了~

[help request]想在TextSetter里添加一个属性，无法保存

有个小需求想看看能不能实现，没找到联系方法，只能发在这里了
我给 TextSetter/inex.tsx 里添加一个属性，但是光标离开再选中就消失了，能不能指导下，谢谢！

<FormItem
          name="key"
          label="Name"
        >
          <Input />
        </FormItem>

我想让下面这个输入框的值，能保存到导出的模板里

[建议] 基础形状的输入修改

矩形的长宽、圆角弧度、圆的半径，应该可以按照输入框输入值进行修改，建议操作面板添加这个功能

请教：如何修改配置，npm run build打包后，可以放置在网站根目录里的二级目录(如：fabritor)里

打包生成的index.html静态页面里css和js路径前一直有/斜杠，如何生成时去除
<link rel="stylesheet" type="text/css" href="/css/main.css" /> <link rel="stylesheet" type="text/css" href="/css/p_index.css" /> <script src="/js/f1b7312e.js"></script> <script src="/js/43ea133b.js"></script> <script src="/js/d59bccd2.js"></script> <script src="/js/128.js"></script> <script src="/js/p_index.js"></script> <script src="/js/framework.js"></script> <script src="/js/87.js"></script> <script src="/js/main.js"></script>

网上搜索了一下，在package.json里添加homepage: '.' 无效

createFTextClass中如果增加minHeight，如何让文字可以垂直居中？

你好，首先感谢你开源了这个库，对我的帮助很大
我遇到了一些问题，向您请教

fabric.FText = fabric.util.createClass(fabric.Textbox, {
    type: 'f-text',

    padding: 4,

    paintFirst: 'stroke',

    initDimensions: function() {
      if (this.__skipDimension) {
        return;
      }
      this.isEditing && this.initDelayedCursor();
      this.clearContextTop();
      this._clearCache();
      // clear dynamicMinWidth as it will be different after we re-wrap line
      this.dynamicMinWidth = 0;
      // wrap lines
      this._styleMap = this._generateStyleMap(this._splitText());
      // if after wrapping, the width is smaller than dynamicMinWidth, change the width and re-wrap
      if (this.dynamicMinWidth > this.width) {
        this._set('width', this.dynamicMinWidth);
      }
      if (this.textAlign.indexOf('justify') !== -1) {
        // once text is measured we need to make space fatter to make justified text.
        this.enlargeSpaces();
      }
      // clear cache and re-calculate height
      const height = this.calcTextHeight();
      if (!this.path) {
        this.height = Math.min(height, this.minHeight);
      } else {
        this.height = this.path.height > height ? Math.min(this.path.height, this.minHeight) : Math.min(height, this.minHeight);
      }
      this.saveState({ propertySet: '_dimensionAffectingProps' });
    },

在createFTextClass中我想增加最小高度的功能，功能可以正常生效，但是文字不是垂直居中的，我找了一些材料没发现怎么处理，对fabricjs不是很熟悉，请问您有什么建议吗
非常感谢

[建议] 关于图片裁剪

现在的图片裁剪是直接裁剪长宽，如何让任意的形状路径裁剪图片呢。

比如让一个图片放到一个三角形里面、一个半圆里面。

Default image size

Firstly, congratulations on the incredible work and for sharing it with us.

I have two questions which are:

The first is how can I set an initial size for a new file? I try change _initSketch more dont work for me:

private _initSketch () { const { width = 1200, height = 460 } = this._template || {}; const sketch = new fabric.Rect({ fill: '#ffffff', left: 0, top: 0, width, height, selectable: false, hasControls: false, hoverCursor: 'default', // @ts-ignore custom id id: SKETCH_ID, // @ts-ignore custom desc fabritor_desc: 'by fabritor', }); this.canvas.add(sketch); this.canvas.requestRenderAll(); this.sketch = sketch; this._initResizeObserver(); this._adjustSketch2Canvas(); }

And another question is could I show the way to compile it to use on my web page, after using yarn build it resulted in broken files.

I'm still new and noob at React ;)

I made a small implementation to have a json providing the UI texts I haven't done it in the entire project yet but as I want to use it with more languages I think this can help others if you want I can send you what I did maybe I can contribute in some way.

Thanks for your time

文字特效点击之后，页面挂掉了

bug: 导入新的图片，图片有点模糊，有什么解决办法吗？

左边是原图，右边是导入后看到的图

export 'ValueType' was not found in 'rc-input-number'

Good Day,

sorry and thank you i found this error after fix problem follow solution of you suggest.

this repo => https://github.com/porameht/nextjs-image-editor

新增网格素材

fabritor_desc 标题更新问题

1. 更新无法保存进 localStorage导致刷新后还原
2. 加载模板后不会设置 fabritor_desc 的值，导致模板还是显示之前的值

期待图片能支持遮着

我自己尝试写, 可是技术不好, 没整出来

就是图片可以支持: 心形, 圆形, 不规则图形, 等形状的遮着

用svg, 或者纯色图片进行操作

🧐 fabritor 后续计划

fabritor 在最近一次迭代后，基本趋于稳定，主要集中在一些优化和文档：

1. 正在写文档：fabritor-handbook，既是 fabritor 文档，也是一本 fabricjs 教程。
2. 一个 Sketch 转换为 fabritor json 的插件：sketch2fabritor
3. 其他一些简单优化
   a. 新增一些英文开源字体
   b. 新增网格，适用于拼图类场景 #34
   c. 新增图片自由裁剪 #32
   d. i18n
   e. 其他优化：如画笔 panel UI 、右键菜单、快捷键补充等等。

一些长远的想法

1. 支持多页编辑
2. 支持更多导出格式：HTML、Slide ，不仅可以做海报、banner 等，也可以做 Slide 网页
3. 结合 fabricjs 动画，导出视频 or GIF
4. 切换到 fabricjs 6.0

一些更长远的想法

1. 模板库
2. 一个完整的设计产品

[画布吸附] 图形的吸附效果

canva 如果拉伸一个矩形，到画布边缘，比如底部，会吸附底部，可以改善一下这样的效果么

Issue with webpack loader for react-colors-beauty

Good day,

I encountered an issue while attempting to compile my project by nextjs. When running webpack, I encountered the following error message:

Can you any assistance or guidance on how to properly configure webpack to handle LESS files from the react-colors-beauty

Thank you vary much.

Social Icons - Request

Hello friend, I would like to share an idea for a future update, which is the addition of social media icons would be very useful.

Social Icons: facebook, instagram, twitterX, tiktok, youtube, whatsapp, telegram, discord, github

Thank you very much in advance

feature需求

您好，我想接入本地的stablediffusion做图片生成，从哪里接入比较好