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

mini画布添加笔触

Browse Source
This commit is contained in:
X1627315083
2024-10-14 16:42:28 +08:00
parent f29cb498f3
commit ac41bc1fd4
3 changed files with 59 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -134,7 +134,9 @@ fabric.BaseBrush.prototype.convertToImg = function() {
if(!xy){
return
}
img.set({left:xy.x/pixelRatio,top:xy.y/pixelRatio,'scaleX':1/pixelRatio,'scaleY':1/pixelRatio}).setCoords();
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();
this.canvas.add(img).clearContext(this.canvas.contextTop);
this.canvas.clearContext(this.canvas.contextTop);
}
@@ -232,6 +234,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];
this.canvas.contextTop.globalAlpha = this.opacity;
this._size = this.width / 2 + this._baseWidth;
this._drawn = false;
@@ -239,6 +243,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];
this.update(pointer);
this.draw(this.canvas.contextTop);
},
@@ -403,6 +409,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];
var len, i, point = this.setPointer(pointer),
subtractPoint = point.subtract(this._lastPoint),
distance = point.distanceFrom(this._lastPoint),
@@ -467,6 +475,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];
var len, i, point = this.setPointer(pointer);
this._strokes = [];
@@ -500,6 +510,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];
this._points = [pointer];
this._count = 0;
@@ -512,6 +524,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];
this._points.push(pointer);
var i, dx, dy, d, size,
@@ -595,6 +609,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];
this._lastPoint = pointer;
this.canvas.contextTop.strokeStyle = this.color;
this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -603,6 +619,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];
this._render(pointer);
}
},
@@ -662,6 +680,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];
this._lastPoint = pointer;
this.canvas.contextTop.strokeStyle = this.color;
this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -670,6 +690,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];
this._render(pointer);
}
},
@@ -734,6 +756,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];
this._lastPoint = pointer;
this.canvas.contextTop.strokeStyle = this.color;
this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -742,6 +766,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];
this._render(pointer);
}
},
@@ -807,6 +833,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];
this._lastPoint = pointer;
this.canvas.contextTop.lineWidth = this._lineWidth;
this._size = this.width + this._baseWidth;
@@ -814,6 +842,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];
this._render(pointer);
}
},
@@ -870,7 +900,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];
this._lastPoint = pointer;
//ctx.globalCompositeOperation = 'source-over';
@@ -887,6 +918,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];
this._lastPoint = pointer;
},
@@ -921,6 +954,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];
this._points = [pointer];
var ctx = this.canvas.contextTop,
@@ -932,6 +967,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];
this._points.push(pointer);
var ctx = this.canvas.contextTop,
@@ -988,6 +1025,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];
this._points = [pointer];
var ctx = this.canvas.contextTop,
@@ -998,6 +1037,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];
this._points.push(pointer);
var i, dx, dy, d, factor = .3 * this.width,
@@ -1083,6 +1124,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];
this._point = new fabric.Point(pointer.x, pointer.y);
this._lastPoint = this._point;
@@ -1095,6 +1138,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];
this._lastPoint = this._point;
this._point = new fabric.Point(pointer.x, pointer.y);
},
@@ -1169,7 +1214,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];
this._lastPoint = pointer;
this._drawn = false;
@@ -1181,6 +1227,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];
var ctx = this.canvas.contextTop,
dx = pointer.x - this._lastPoint.x,
dy = pointer.y - this._lastPoint.y,
@@ -1233,12 +1281,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];
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];
this._points.push(pointer);
var ctx = this.canvas.contextTop,