Частично затемненный холст при использовании html2canvas в div, который отображает ngx-график - PullRequest
2 голосов
/ 09 июля 2019

Я использую ngx-graph для angular для отображения чего-либо графического.Поскольку нет прямой возможности загружать графику, я огляделся и нашел людей, использующих ngx-charts и html2canvas для генерации загружаемого холста своих диаграмм.

Теперь я пытаюсь использовать html2canvas для генерации загружаемого холстамой график, но холст, сгенерированный html2canvas, затемняет часть содержимого моего графика.

1) части блоков узлов Текст отсутствует

2) линии, ссылки на узлы отсутствуютпока кончики стрелок видны.

Как выглядит div

Как выглядит холст из html2canvas

Код из моей реализации ngx-графа:

<div id="graph" #graph>
  <ngx-graph class="chart-container" [links]="links" [nodes]="nodes" [legend]="false" [draggingEnabled]="false">

    <ng-template #defsTemplate>
      <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto" fill="white">
        <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
      </svg:marker>
    </ng-template>

    <ng-template #nodeTemplate let-node>
      <svg:g class="node">
        <svg:rect [attr.width]="node.dimension.width" [attr.height]="node.dimension.height" fill="white"/>
        <svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">{{node.label}}
        </svg:text>
      </svg:g>
    </ng-template>

    <ng-template #linkTemplate let-link>
      <svg:g class="edge">
        <svg:path class="line" stroke-width="3" marker-end="url(#arrow)">
        </svg:path>
      </svg:g>
    </ng-template>

  </ngx-graph>
</div>

<button mat-button (click)="downloadAsPicture()" [disabled]="false">
  <mat-icon>cloud_download</mat-icon><span>Download as .png</span>
</button>

Код из моей реализации html2canvas:

downloadAsPicture() {
    html2canvas(document.getElementById("graph"), {height: 500})
    .then(function(canvas){
      var imgURL = canvas.toDataURL("image/png");
      var dlLink = document.createElement('a');
      dlLink.download = "image";
      dlLink.href = imgURL;
      dlLink.dataset.downloadurl = ["image/png", dlLink.download,   dlLink.href].join(':');

      document.body.appendChild(dlLink);
      dlLink.click();
      document.body.removeChild(dlLink);
      canvas.remove;
    });

Я ценю любую помощь, включая альтернативы ngx-graph, где то, чего я пытаюсь достичь, может быть более простым.

Большое спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...