public/guilloche-generator
2
0
Fork 0
Code Pull Requests Activity

feat(graohsComponent): added vector configuration

Browse Source
This commit is contained in:
Michael Czechowski
2018-05-23 21:55:52 +02:00
parent b1e6faab99
commit 2d635148b8
9 changed files with 186 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/app/directives/guilloche.directive.ts
View File

@@ -5,6 +5,7 @@ import * as Shape from 'd3-shape';
import * as Random from 'd3-random';
import * as Drag from 'd3-drag';
import { environment as env } from './../../environments/environment';
import { Config } from './../models/config.model';
import { Point } from './../models/point.model';
import { Param } from './../models/param.model';
@@ -27,16 +28,16 @@ export class GuillocheDirective implements OnChanges {
) {
this.group = Selection.select(el.nativeElement);
this.canvas = Selection.select(this.canvasService.get);
this.gradientId = 'linear';
}
ngOnChanges(changes: SimpleChanges) {
console.log('guilloche directive (changes)', changes.graph.currentValue);
this.defineGradient();
this.drawGraph();
}
private drawGraph(): void {
console.log('guilloche directive(drawGraph)', this.graph);
private defineGradient(): void {
this.gradientId = `gradient-${this.graph.id}`;
const defs = this.group.append('defs');
const grad = defs.append('linearGradient')
@@ -47,33 +48,48 @@ export class GuillocheDirective implements OnChanges {
grad.append('stop')
.attr('stop-color', this.graph.end.color)
.attr('offset', '100%');
}
private drawGraph(): void {
const points = [this.graph.start.coords, ...this.graph.nodes, this.graph.end.coords];
this.group.append('path')
.attr('d', Shape.line()
.x(p => p.x)
.y(p => p.y)
.curve(Shape.curveBasis)([
this.graph.start.coords,
this.graph.end.coords
]))
.curve(Shape.curveBasis)(points))
.attr('stroke', `url(#${this.gradientId})`)
.attr('stroke-width', this.graph.stroke)
.attr('fill', 'none');
this.group.append('circle')
.attr('cx', this.graph.start.coords.x)
.attr('cy', this.graph.start.coords.y)
.attr('r', 20)
.attr('stroke-width', 1)
.attr('fill-opacity', 0)
.attr('stroke', this.graph.start.color);
if (!env.production) {
this.group.append('circle')
.attr('cx', this.graph.start.coords.x)
.attr('cy', this.graph.start.coords.y)
.attr('r', 20)
.attr('stroke-width', 1)
.attr('fill-opacity', 0)
.attr('stroke', this.graph.start.color);
this.group.append('circle')
.attr('cx', this.graph.end.coords.x)
.attr('cy', this.graph.end.coords.y)
.attr('r', 10)
.attr('stroke-width', 1)
.attr('fill-opacity', 0)
.attr('stroke', this.graph.end.color);
this.group.append('circle')
.attr('cx', this.graph.end.coords.x)
.attr('cy', this.graph.end.coords.y)
.attr('r', 10)
.attr('stroke-width', 1)
.attr('fill-opacity', 0)
.attr('stroke', this.graph.end.color);
this.graph.nodes.forEach(point => {
this.group.append('circle')
.attr('cx', point.x)
.attr('cy', point.y)
.attr('r', 5)
.attr('stroke-width', 1)
.attr('fill-opacity', 0)
.attr('stroke', 'darkgray');
});
}
console.log('guilloche directive(drawGraph)', this.graph);
}
}