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-03-20 13:34:07 +08:00
parent 5f9fe870c7
commit c5e3a5036d
33 changed files with 579 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -180,7 +180,6 @@ fabric.Stroke = fabric.util.createClass(fabric.Object,{
update: function(pointer, subtractPoint, distance) {
this._lastPoint = fabric.util.object.clone(this._point);
this._point = this._point.addEquals({ x: subtractPoint.x, y: subtractPoint.y });
var n = this.inkAmount / (distance + 1),
per = (n > 0.3 ? 0.2 : n < 0 ? 0 : n);
this._currentLineWidth = this.lineWidth * per;
@@ -404,12 +403,10 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
},
_render: function(pointer) {
console.log(this.color);
var len, i, point = this.setPointer(pointer),
subtractPoint = point.subtract(this._lastPoint),
distance = point.distanceFrom(this._lastPoint),
stroke;
for (i = 0, len = this._strokes.length; i < len; i++) {
stroke = this._strokes[i];
stroke.update(point, subtractPoint, distance);
@@ -471,11 +468,10 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
_resetTip: function(pointer) {
var len, i, point = this.setPointer(pointer);
this._strokes = [];
this.size = this.width;
this._range = this.size / 2;
for (i = 0, len = this.size; i < len; i++) {
this._strokes[i] = new fabric.Stroke(this.canvas.contextTop, point, this._range, this.color, this.width+10, this._inkAmount);
}
@@ -756,6 +752,79 @@ fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
this.convertToImg();
}
}); // End MarkerBrush
/**
* PenBrush
* Based on code by Tennison Chan.
*/
fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
color: '#000',
opacity: 1,
width: 30,
_baseWidth: 15,
_lastPoint: null,
_lineWidth: 2,
_point: null,
_size: 0,
initialize: function(canvas, opt) {
opt = opt || {};
this.canvas = canvas;
this.width = opt.width || this.width;
this.color = opt.color || this.color;
this.opacity = opt.opacity || this.opacity;
this._baseWidth = this.width;
this.canvas.contextTop.globalAlpha = this.opacity;
this._point = new fabric.Point();
this.canvas.contextTop.lineJoin = 'round';
this.canvas.contextTop.lineCap = 'round';
},
_render: function(pointer) {
var ctx, lineWidthDiff, i, len;
ctx = this.canvas.contextTop;
ctx.beginPath();
// let num = this._size / this._lineWidth / 2 / 1.2
let num = this.width/1.25 / 2
for(i = 0, len = this.width/1.25 ; i < len; i++) {
// for(i = 0, len = (this._size / this._lineWidth) / 1.2; i < len; i++) {
var randomNum = Math.random() * (0.6 - 0.2) + 0.2;
var color = this.color.replace(/1(?=\))/, randomNum);
this.canvas.contextTop.strokeStyle = color;
console.log(color);
lineWidthDiff = (this._lineWidth - 1) * i;
ctx.globalAlpha = 0.8 * this.opacity;
ctx.moveTo(this._lastPoint.x, this._lastPoint.y + lineWidthDiff-num);
ctx.lineTo(pointer.x, pointer.y + lineWidthDiff-num);
ctx.stroke();
}
this._lastPoint = new fabric.Point(pointer.x, pointer.y);
},
onMouseDown: function(pointer) {
this._lastPoint = pointer;
this.canvas.contextTop.lineWidth = this._lineWidth;
this._size = this.width + this._baseWidth;
},
onMouseMove: function(pointer) {
if (this.canvas._isCurrentlyDrawing) {
this._render(pointer);
}
},
onMouseUp: function() {
this.canvas.contextTop.globalAlpha = this.opacity;
this.canvas.contextTop.globalAlpha = 1;
this.convertToImg();
}
}); // End PenBrush
/**
* RibbonBrush
* Based on code by Mr. Doob.