fabricjs 图像放置对齐问题

Question

我使用 fabricjs 上传图片，bootstrap css 上传后图片预览位于顶部。

当我点击图片时 hsa 出现在右侧，但它出现在底部。

这是我的html

        <div class="container-fluid" style="border:1px solid red">
      <div class="row">
        <div class="col-md-6">
          <img *ngFor="let item of urls" (click)="onClik(item)"  [src]="item.url" class="rounded mb-3" width="180">
          <input type="file" multiple (change)="detectFiles($event)">
          <br/>
          <h1>Preview</h1>
        </div>
        <div class="col-md-6">
          <div id="mainarea">
          </div>
        </div>
      </div>
    </div>

这是我的stackblitzlink

示例我的图片现在如何显示

Answer 1

主要问题是您没有将新创建的画布附加到您的容器元素（事实上，您只是声明 container 但根本没有使用它），而是附加到 body 元素.所以，而不是

this.renderer.appendChild(document.body, newCanvas);

你应该做

this.rendered.appendChild(this.container, newCanvas);

此外，您可能必须将 display: flex 添加到容器 div，以便画布并排显示。

Answer 2

您好，请检查这是否已更改 HTML

https://angular-ivy-mt5mbv.stackblitz.io

fabricjs 图像放置对齐问题

fabricjs image placing alignment issue

javascript

fabricjs

angular