aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新绘画功能

Browse Source
This commit is contained in:
X1627315083
2024-11-22 09:20:25 +08:00
parent fe3b89d615
commit 5d9dc7b77d
19 changed files with 3643 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/js/aligning_guidelines.js
View File

@@ -4,7 +4,7 @@
*
*/
var ctx,canvasAligning
function initAligningGuidelines(canvas,bor) {
function initAligningGuidelines(canvas,bor){
ctx = canvas.getSelectionContext()
canvasAligning = canvas
setCanvasAligning(bor)

211
public/js/fabric.brushes.js
View File

@@ -126,6 +126,40 @@ fabric.Point.prototype.normalize = function(thickness) {
* Convert a brush drawing on the upperCanvas to an image on the fabric canvas.
* This makes the drawing editable, it can be moved, rotated, scaled, skewed etc.
*/
fabric.BaseBrush.prototype.convertToPath = function() {
console.log(this.canvas.upperCanvasEl);
var pixelRatio = this.canvas.getRetinaScaling(),
c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl),
xy = fabric.util.trimCanvas(c),
path = this._points.map(arr => {
arr[1] = arr[1] / this.canvas.getZoom()
arr[2] = arr[2] / this.canvas.getZoom()
return arr.join(' ')
}).join(' '),
pathElemetn = new fabric.Path(path);
if(!xy){
return
}
let pointerX = this.canvas.viewportTransform[4];
let pointerY = this.canvas.viewportTransform[5];
pathElemetn.set({
strokeDashArray: [this._width*3, this._width*3],
strokeWidth: this._width,
stroke: 'black',
fill:'transparent',
}).setCoords();
let group = new fabric.Group([pathElemetn],{
left:((xy.x)/pixelRatio-pointerX)/this.canvas.getZoom(),
top:((xy.y)/pixelRatio-pointerY)/this.canvas.getZoom(),
custom:{
dashed:true
}
})
this.canvas.add(group).clearContext(this.canvas.contextTop);
this.canvas.clearContext(this.canvas.contextTop);
}
fabric.BaseBrush.prototype.convertToImg = function() {
var pixelRatio = this.canvas.getRetinaScaling(),
c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl),
@@ -135,8 +169,13 @@ fabric.BaseBrush.prototype.convertToImg = function() {
return
}
let pointerX = this.canvas.viewportTransform[4];
let pointerY = this.canvas.viewportTransform[5];
img.set({left:(xy.x)/pixelRatio-pointerX,top:(xy.y)/pixelRatio-pointerY,'scaleX':1/pixelRatio,'scaleY':1/pixelRatio}).setCoords();
let pointerY = this.canvas.viewportTransform[5];
img.set({
left:((xy.x)/pixelRatio-pointerX)/this.canvas.getZoom(),
top:((xy.y)/pixelRatio-pointerY)/this.canvas.getZoom(),
'scaleX':1/pixelRatio/this.canvas.getZoom(),
'scaleY':1/pixelRatio/this.canvas.getZoom()
}).setCoords();
this.canvas.add(img).clearContext(this.canvas.contextTop);
this.canvas.clearContext(this.canvas.contextTop);
}
@@ -234,8 +273,8 @@ fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this.canvas.contextTop.globalAlpha = this.opacity;
this._size = this.width / 2 + this._baseWidth;
this._drawn = false;
@@ -243,8 +282,8 @@ fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this.update(pointer);
this.draw(this.canvas.contextTop);
},
@@ -399,7 +438,6 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
initialize: function(canvas, opt) {
opt = opt || {};
this.canvas = canvas;
this.width = opt.width || this.width;
this.color = opt.color || this.color;
@@ -409,8 +447,8 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
},
_render: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
var len, i, point = this.setPointer(pointer),
subtractPoint = point.subtract(this._lastPoint),
distance = point.distanceFrom(this._lastPoint),
@@ -422,7 +460,7 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
}
if (distance > 30) {
// this.drawSplash(point, this._inkAmount);
this.drawSplash(point, this._inkAmount);
}
},
@@ -475,8 +513,8 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
},
_resetTip: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
var len, i, point = this.setPointer(pointer);
this._strokes = [];
@@ -510,8 +548,8 @@ fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points = [pointer];
this._count = 0;
@@ -524,8 +562,8 @@ fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points.push(pointer);
var i, dx, dy, d, size,
@@ -609,8 +647,8 @@ fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._lastPoint = pointer;
this.canvas.contextTop.strokeStyle = this.color;
this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -619,8 +657,8 @@ fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, {
onMouseMove: function(pointer) {
if (this.canvas._isCurrentlyDrawing) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._render(pointer);
}
},
@@ -680,8 +718,8 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._lastPoint = pointer;
this.canvas.contextTop.strokeStyle = this.color;
this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -690,8 +728,8 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
onMouseMove: function(pointer) {
if (this.canvas._isCurrentlyDrawing) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._render(pointer);
}
},
@@ -702,6 +740,67 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
this.convertToImg();
}
}); // End MarkerBrush
/**
* test
* Based on code by Tennison Chan.
*/
fabric.Test = fabric.util.createClass(fabric.BaseBrush, {
color: '#000',
opacity: 1,
_points: [],
_width: 2,
initialize: function(canvas, opt) {
opt = opt || {};
this.canvas = canvas;
this._width = opt._width || this._width;
this.color = opt.color || this.color;
},
_render: function(pointer) {
var ctx, lineWidthDiff, i, len;
ctx = this.canvas.contextTop;
this._points.push(['L', pointer.x, pointer.y]);
// if(this._points.length % 10 < 5){
let points = this._points
ctx.beginPath();
ctx.moveTo(points[points.length - 2][1], points[points.length - 2][2]);
ctx.lineTo(points[points.length - 1][1], points[points.length - 1][2]);
ctx.stroke();
// }
},
onMouseDown: function(pointer) {
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points = []
this._points.push(['M', pointer.x, pointer.y]);
var ctx = this.canvas.contextTop;
ctx.strokeStyle = 'rgba(' + 0 + ',' + 0 + ',' + 0 + ',' + 1 + ')';
ctx.lineWidth = this._width * this.canvas.getZoom();
ctx.lineJoin = ctx.lineCap = 'round';
},
onMouseMove: function(pointer) {
if (this.canvas._isCurrentlyDrawing) {
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._render(pointer);
}
},
onMouseUp: function() {
this._points.push(['Z']);
this.convertToPath();
}
}); // End test
/**
* MarkerBrush
* Based on code by Tennison Chan.
@@ -756,8 +855,8 @@ fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._lastPoint = pointer;
this.canvas.contextTop.strokeStyle = this.color;
this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -766,8 +865,8 @@ fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
onMouseMove: function(pointer) {
if (this.canvas._isCurrentlyDrawing) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._render(pointer);
}
},
@@ -833,8 +932,8 @@ fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._lastPoint = pointer;
this.canvas.contextTop.lineWidth = this._lineWidth;
this._size = this.width + this._baseWidth;
@@ -842,8 +941,8 @@ fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
onMouseMove: function(pointer) {
if (this.canvas._isCurrentlyDrawing) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._render(pointer);
}
},
@@ -900,8 +999,8 @@ fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, {
for (var i = 0; i < this._nrPainters; i++) {
this._painters.push({ dx:this.canvas.width / 2, dy:this.canvas.height / 2, ax:0, ay:0, div:.1, ease:Math.random() * .2 + .6 });
}
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._lastPoint = pointer;
//ctx.globalCompositeOperation = 'source-over';
@@ -918,8 +1017,8 @@ fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._lastPoint = pointer;
},
@@ -954,8 +1053,8 @@ fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points = [pointer];
var ctx = this.canvas.contextTop,
@@ -967,8 +1066,8 @@ fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points.push(pointer);
var ctx = this.canvas.contextTop,
@@ -1025,8 +1124,8 @@ fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, {
onMouseDown: function(pointer) {
this._count = 0;
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points = [pointer];
var ctx = this.canvas.contextTop,
@@ -1037,8 +1136,8 @@ fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points.push(pointer);
var i, dx, dy, d, factor = .3 * this.width,
@@ -1124,8 +1223,8 @@ fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, {
onMouseDown: function(pointer) {
this.canvas.contextTop.globalAlpha = this.opacity;
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._point = new fabric.Point(pointer.x, pointer.y);
this._lastPoint = this._point;
@@ -1138,8 +1237,8 @@ fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._lastPoint = this._point;
this._point = new fabric.Point(pointer.x, pointer.y);
},
@@ -1214,8 +1313,8 @@ fabric.SquaresBrush = fabric.util.createClass(fabric.BaseBrush, {
var ctx = this.canvas.contextTop,
color = fabric.util.colorValues(this.color),
bgColor = fabric.util.colorValues(this.bgColor);
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._lastPoint = pointer;
this._drawn = false;
@@ -1227,8 +1326,8 @@ fabric.SquaresBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
var ctx = this.canvas.contextTop,
dx = pointer.x - this._lastPoint.x,
dy = pointer.y - this._lastPoint.y,
@@ -1281,16 +1380,16 @@ fabric.WebBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points = [pointer];
this._count = 0;
this._colorValues = fabric.util.colorValues(this.color);
},
onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points.push(pointer);
var ctx = this.canvas.contextTop,