fabric.js图像放置对齐问题

问题描述

在上传图像预览之后，我使用了fabricjs进行图像上传，并使用了bootstrap进行css加载.

当我单击图像hsa时，它会出现在右侧，但它会出现在底部.

这是我的html

 < div class ="container-fluid"style ="border:1px实心红色"< div class ="row">< div class ="col-md-6">< img * ngFor =" URL的项目"(click)="onClik(item)".[src] ="item.url"class =四舍五入的mb-3".宽度="180"<输入类型=文件"；多个(变化)＝"detectFiles($ event)".< br/>< h1>预览</h1></div>< div class ="col-md-6">< div id ="mainarea"></div></div></div></div> 

这是我的

解决方案

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

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

你应该做

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

此外，您可能还必须在容器div中添加 display:flex ，以使画布并排显示.

i was using fabricjs for image upload and bootstrap for css after upload the image preview is coming in the top.

When i click the image hsa to come in the right side but it's coming in the bottom.

Here is my 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>

Here is my stackblitz link

Example how my image is showing now

解决方案

The main problem is that you are not attaching the newly created canvases to your container element (in fact, you just declare container but you don't use it at all), but to the body element. So, instead of

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

you should do

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

Also, it's likely that you will have to add display: flex to the container div, in order for the canvases to appear side by side.

这篇关于fabric.js图像放置对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！