svg.filter.js + Angular 7.3: как использовать - PullRequest
Новая
       19

svg.filter.js + Angular 7.3: как использовать

1 голос
/ 26 апреля 2019

Подскажите, как правильно подключить библиотеку svg.filter.js в проекте Angular

Пытался сделать что-то подобное svg.js + Angular 7.3: при сборке в производственном режиме получим 'not constructor' 

import { Component, OnInit } from '@angular/core';
import SVG from "@svgdotjs/svg.js/src/svg"   //v 3.0.12
import Filter from '@svgdotjs/svg.filter.js/src/svg.filter';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'svgjs30';
  draw: any

  ngOnInit() {
    this.draw = SVG().addTo('#canvas').viewbox(0, 0, 300, 140)
    this.grayFilter = new Filter();
    this.grayFilter.colorMatrix('saturate', 1);
    this.draw.image(imagePath)
          .size(v.imageWidth, v.imageHeight)
          .move(v.compPosX, v.compPosY)
          .attr({id: 'obj' + v.compID}).filterWith(this.grayFilter);
  }
}

Но при таком использовании я получаю новый элемент svg в конце документа. 

<svg id="SvgjsSvg1001" width="2" height="0" style="overflow: hidden; top: -100%; left: -100%; position: absolute; opacity: 0;"><defs id="SvgjsDefs1002"></defs><polyline id="SvgjsPolyline1003" points="0,0"></polyline><path id="SvgjsPath1004" d="M0 0 "></path></svg>

1 Ответ

1 голос
/ 02 мая 2019

1001 * например * 

import { Component, OnInit } from '@angular/core';
import { SVG, Svg } from "@svgdotjs/svg.js"   //v 3.0
import "@svgdotjs/svg.filter.js"  //3.0.2

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  draw: Svg
  filter: any

  ngOnInit() {
    this.draw = SVG().addTo('#canvas').viewbox(0, 0, 300, 140)
    .attr({ overflow: "visible" })
    let rect = this.draw.rect(90, 100).fill('#f06');

    this.filter = this.draw.defs().filter()

    this.filter.dropShadow(this.filter.$sourceAlpha, 10, 10).gaussianBlur(5)
    this.filter.blend(this.filter.$source, blur)
    this.filter.size('200%', '200%').move('-50%', '-50%')

    rect.filterWith(this.filter) //v3.0

  }
}
...