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){ if(!xy){
return 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.add(img).clearContext(this.canvas.contextTop);
this.canvas.clearContext(this.canvas.contextTop); this.canvas.clearContext(this.canvas.contextTop);
} }
@@ -232,6 +234,8 @@ fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, {
}, },
onMouseDown: function(pointer) { 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.canvas.contextTop.globalAlpha = this.opacity;
this._size = this.width / 2 + this._baseWidth; this._size = this.width / 2 + this._baseWidth;
this._drawn = false; this._drawn = false;
@@ -239,6 +243,8 @@ fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, {
}, },
onMouseMove: function(pointer) { onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this.update(pointer); this.update(pointer);
this.draw(this.canvas.contextTop); this.draw(this.canvas.contextTop);
}, },
@@ -403,6 +409,8 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
}, },
_render: function(pointer) { _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), var len, i, point = this.setPointer(pointer),
subtractPoint = point.subtract(this._lastPoint), subtractPoint = point.subtract(this._lastPoint),
distance = point.distanceFrom(this._lastPoint), distance = point.distanceFrom(this._lastPoint),
@@ -467,6 +475,8 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
}, },
_resetTip: function(pointer) { _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); var len, i, point = this.setPointer(pointer);
this._strokes = []; this._strokes = [];
@@ -500,6 +510,8 @@ fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, {
}, },
onMouseDown: function(pointer) { onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._points = [pointer]; this._points = [pointer];
this._count = 0; this._count = 0;
@@ -512,6 +524,8 @@ fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, {
}, },
onMouseMove: function(pointer) { onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._points.push(pointer); this._points.push(pointer);
var i, dx, dy, d, size, var i, dx, dy, d, size,
@@ -595,6 +609,8 @@ fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, {
}, },
onMouseDown: function(pointer) { onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._lastPoint = pointer; this._lastPoint = pointer;
this.canvas.contextTop.strokeStyle = this.color; this.canvas.contextTop.strokeStyle = this.color;
this.canvas.contextTop.lineWidth = this._lineWidth; this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -603,6 +619,8 @@ fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, {
onMouseMove: function(pointer) { onMouseMove: function(pointer) {
if (this.canvas._isCurrentlyDrawing) { if (this.canvas._isCurrentlyDrawing) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._render(pointer); this._render(pointer);
} }
}, },
@@ -662,6 +680,8 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
}, },
onMouseDown: function(pointer) { onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._lastPoint = pointer; this._lastPoint = pointer;
this.canvas.contextTop.strokeStyle = this.color; this.canvas.contextTop.strokeStyle = this.color;
this.canvas.contextTop.lineWidth = this._lineWidth; this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -670,6 +690,8 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
onMouseMove: function(pointer) { onMouseMove: function(pointer) {
if (this.canvas._isCurrentlyDrawing) { if (this.canvas._isCurrentlyDrawing) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._render(pointer); this._render(pointer);
} }
}, },
@@ -734,6 +756,8 @@ fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
}, },
onMouseDown: function(pointer) { onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._lastPoint = pointer; this._lastPoint = pointer;
this.canvas.contextTop.strokeStyle = this.color; this.canvas.contextTop.strokeStyle = this.color;
this.canvas.contextTop.lineWidth = this._lineWidth; this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -742,6 +766,8 @@ fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
onMouseMove: function(pointer) { onMouseMove: function(pointer) {
if (this.canvas._isCurrentlyDrawing) { if (this.canvas._isCurrentlyDrawing) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._render(pointer); this._render(pointer);
} }
}, },
@@ -807,6 +833,8 @@ fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
}, },
onMouseDown: function(pointer) { onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._lastPoint = pointer; this._lastPoint = pointer;
this.canvas.contextTop.lineWidth = this._lineWidth; this.canvas.contextTop.lineWidth = this._lineWidth;
this._size = this.width + this._baseWidth; this._size = this.width + this._baseWidth;
@@ -814,6 +842,8 @@ fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
onMouseMove: function(pointer) { onMouseMove: function(pointer) {
if (this.canvas._isCurrentlyDrawing) { if (this.canvas._isCurrentlyDrawing) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._render(pointer); this._render(pointer);
} }
}, },
@@ -870,7 +900,8 @@ fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, {
for (var i = 0; i < this._nrPainters; i++) { 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 }); 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; this._lastPoint = pointer;
//ctx.globalCompositeOperation = 'source-over'; //ctx.globalCompositeOperation = 'source-over';
@@ -887,6 +918,8 @@ fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, {
}, },
onMouseMove: function(pointer) { onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._lastPoint = pointer; this._lastPoint = pointer;
}, },
@@ -921,6 +954,8 @@ fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, {
}, },
onMouseDown: function(pointer) { onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._points = [pointer]; this._points = [pointer];
var ctx = this.canvas.contextTop, var ctx = this.canvas.contextTop,
@@ -932,6 +967,8 @@ fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, {
}, },
onMouseMove: function(pointer) { onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._points.push(pointer); this._points.push(pointer);
var ctx = this.canvas.contextTop, var ctx = this.canvas.contextTop,
@@ -988,6 +1025,8 @@ fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, {
onMouseDown: function(pointer) { onMouseDown: function(pointer) {
this._count = 0; this._count = 0;
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._points = [pointer]; this._points = [pointer];
var ctx = this.canvas.contextTop, var ctx = this.canvas.contextTop,
@@ -998,6 +1037,8 @@ fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, {
}, },
onMouseMove: function(pointer) { onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._points.push(pointer); this._points.push(pointer);
var i, dx, dy, d, factor = .3 * this.width, var i, dx, dy, d, factor = .3 * this.width,
@@ -1083,6 +1124,8 @@ fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, {
onMouseDown: function(pointer) { onMouseDown: function(pointer) {
this.canvas.contextTop.globalAlpha = this.opacity; 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._point = new fabric.Point(pointer.x, pointer.y);
this._lastPoint = this._point; this._lastPoint = this._point;
@@ -1095,6 +1138,8 @@ fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, {
}, },
onMouseMove: function(pointer) { onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._lastPoint = this._point; this._lastPoint = this._point;
this._point = new fabric.Point(pointer.x, pointer.y); 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, var ctx = this.canvas.contextTop,
color = fabric.util.colorValues(this.color), color = fabric.util.colorValues(this.color),
bgColor = fabric.util.colorValues(this.bgColor); 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._lastPoint = pointer;
this._drawn = false; this._drawn = false;
@@ -1181,6 +1227,8 @@ fabric.SquaresBrush = fabric.util.createClass(fabric.BaseBrush, {
}, },
onMouseMove: function(pointer) { onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
var ctx = this.canvas.contextTop, var ctx = this.canvas.contextTop,
dx = pointer.x - this._lastPoint.x, dx = pointer.x - this._lastPoint.x,
dy = pointer.y - this._lastPoint.y, dy = pointer.y - this._lastPoint.y,
@@ -1233,12 +1281,16 @@ fabric.WebBrush = fabric.util.createClass(fabric.BaseBrush, {
}, },
onMouseDown: function(pointer) { onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._points = [pointer]; this._points = [pointer];
this._count = 0; this._count = 0;
this._colorValues = fabric.util.colorValues(this.color); this._colorValues = fabric.util.colorValues(this.color);
}, },
onMouseMove: function(pointer) { onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
this._points.push(pointer); this._points.push(pointer);
var ctx = this.canvas.contextTop, var ctx = this.canvas.contextTop,

4
src/component/Detail/setDesignItem.vue
View File

@@ -40,9 +40,9 @@
</div> </div>
<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div> <div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
</div> </div>
<div class="design_compile_content"> <!-- <div class="design_compile_content">
<editFrontBack :patchData="frontBack" :imgDomIndex="imgDomIndex" ref="editFrontBack"></editFrontBack> <editFrontBack :patchData="frontBack" :imgDomIndex="imgDomIndex" ref="editFrontBack"></editFrontBack>
</div> </div> -->
</template> </template>

4
src/component/modules/generalMiniCanvas.vue
View File

@@ -18,7 +18,7 @@
<span>{{ $t('exportModel.Color') }}</span> <span>{{ $t('exportModel.Color') }}</span>
<input type="color" @input="setPencilColor" v-model="canvasPencilColor"> <input type="color" @input="setPencilColor" v-model="canvasPencilColor">
</div> </div>
<!-- <div class="generalMiniCanvas_input_item brushwork" v-show="canvasState == 'pencil'"> <div class="generalMiniCanvas_input_item brushwork" v-show="canvasState == 'pencil'">
<span >{{ $t('exportModel.Brushwork') }}:</span> <span >{{ $t('exportModel.Brushwork') }}:</span>
<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue" <a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
style="width: 20rem" style="width: 20rem"
@@ -28,7 +28,7 @@
<img :src="item.url" alt=""> <img :src="item.url" alt="">
</a-select-option> </a-select-option>
</a-select> </a-select>
</div> --> </div>
</div> </div>
<div class="exportCanvasBox_center_data"> <div class="exportCanvasBox_center_data">
<div class="generalMiniCanvas_btn generalMiniCanvas_item" :class="{spread:spreadState}"> <div class="generalMiniCanvas_btn generalMiniCanvas_item" :class="{spread:spreadState}">