长风破浪会有时
直挂云帆济沧海

vue+ts引入snap画svg

  public createSvg() {
    let svg: any = window.Snap("#newsvg");
    svg.clear();
    let svgPaper = svg.paper;
    this.svgLine(svgPaper,10,10,11,11);
  }  
//svg画线条
  public svgLine(
    svgPaper: any,
    x1: number,
    y1: number,
    x2: number,
    y2: number
  ) {
    svgPaper.line(x1, y1, x2, y2).attr({
      stroke: this.colorCard,
      fill: this.colorCard,
      style: "font-weight: normal; stroke-width: 1px;",
    });
  }
//svg画矩形
  public svgRect(
    svgPaper: any,
    x1: number,
    y1: number,
    x2: number,
    y2: number,
    rx?: number,//radius,圆角矩形
    ry?: number,
    dasharray?: boolean
  ) {
    svgPaper.rect(x1, y1, x2, y2, rx, ry).attr({
      stroke: this.colorCard,
      fill: this.colorCard,
      style: dasharray
        ? "font-weight: normal; stroke-width: 1px;fill-opacity: 0; stroke-dasharray:10,10;"
        : "font-weight: normal; stroke-width: 1px;fill-opacity: 0;",
    });
  }
  //svg的文字
  public svgText(
    svgPaper: any, 
    x: number, 
    y: number, 
    str: string,
    size?:number
) {
       svgPaper.text(x, y, str).attr({
         style: "font-size: 33px; font-family: 文泉驿微米黑;",
      });
  }

赞(7)
未经允许不得转载:阿锋哥前端开发经验分享 » vue+ts引入snap画svg
分享到: 更多 (0)

几百块就能做营销型企业网站?

查看详情