307 lines
8.8 KiB
JavaScript
307 lines
8.8 KiB
JavaScript
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(str,e, width,patterning) {//创建线
|
||
let downPoint = e.absolutePointer
|
||
let currentPatterning
|
||
switch (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: 'rgba(0, 0, 0, 0.2)',
|
||
rx:5,
|
||
ry:5,
|
||
})
|
||
break
|
||
case 'line':
|
||
currentPatterning = new fabric.Line([
|
||
downPoint.x, downPoint.y, // 起始点坐标
|
||
downPoint.x, downPoint.y // 结束点坐标
|
||
],
|
||
{
|
||
stroke: 'rgba(0, 0, 0, 0.2)', // 笔触颜色
|
||
strokeLineCap: 'round',
|
||
strokeWidth:Number(width),
|
||
}
|
||
)
|
||
break
|
||
case 'circle':
|
||
currentPatterning = new fabric.Circle({
|
||
top: downPoint.y,
|
||
left: downPoint.x,
|
||
radius: 0,
|
||
fill: 'rgba(0, 0, 0, 0.2)',
|
||
// fill: 'transparent',
|
||
// stroke: 'rgba(0, 0, 0, 0.2)'
|
||
})
|
||
break
|
||
case 'triangle':
|
||
currentPatterning = new fabric.Triangle({
|
||
top: downPoint.y,
|
||
left: downPoint.x,
|
||
width: 0,
|
||
height: 0,
|
||
fill: 'rgba(0, 0, 0, 0.2)',
|
||
// fill: 'transparent',
|
||
// stroke: 'rgba(0, 0, 0, 0.2)'
|
||
})
|
||
break
|
||
case 'ellipse':
|
||
currentPatterning = new fabric.Ellipse({
|
||
top: downPoint.y,
|
||
left: downPoint.x,
|
||
rx: 0,
|
||
ry: 0,
|
||
fill: 'rgba(0, 0, 0, 0.2)',
|
||
// fill: 'transparent',
|
||
// stroke: 'rgba(0, 0, 0, 0.2)'
|
||
})
|
||
break
|
||
case 'fold':
|
||
currentPatterning = new fabric.Polyline([
|
||
{ x: downPoint.x, y: downPoint.y },
|
||
{ x: downPoint.x, y: downPoint.y }
|
||
],{
|
||
fill: 'transparent',
|
||
stroke: 'rgba(0, 0, 0, 0.2)',
|
||
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
|
||
}
|
||
function JSSetRemoveImage(fun){
|
||
const deleteIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC"
|
||
// 创建删除图片元素
|
||
let deleteImg = document.createElement('img')
|
||
deleteImg.src = deleteIcon
|
||
function renderIcon(icon) {
|
||
return function (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/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: 24
|
||
})
|
||
}
|
||
export {
|
||
multiselectJS,
|
||
JSRectUpdata,
|
||
JSchangeType,
|
||
JScanvasMouseDown,
|
||
JScanvasMouseMove,
|
||
JScreateCheck,
|
||
exportSele,
|
||
JSSetTexture,
|
||
JSSetRemoveImage
|
||
} |