import Diagram from '@/assets/js/newDiagram'
|
import ACImg from '../images/AC.png'
|
import frequencyImg from '../images/frequency.png'
|
import parameterImg from '../images/parameter.png'
|
|
const lineWidth = 5;
|
const lineStrokeColor = '#00f6f8';
|
const frequencyWidth = 96;
|
const ACWidth = 124;
|
const parameterWidth = 85;
|
|
function girdCircuitDiagram(stc, flush) {
|
let diagram = new Diagram();
|
diagram.setCanvas(stc, flush);
|
|
let start = [260, 380];
|
|
let Image1 = diagram.drawImage({
|
id: 'img1',
|
url: frequencyImg,
|
point: [start[0] - frequencyWidth, start[1] - frequencyWidth * 148 / 96 / 2],
|
width: frequencyWidth,
|
height: frequencyWidth * 148 / 96
|
})
|
|
let line1 = diagram.line({
|
id: 'line1',
|
strokeStyle: lineStrokeColor,
|
lineWidth: lineWidth,
|
points: [
|
start,
|
[start[0] + 110, start[1]]
|
]
|
})
|
|
let line2 = diagram.line({
|
id: 'line2',
|
strokeStyle: lineStrokeColor,
|
lineWidth: lineWidth,
|
points: [
|
[line1[1][0], line1[1][1]],
|
[line1[1][0] + 100, line1[1][1]]
|
]
|
})
|
|
let Image2 = diagram.drawImage({
|
id: 'img2',
|
url: ACImg,
|
point: [line2[1][0], line2[1][1] - ACWidth / 2],
|
width: ACWidth,
|
height: ACWidth
|
})
|
|
let line3 = diagram.line({
|
id: 'line3',
|
strokeStyle: lineStrokeColor,
|
lineWidth: lineWidth,
|
points: [
|
[line2[1][0] + Image2.width, line2[1][1]],
|
[line2[1][0] + Image2.width + 90, line2[1][1]]
|
]
|
})
|
|
let arc1 = diagram.arc({
|
id: 'arc1',
|
point: [
|
line3[1][0] + 6, line3[1][1]
|
],
|
fillStyle: lineStrokeColor,
|
strokeStyle: lineStrokeColor,
|
radius: 12,
|
type: 'fill'
|
})
|
|
let line4 = diagram.line({
|
id: 'line4',
|
strokeStyle: lineStrokeColor,
|
lineWidth: lineWidth,
|
points: [
|
[line3[1][0] + arc1.radius, line3[1][1]],
|
[line3[1][0] + arc1.radius + 90, line3[1][1]]
|
]
|
})
|
|
let Image3 = diagram.drawImage({
|
id: 'img3',
|
url: ACImg,
|
point: [line4[1][0], line4[1][1] - ACWidth / 2],
|
width: ACWidth,
|
height: ACWidth
|
})
|
|
let line5 = diagram.line({
|
id: 'line5',
|
strokeStyle: lineStrokeColor,
|
lineWidth: lineWidth,
|
points: [
|
[line4[1][0] + Image3.width, line4[1][1]],
|
[line4[1][0] + Image3.width + 100, line4[1][1]]
|
]
|
})
|
|
let line6 = diagram.line({
|
id: 'line6',
|
strokeStyle: lineStrokeColor,
|
lineWidth: lineWidth,
|
points: [
|
[line5[1][0], line5[1][1]],
|
[line5[1][0] + 110, line5[1][1]]
|
]
|
})
|
|
let Image4 = diagram.drawImage({
|
id: 'img4',
|
url: frequencyImg,
|
point: [line6[1][0], line6[1][1] - frequencyWidth * 148 / 96 / 2],
|
width: frequencyWidth,
|
height: frequencyWidth * 148 / 96
|
})
|
|
let line7 = diagram.line({
|
id: 'line7',
|
strokeStyle: lineStrokeColor,
|
lineWidth: lineWidth,
|
points: [
|
[line1[1][0], line1[1][1]],
|
[line1[1][0], line1[1][1] - 200]
|
]
|
})
|
|
let line8 = diagram.line({
|
id: 'line8',
|
strokeStyle: lineStrokeColor,
|
lineWidth: lineWidth,
|
points: [
|
[line7[1][0], line7[1][1]],
|
[line3[1][0] + arc1.radius / 2 - parameterWidth / 2, line7[1][1]]
|
]
|
})
|
|
let Image5 = diagram.drawImage({
|
id: 'img5',
|
url: parameterImg,
|
point: [line8[1][0], line8[1][1] - frequencyWidth * 141 / 85 / 2],
|
width: parameterWidth,
|
height: parameterWidth * 141 / 85
|
})
|
|
let line9 = diagram.line({
|
id: 'line9',
|
strokeStyle: lineStrokeColor,
|
lineWidth: lineWidth,
|
points: [
|
[line8[1][0] + Image5.width, line8[1][1]],
|
[line5[1][0], line8[1][1]],
|
]
|
})
|
|
let line10 = diagram.line({
|
id: 'line10',
|
strokeStyle: lineStrokeColor,
|
lineWidth: lineWidth,
|
points: [
|
[line9[1][0], line9[1][1]],
|
[line9[1][0], line5[1][1]],
|
]
|
})
|
|
let line11 = diagram.line({
|
id: 'line11',
|
strokeStyle: lineStrokeColor,
|
lineWidth: lineWidth,
|
points: [
|
[line3[1][0] + arc1.radius / 2, line3[1][1]],
|
[line3[1][0] + arc1.radius / 2, line3[1][1] + 110],
|
]
|
})
|
|
return diagram;
|
}
|
|
|
export default girdCircuitDiagram;
|
