416 lines
11 KiB
JavaScript
416 lines
11 KiB
JavaScript
import cuowuImg from '@/assets/images/homePage/cuowu.svg'
|
||
function multiselectJS(canvas) {//获取整体宽高
|
||
canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
|
||
const sel = new fabric.ActiveSelection(canvas.getObjects(), {
|
||
canvas
|
||
})
|
||
// console.log(sel)
|
||
canvas.setActiveObject(sel)
|
||
canvas.requestRenderAll()
|
||
const activeObject = canvas.getActiveObject(); // 获取当前选中的整体对象
|
||
if (activeObject && activeObject.type === 'activeSelection') {
|
||
const totalWidth = activeObject.width * activeObject.scaleX;
|
||
const totalHeight = activeObject.height * activeObject.scaleY;
|
||
return { totalWidth, totalHeight }
|
||
console.log('Total Width:', totalWidth);
|
||
console.log('Total Height:', totalHeight);
|
||
}
|
||
}
|
||
function JSchangeType(canvas, val) {
|
||
switch (val) {
|
||
case 'init':
|
||
canvas.selection = true
|
||
canvas.selectionColor = 'rgba(0, 0, 0, 0.2)'
|
||
canvas.selectionBorderColor = 'rgba(255, 255, 255, 0.3)'
|
||
canvas.skipTargetFind = false
|
||
break
|
||
default:
|
||
canvas.selectionColor = 'transparent'
|
||
canvas.selectionBorderColor = 'transparent'
|
||
canvas.skipTargetFind = true // 禁止选中
|
||
break
|
||
}
|
||
}
|
||
//绘制直线
|
||
function JScanvasMouseDown(e, data) {//创建线
|
||
let downPoint = e.absolutePointer
|
||
let currentPatterning
|
||
let fill = data?.fill || 'rgba(0, 0, 0, 0.2)'
|
||
let radius = data?.radius || 5
|
||
let width = data?.width || 0
|
||
let selectable = data?.selectable
|
||
let strokeDashArray = data?.strokeDashArray || [0,0]
|
||
switch (data.str) {
|
||
case 'rect':
|
||
let top = Math.min(downPoint.y)
|
||
let left = Math.min(downPoint.x)
|
||
// let height = Math.abs(downPoint.y - upPointer.y)
|
||
// let width = Math.abs(downPoint.x - upPointer.x)
|
||
currentPatterning = new fabric.Rect({
|
||
top,
|
||
left,
|
||
fill: fill,
|
||
stroke:'#000',
|
||
strokeWidth:width,
|
||
strokeDashArray:strokeDashArray,
|
||
rx:radius,
|
||
ry:radius,
|
||
selectable,
|
||
})
|
||
break
|
||
case 'line':
|
||
currentPatterning = new fabric.Line([
|
||
downPoint.x, downPoint.y, // 起始点坐标
|
||
downPoint.x, downPoint.y // 结束点坐标
|
||
],
|
||
{
|
||
stroke: fill, // 笔触颜色
|
||
strokeLineCap: 'round',
|
||
strokeWidth:Number(width),
|
||
}
|
||
)
|
||
break
|
||
case 'circle':
|
||
currentPatterning = new fabric.Circle({
|
||
top: downPoint.y,
|
||
left: downPoint.x,
|
||
radius: 0,
|
||
fill: fill,
|
||
// fill: 'transparent',
|
||
// stroke: fill
|
||
})
|
||
break
|
||
case 'triangle':
|
||
currentPatterning = new fabric.Triangle({
|
||
top: downPoint.y,
|
||
left: downPoint.x,
|
||
width: 0,
|
||
height: 0,
|
||
fill: fill,
|
||
// fill: 'transparent',
|
||
// stroke: fill
|
||
})
|
||
break
|
||
case 'ellipse':
|
||
currentPatterning = new fabric.Ellipse({
|
||
top: downPoint.y,
|
||
left: downPoint.x,
|
||
rx: 0,
|
||
ry: 0,
|
||
fill: fill,
|
||
// fill: 'transparent',
|
||
// stroke: fill
|
||
})
|
||
break
|
||
case 'fold':
|
||
currentPatterning = new fabric.Polyline([
|
||
{ x: downPoint.x, y: downPoint.y },
|
||
{ x: downPoint.x, y: downPoint.y }
|
||
],{
|
||
fill: 'transparent',
|
||
stroke: fill,
|
||
objectCaching: false,
|
||
strokeWidth:Number(width),
|
||
selection:false,
|
||
}
|
||
)
|
||
break
|
||
}
|
||
return currentPatterning
|
||
}
|
||
async function exportSele(canvas,format){
|
||
var activeObjects = canvas.getActiveObject();
|
||
let data = {
|
||
url:'',
|
||
imageType:'u'
|
||
}
|
||
if(!activeObjects){
|
||
return
|
||
}
|
||
if(activeObjects.type == 'image'){
|
||
data = {
|
||
url:activeObjects.getSrc(),
|
||
imageType:'u',
|
||
}
|
||
}else{
|
||
let scale = activeObjects.scaleX? activeObjects.scaleX: 1
|
||
var exportCanvas = new fabric.Canvas(null, {
|
||
width: activeObjects.width*scale,
|
||
height: activeObjects.height*scale,
|
||
backgroundColor: "rgba(255, 255, 255)",
|
||
});
|
||
await new Promise((resolve, reject)=>{
|
||
activeObjects.clone((value)=>{
|
||
value.left = 0
|
||
value.top = 0
|
||
exportCanvas.add(value);
|
||
resolve()
|
||
})
|
||
})
|
||
exportCanvas.renderAll();
|
||
var imgData = exportCanvas.toDataURL({format: format,quality:1});
|
||
data = {
|
||
url:imgData,
|
||
imageType:'b',
|
||
}
|
||
exportCanvas.dispose()
|
||
}
|
||
return data
|
||
}
|
||
function JScreateCheck(e){//创建对号
|
||
let downPoint = e.absolutePointer
|
||
|
||
let rect = new fabric.Rect({
|
||
width:20,
|
||
height:20,
|
||
fill: 'rgba(0, 0, 0, 0.2)',
|
||
rx:5,
|
||
ry:5,
|
||
|
||
})
|
||
var path = new fabric.Path('M2 10 L8 16 L18 4', {
|
||
left: 2.5,
|
||
top: 2.5,
|
||
stroke: 'white',
|
||
strokeWidth: 2,
|
||
fill:'transparent',
|
||
});
|
||
var polyLineBtn = new fabric.Group([rect, path],{
|
||
top:downPoint.y-40,
|
||
left:downPoint.x-10,
|
||
width:20,
|
||
height:20,
|
||
hasControls: false, // 禁用控制点
|
||
hasBorders: false, // 禁用边框线
|
||
selectable: false, // 禁用选择功能
|
||
hoverCursor: 'pointer'
|
||
});
|
||
return polyLineBtn
|
||
}
|
||
function JScanvasMouseMove(str,e, currentPatterning,downPoint,keyDown) {
|
||
const currentPoint = e.absolutePointer
|
||
let width,height,top,left,radius,rx,ry
|
||
switch (str) {
|
||
case 'line':
|
||
currentPatterning.set('x2', currentPoint.x)
|
||
currentPatterning.set('y2', currentPoint.y)
|
||
break
|
||
case 'rect':
|
||
width = Math.abs(downPoint.x - currentPoint.x)
|
||
height = Math.abs(downPoint.y - currentPoint.y)
|
||
|
||
top = currentPoint.y > downPoint.y ? downPoint.y : currentPoint.y
|
||
left = currentPoint.x > downPoint.x ? downPoint.x : currentPoint.x
|
||
|
||
currentPatterning.set('width', width)
|
||
currentPatterning.set('height', height)
|
||
currentPatterning.set('top', top)
|
||
currentPatterning.set('left', left)
|
||
break
|
||
case 'circle':
|
||
radius = Math.min(Math.abs(downPoint.x - currentPoint.x), Math.abs(downPoint.y - currentPoint.y)) / 2
|
||
top = currentPoint.y > downPoint.y ? downPoint.y : downPoint.y - radius * 2
|
||
left = currentPoint.x > downPoint.x ? downPoint.x : downPoint.x - radius * 2
|
||
|
||
currentPatterning.set('radius', radius)
|
||
currentPatterning.set('top', top)
|
||
currentPatterning.set('left', left)
|
||
break
|
||
case 'triangle':
|
||
width = Math.abs(downPoint.x - currentPoint.x)
|
||
height = Math.abs(downPoint.y - currentPoint.y)
|
||
top = currentPoint.y > downPoint.y ? downPoint.y : currentPoint.y
|
||
left = currentPoint.x > downPoint.x ? downPoint.x : currentPoint.x
|
||
currentPatterning.set('width', width)
|
||
currentPatterning.set('height', height)
|
||
currentPatterning.set('top', top)
|
||
currentPatterning.set('left', left)
|
||
break
|
||
case 'ellipse':
|
||
rx = Math.abs(downPoint.x - currentPoint.x) / 2
|
||
if(keyDown.indexOf('ShiftLeft')>-1){
|
||
ry = Math.abs(downPoint.y - currentPoint.y) / 2
|
||
if(rx > ry){
|
||
ry = rx
|
||
}else{
|
||
rx = ry
|
||
}
|
||
}else{
|
||
ry = Math.abs(downPoint.y - currentPoint.y) / 2
|
||
}
|
||
height = width
|
||
|
||
top = currentPoint.y > downPoint.y ? downPoint.y : downPoint.y - ry * 2
|
||
left = currentPoint.x > downPoint.x ? downPoint.x : downPoint.x - rx * 2
|
||
|
||
currentPatterning.set('rx', rx)
|
||
currentPatterning.set('ry', ry)
|
||
currentPatterning.set('top', top)
|
||
currentPatterning.set('left', left)
|
||
break
|
||
case 'fold':
|
||
let points = currentPatterning.points
|
||
points[points.length - 1].x = currentPoint.x
|
||
points[points.length - 1].y = currentPoint.y
|
||
break
|
||
}
|
||
}
|
||
function JSRectUpdata(rect, downPointer, upPointer) {
|
||
let height = (downPointer.y - upPointer.y)
|
||
let width = (downPointer.x - upPointer.x)
|
||
rect.set({
|
||
height,
|
||
width
|
||
})
|
||
return rect
|
||
}
|
||
async function JSSetTexture(src,){
|
||
let img
|
||
await new Promise((resolve, reject) => {
|
||
img = new Image
|
||
img.src = src
|
||
img.onload = ()=>{
|
||
img.width = 200
|
||
img.height = 200
|
||
resolve()
|
||
img.remove()
|
||
}
|
||
})
|
||
return img
|
||
}
|
||
let JSSetRemoveImage = (fun)=>{
|
||
const deleteIcon = cuowuImg
|
||
// 创建删除图片元素
|
||
const cornerSize = 24
|
||
let deleteImg = document.createElement('img')
|
||
deleteImg.src = deleteIcon
|
||
let renderIcon = (icon) => {
|
||
return (ctx, left, top, styleOverride, fabricObject)=> {
|
||
var size = cornerSize;
|
||
ctx.save();
|
||
ctx.translate(left, top);
|
||
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
|
||
ctx.drawImage(icon, -size/3, -size/3, size/1.5, size/1.5);
|
||
ctx.restore();
|
||
}
|
||
}
|
||
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
|
||
x: 0.5,
|
||
y: -0.5,
|
||
offsetY: -16,
|
||
offsetX: 16,
|
||
cursorStyle: 'pointer',
|
||
mouseUpHandler:fun,
|
||
render: renderIcon(deleteImg),
|
||
cornerSize: cornerSize
|
||
})
|
||
}
|
||
function JSSetGroup(data){
|
||
let rect
|
||
if(data.gradient){
|
||
let colorStops = []
|
||
data.gradient.gradientList.forEach(item=>{
|
||
let obj = {
|
||
offset:item.left.split('%')[0]/100,
|
||
color:`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`
|
||
}
|
||
colorStops.push(obj)
|
||
})
|
||
let { x0, y0, x1, y1 } = calculateGradientCoordinate(100,120,data.gradient.angle)
|
||
let linear = new fabric.Gradient({
|
||
type: 'linear', // 线性渐变
|
||
// coords: { x1: 0, y1: 0, x2: 200, y2: 0 }, // 渐变方向
|
||
coords: { x1:x0, y1:y0, x2:x1, y2:y1 }, // 渐变方向
|
||
colorStops: colorStops,
|
||
})
|
||
var color = new fabric.Rect({
|
||
top:0,
|
||
left:0,
|
||
width: 110,
|
||
height: 130,
|
||
textAlign: "left",
|
||
fill: linear // 设置渐变填充
|
||
// fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
|
||
});
|
||
var text = new fabric.Text('',{
|
||
left: 0,
|
||
top: 0,
|
||
fontSize: 0,
|
||
fontFamily: "Arial",
|
||
textAlign: "left",
|
||
fill: "black",
|
||
});
|
||
let text1 = new fabric.Text('',{
|
||
left: 0,
|
||
top: 0,
|
||
width: 20,
|
||
fontSize: 0,
|
||
fontFamily: "Arial",
|
||
textAlign: "left",
|
||
});
|
||
rect = {text,text1,color,width:110}
|
||
}else{
|
||
var text = new fabric.Text(data.tcx,{
|
||
left: 0,
|
||
top: 60,
|
||
fontSize: 14,
|
||
fontFamily: "Arial",
|
||
textAlign: "left",
|
||
fill: "black",
|
||
});
|
||
let text1 = new fabric.Text(data.name,{
|
||
left: 0,
|
||
top: 80,
|
||
width: 20,
|
||
fontSize: 14,
|
||
fontFamily: "Arial",
|
||
textAlign: "left",
|
||
});
|
||
let width = 110 > text1.width ? 110 : text1.width;
|
||
var color = new fabric.Rect({
|
||
width: width,
|
||
height: 60,
|
||
textAlign: "left",
|
||
fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
|
||
});
|
||
rect = {text,text1,color,width}
|
||
}
|
||
return rect
|
||
}
|
||
function JSSetPencil(str,canvas){
|
||
let pencil
|
||
if(str == 'PencilBrush'){
|
||
pencil = new fabric.PencilBrush(canvas,{}); //普通笔
|
||
}else if(str == 'Marking'){
|
||
pencil = new fabric.PencilBrush(canvas,); //记号笔
|
||
}else if(str == 'InkBrush'){
|
||
pencil = new fabric.InkBrush(canvas,{}); //油画笔
|
||
}else if(str=='CrayonBrush'){
|
||
pencil = new fabric.CrayonBrush(canvas,{}); //蜡笔
|
||
}else if(str == 'RibbonBrush'){
|
||
pencil = new fabric.RibbonBrush(canvas,{width: 1,}); //色带
|
||
}else if(str == 'MarkerBrush'){
|
||
pencil = new fabric.MarkerBrush(canvas,{}); //书写笔
|
||
// pencil = new fabric.PenBrush(canvas,{}); //书写笔
|
||
}else if(str == 'WritingBrush'){
|
||
pencil = new fabric.WritingBrush(canvas,{}); //毛笔
|
||
}else if(str == 'LongfurBrush'){
|
||
pencil = new fabric.LongfurBrush(canvas,{width: 1,}); //色带
|
||
}else if(str == 'SpraypaintBrush'){
|
||
pencil = new fabric.SpraypaintBrush(canvas,{}); //长毛刷
|
||
}
|
||
return pencil
|
||
}
|
||
export {
|
||
multiselectJS,
|
||
JSRectUpdata,
|
||
JSchangeType,
|
||
JScanvasMouseDown,
|
||
JScanvasMouseMove,
|
||
JScreateCheck,
|
||
exportSele,
|
||
JSSetTexture,
|
||
JSSetRemoveImage,
|
||
JSSetGroup,
|
||
JSSetPencil,
|
||
} |