nihaojob / vue-fabric-editor Goto Github PK

基于fabric.js和Vue的开源图片编辑器，可自定义字体、素材、设计模板。fabric.js and Vue based image editor, can customize fonts, materials, design templates.

Home Page: https://nihaojob.github.io/editorDoc/

License: MIT License

JavaScript 3.45% HTML 0.42% Vue 53.08% CSS 0.36% Shell 0.05% TypeScript 41.04% Less 1.60%

svg-editor fabricjs editor vue-fabric design design-editor poster canvas-editor image-editor

vue-fabric-editor's Introduction

👋 Hi, welcome!

我是秦少卫，昵称是nihaojob ，我来自中国 China 。

我的开源项目：

vue-fabric-editor

vue-fabric-editor's People

Contributors

Stargazers

Watchers

Forkers

alexanderazharjan mrthinker1 itmier cellinlab zhangle-tool mengzhiai lyh0371 tomaspilar torns ndamofli wang11111 tfbabi bookmarkbao imfantuan bigbigbao eat-full namekelly f2elab alexanderinum userand varnew kule2018 xujinghao user-zd chaos2022 zllugithub liupq yufengkz mr-cooler lailonghui wangytbest codeyu001 damao-code xcyn wangditxz gtiger666 ken551113 zhenhuihe 497983606 cikayo 3fu jiason flying4055 wangxiaoer5200 johnnyma zcy22606 barbara012 dolt131943 bootrestart jqk6 andygoo xinzhyu doctor-cyj vuuvv yuzhikuan jzhello jackwiy a1669579390 understanding adambear moeyc davidtina doubi235 xuess sdtm1016 jee-zh gzhidao1010 jechtliu qianmucheng benmo1602 hc0 mxlcpu jiasai kristydang sagilyu kerwinchina billydotzhang plysummer xindonglin musicsnap wenxiaoqian markbzhang yumengzhong sanyuesiyuewuyue cesiya23 luo-shishi orochigalois fys85 vockalimo microanswer cloudinskywith zzc1745 lzh15378738622 xjindf michael-f-chen zacat ripperts guxingzhe icleitoncosta wqzgh

vue-fabric-editor's Issues

透明图片画布背景问题

使用矩形模拟画布对于白色背景或透明图片的处理并不友好应当像ps 背景层一样有棋盘格子并附有拖拽效果
如果有此需求愿意贡献代码

接入爱彼迎语法检验

https://juejin.cn/post/6949805803003969573?share_token=8977759f-fa43-4189-91e6-d7483724d6c3

组合定位问题

请教一个问题，当两个元素(矩形+文字)组合的时候，整体的位置(x, y)是正值，而组合的元素(矩形和文字)的left、top都是负值，组合后的子元素都是根据什么定位的？

4个角支持旋转

/**
 * 
 * 实现 fabricjs 支持在四个边角按下旋转元素
 * @author 晗萧 <[email protected]>
 * @version 1.0.0
 * 
 */

//渲染自定义图标
function renderIcon(icon) {
    return function renderIcon(ctx, left, top, styleOverride, fabricObject) {
    var size = this.cornerSize;
    ctx.save();
    ctx.translate(left, top);
    // ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));//跟随元素旋转
    ctx.drawImage(icon, -size/2, -size/2, size, size);
    ctx.restore();
    }
}

//定义旋转光标样式，根据转动角度设定光标旋转
function rotateIcon(angle){
    return `url("data:image/svg+xml,%3Csvg height='18' width='18' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'%3E%3Cg fill='none' transform='rotate(`
    + angle
    +` 16 16)'%3E%3Cpath d='M22.4484 0L32 9.57891L22.4484 19.1478V13.1032C17.6121 13.8563 13.7935 17.6618 13.0479 22.4914H19.2141L9.60201 32.01L0 22.4813H6.54912C7.36524 14.1073 14.0453 7.44023 22.4484 6.61688V0Z' fill='white'/%3E%3Cpath d='M24.0605 3.89587L29.7229 9.57896L24.0605 15.252V11.3562C17.0479 11.4365 11.3753 17.0895 11.3048 24.0879H15.3048L9.60201 29.7308L3.90932 24.0879H8.0806C8.14106 15.3223 15.2645 8.22345 24.0605 8.14313V3.89587Z' fill='black'/%3E%3C/g%3E%3C/svg%3E ") 12 12,crosshair`
}
//添加旋转控制响应区域
fabric.Object.prototype.controls.mtr = new fabric.Control({
    x: -0.5,
    y: -0.5,
    offsetY: -10,
    offsetX: -10,
    rotate: 20,
    actionName: 'rotate',
    actionHandler: fabric.controlsUtils.rotationWithSnapping,
    render: ()=>{}
});//↖左上
fabric.Object.prototype.controls.mtr2 = new fabric.Control({
    x: 0.5,
    y: -0.5,
    offsetY: -10,
    offsetX: 10,
    rotate: 20,
    actionName: 'rotate',
    actionHandler: fabric.controlsUtils.rotationWithSnapping,
    render: ()=>{}
});//↗右上
fabric.Object.prototype.controls.mtr3 = new fabric.Control({
    x: 0.5,
    y: 0.5,
    offsetY: 10,
    offsetX: 10,
    rotate: 20,
    actionName: 'rotate',
    actionHandler: fabric.controlsUtils.rotationWithSnapping,
    render: ()=>{}
});//↘右下
fabric.Object.prototype.controls.mtr4 = new fabric.Control({
    x: -0.5,
    y: 0.5,
    offsetY: 10,
    offsetX: -10,
    rotate: 20,
    actionName: 'rotate',
    actionHandler: fabric.controlsUtils.rotationWithSnapping,
    render: ()=>{}
});//↙左下

//渲染时，执行
canvas2.on('after:render', function() {
    if(canvas2.getActiveObject()){
        fabric.Object.prototype.controls.mtr.cursorStyle = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2)))
        fabric.Object.prototype.controls.mtr2.cursorStyle = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+90)
        fabric.Object.prototype.controls.mtr3.cursorStyle = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+180)
        fabric.Object.prototype.controls.mtr4.cursorStyle = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+270)
    }
});

//旋转时，实时更新旋转控制图标
canvas2.on('object:rotating', function(event) {
    var body=document.getElementById('editor').nextSibling;
    switch (event.transform.corner) {
        case "mtr":
            body.style.cursor = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2)))
            break;
        case "mtr2":
            body.style.cursor = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+90)
            break;
        case "mtr3":
            body.style.cursor = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+180)
            break;
        case "mtr4":
            body.style.cursor = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+270)
            break;
        default:
            break;
    }//设置四角旋转光标
})

如何实现画布大小调整与缩放

我调研了下稿定设计和创客贴的效果，认为实现画布调整有几个重要的细节。

元素超出画布大小后仍然展示控制框。
画布超出视口时，会出现滚动条。
当拖动页面窗口改变大小时，画布区域可自适应展示全部内容。
无论缩放多大，画布与视口区域有明显分割。

我的实现思路：

使用矩形元素模拟画布区域，这样可实现超出画布后仍然可以看见控制条。
fabric的canvas的宽高可根据缩放比例，超出外部DIV的宽高，这样可以实现放到后有滚动条效果。

名词定义：

视口：外部的DIV元素，根据页面宽高和左右面板的开关状态自动适应。
canvas区域：即fabric的canvas的大小
画布区域：矩形元素，手动调整大小。

我现在遇到的问题：

我缩放时画布后，矩形元素不在中心点，代码在 perf-workspace 分支上。

vue-fabric-editor/src/components/setSize.vue

Lines 70 to 98 in af08b55

  rSet(){ 

  const scale = 0.3 

  // const scale = this.getScale() 

  alert(scale) 

  const workspace = document.querySelector('#workspace') 

  let width = workspace.offsetWidth, height = workspace.offsetHeight 

  if(this.width * scale > workspace.offsetWidth){ 

  width = this.width * scale 

  alert(1) 

  } 

  if(this.height * scale > workspace.offsetHeight){ 

  height = this.height * scale 

  alert(2) 

  } 

  const Point = this.canvas.c.getVpCenter() 

  console.log(this.canvas.c.getVpCenter()) 

  this.canvas.c.zoomToPoint( 

  // Point, 

  // new this.fabric.Point(workspace.offsetWidth/2, 0), 

  new this.fabric.Point(workspace.offsetWidth - this.width * scale, workspace.offsetWidth - this.height * scale), 

  // new this.fabric.Point(0, 0), 

  scale 

  ) 

  this.canvas.c.setWidth(width); 

  this.canvas.c.setHeight(height); 

  this.canvas.c.renderAll() 

  },

升级Vue3 + view-ui-plus

感谢 @houlonglong 大佬主动发起Vue3 + view-ui-plus升级，期待大佬PR，望知悉，请勿重复认领开发。

组合后文字无法编辑

组合文字编辑 https://jelly.jd.com/article/6151e9512685d0019947558d

右键菜单

https://cloud.tencent.com/developer/article/1983296

撤销重做

大佬，为什么点击图层会记入一次撤销呢？能否优化一下 && 是否可以恢复删除的呢？

无法编辑 1920 X 1080 背景图片，背景无法设置png透明

无法编辑 1920 X 1080 背景图片，
背景无法设置png透明

Hello, I started the migration to Vue3, however, right away, I already had a problem.
The view-design library doesn't support vue3, only vue1 or vue2, do you have any suggestions of what we can use to replace it?

渐变配置

https://www.npmjs.com/package/vue-color-gradient-picker

画布大小保存

涉及到几个地方
1、画布初始化，canvas无固定大小，根据视口100%展示。
2、画布初始化后，生成矩形元素模拟画布，固定ID标识
3、图层不展示模拟画布
4、背景属性的修改在模拟画布上生效
5、导出图片时只导出模拟画布内元素
6、导入/导出json时，测试是否正常

	rSet(){
	const scale = 0.3
	// const scale = this.getScale()
	alert(scale)
	const workspace = document.querySelector('#workspace')
	let width = workspace.offsetWidth, height = workspace.offsetHeight

	if(this.width * scale > workspace.offsetWidth){
	width = this.width * scale
	alert(1)
	}

	if(this.height * scale > workspace.offsetHeight){
	height = this.height * scale
	alert(2)
	}
	const Point = this.canvas.c.getVpCenter()
	console.log(this.canvas.c.getVpCenter())
	this.canvas.c.zoomToPoint(
	// Point,
	// new this.fabric.Point(workspace.offsetWidth/2, 0),
	new this.fabric.Point(workspace.offsetWidth - this.width * scale, workspace.offsetWidth - this.height * scale),
	// new this.fabric.Point(0, 0),
	scale
	)
	this.canvas.c.setWidth(width);
	this.canvas.c.setHeight(height);
	this.canvas.c.renderAll()
	},