我是秦少卫, 昵称是nihaojob , 我来自中国 China 。
我的开源项目:
基于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
1.撤销 功能有时会失效,
2. ctrl z 按钮无法控制撤销
iText.enterEditing() 输入框激活
属性面板 元素旋转属性错误
感谢 @houlonglong 大佬主动发起Vue3 + view-ui-plus升级,期待大佬PR,望知悉,请勿重复认领开发。
将来样式与图片打包为独立模块,其他开发者可直接引入使用。
/**
*
* 实现 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;
}//设置四角旋转光标
})
请问是否考虑支持ssr以及发布成独立的npm包
缩放后辅助线未对齐
pixabay
unsplash
Please Add english translation.
大佬,为什么点击图层会记入一次撤销呢?能否优化一下 && 是否可以恢复删除的呢?
自动感知周边对象,可以进行移动对齐等操作
我调研了下稿定设计和创客贴的效果,认为实现画布调整有几个重要的细节。
名词定义:
我缩放时画布后,矩形元素不在中心点,代码在 perf-workspace 分支上。
vue-fabric-editor/src/components/setSize.vue
Lines 70 to 98 in af08b55
目前右键菜单与组件耦合,期望与组件解欧,作为单独模块使用。
输入的文本超出画布大小时能否自动换行?
涉及到几个地方
1、画布初始化,canvas无固定大小,根据视口100%展示。
2、画布初始化后,生成矩形元素模拟画布,固定ID标识
3、图层不展示模拟画布
4、背景属性的修改在模拟画布上生效
5、导出图片时只导出模拟画布内元素
6、导入/导出json时,测试是否正常
图片的json文件是怎么生成的?
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?
能否增加画箭头和直线的功能?
请教一个问题,当两个元素(矩形+文字)组合的时候,整体的位置(x, y)是正值,而组合的元素(矩形和文字)的left、top都是负值,组合后的子元素都是根据什么定位的?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.