Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
function drawing() {
let canvasObject = null
// console.log(drawType)
// console.log(drawWidth)
if (drawType == 'handle') {
return
}
// 清理历史滑动痕迹
if (drawingObject) {
canvas.remove(drawingObject)
}
switch (drawType) {
case "line": {
canvasObject = new fabric.Line([mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y], {
stroke: color,
strokeWidth: drawWidth
})
break
}
case "rectangle": {
let left = mouseFrom.x,
top = mouseFrom.y,
width = mouseTo.x - mouseFrom.x,
height = mouseTo.y - mouseFrom.y
canvasObject = new fabric.Rect({
left: width > 0 ? left : left + width,
top: height > 0 ? top : top + height,
width: Math.abs(width),
height: Math.abs(height),
makePolygonLine: function(startCircle, endCircle) {
let coords = [
startCircle.left + startCircle.radius,
startCircle.top + startCircle.radius,
endCircle.left + endCircle.radius,
endCircle.top + endCircle.radius
]
//console.log("coords", coords);
return new fabric.Line(coords, {
id: this.getRandId(),
fill: 'white',
stroke: 'white',
strokeWidth: 1,
selectable: false,
hasControls: false,
labelType: POLY_LINE_LABEL,
score: 1.0,
//https://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=context-menu
hoverCursor: 'default',
});
},
let hexagon6 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
left: 160,
top: 160,
strokeWidth: 1,
opacity: 0,
}));
let line1 = new fabric.Line(deepcopy(linePts), {
stroke: 'white',
originX: 'center',
strokeWidth: 2,
top: 50,
left: 0,
});
let line2 = new fabric.Line(deepcopy(linePts), {
stroke: 'white',
strokeWidth: 2,
originX: 'center',
angle: -60,
top: 28,
left: 35,
});
let group1 = new fabric.Group([hexagon3, line1, line2], {
left: 490,
top: 400,
originX: 'center',
originY: 'center',
});
page.add(hexagon1, hexagon2, hexagon4, hexagon5, hexagon6, group1);
function makeLine(coords) {
return new fabric.Line(coords, {
fill: 'black',
stroke: 'black',
strokeWidth: 2,
selectable: false,
evented: false
});
}
doMouseDown(o) {
this.isDown = true;
let canvas = this._canvas;
var pointer = canvas.getPointer(o.e);
var points = [pointer.x, pointer.y, pointer.x, pointer.y];
this.line = new fabric.Line(points, {
strokeWidth: this._width,
fill: this._color,
stroke: this._color,
originX: 'center',
originY: 'center',
selectable: false,
evented: false
});
canvas.add(this.line);
}
doMouseDown(o) {
this.isDown = true;
let canvas = this._canvas;
var pointer = canvas.getPointer(o.e);
var points = [pointer.x, pointer.y, pointer.x, pointer.y];
this.line = new fabric.Line(points, {
strokeWidth: this._width,
fill: this._color,
stroke: this._color,
originX: 'center',
originY: 'center',
selectable: false,
evented: false
});
this.head = new fabric.Triangle({
fill: this._color,
left: pointer.x,
top: pointer.y,
originX: 'center',
originY: 'center',
height: 3 * this._width,
this.started = true;
this.newObject = new fabric.Ellipse({
left: e.pointer.x,
top: e.pointer.y,
rx: 0,
ry: 0,
fill: selectedFill,
stroke: selectedStroke,
strokeWidth: size,
selectable: false,
hoverCursor: 'default',
});
this.b.add(this.newObject);
} else if (option === 'line') {
this.started = true;
this.newObject = new fabric.Line([e.pointer.x, e.pointer.y, e.pointer.x, e.pointer.y], {
strokeWidth: size,
stroke: selectedStroke,
originX: 'center',
originY: 'center',
selectable: false,
hoverCursor: 'default',
});
this.b.add(this.newObject);
}
};
const canvas = new fabric.StaticCanvas('c', {
backgroundColor: selectedTheme.backgroundColor,
width: wide ? width + wideBy : width,
height: height
})
const x0 = wide ? wideBy / 2 : 0
const separatorOptions = {
stroke: selectedTheme.separatorColor,
strokeWidth: 0.5,
opacity: selectedTheme.separatorOpacity,
}
const lineTopHorizontal = new fabric.Line([x0, 91, width, 91], separatorOptions)
const lineCenterVertical = new fabric.Line(
[width / 2, 91, width / 2, height],
separatorOptions,
)
const lineCenterHorizontal = new fabric.Line(
[x0, 91 + (height - 91) / 2, width, 91 + (height - 91) / 2],
separatorOptions,
)
const packageNameText = new fabric.Text(name, {
fontFamily: 'Source Code Pro',
fontSize: 45,
fill: selectedTheme.nameColor,
opacity: 0.8,
top: 19,
})
})
const x0 = wide ? wideBy / 2 : 0
const separatorOptions = {
stroke: selectedTheme.separatorColor,
strokeWidth: 0.5,
opacity: selectedTheme.separatorOpacity,
}
const lineTopHorizontal = new fabric.Line([x0, 91, width, 91], separatorOptions)
const lineCenterVertical = new fabric.Line(
[width / 2, 91, width / 2, height],
separatorOptions,
)
const lineCenterHorizontal = new fabric.Line(
[x0, 91 + (height - 91) / 2, width, 91 + (height - 91) / 2],
separatorOptions,
)
const packageNameText = new fabric.Text(name, {
fontFamily: 'Source Code Pro',
fontSize: 45,
fill: selectedTheme.nameColor,
opacity: 0.8,
top: 19,
})
const packageAtText = new fabric.Text('@', {
fontFamily: 'Source Code Pro',
fontSize: 35,
fill: '#91D396',