时间戳

首页 > 解决方案 > Canvas/FabricJS 中的气泡？

html - Canvas/FabricJS 中的气泡？

问题描述

寻找一种在我网站的 FabricJS 画布中制作常规语音气泡的方法。现在在你标记这篇文章之前，我确实看到了这个问题，它只是没有正确的答案，并且是为 WordPress 设计的，所以它对我来说并不是特别有用。

我想要的很清楚：一个带有文本的语音气泡和一个尾巴/手柄，您可以拖动它以将其指向某物。

我找到了这个库，但我似乎无法让它出现在我的 FabricJS 画布中？如果您可以向我解释如何将这个库添加到我的画布中，或者提供另一种制作气泡的方式，那将是崇高的。

标签： htmlcanvashtml5-canvasfabricjs

解决方案

我对 Fabric.js 进行了一些研究，并设法创建了一个程序气泡，但我无法快速将其转换为 Fabric.js 类（如果您想在画布上有多个气泡，这将是有意义的） . 也许它对您或其他人仍然有帮助https://codepen.io/timohausmann/pen/poywXzg

它基本上创建一个文本框，并基于文本的边界框更新它周围的 Rect 的位置。

var bound = textbox.getBoundingRect();
rect.left = bound.left - boxPadding;
rect.top = bound.top - boxPadding;
rect.width = bound.width + (boxPadding*2);
rect.height = bound.height + (boxPadding*2);

对于尾巴，我只是创建了一个透明的 Rect，您可以拖动它并使用它的坐标来绘制一个多边形，该多边形在“句柄”和文本框 center 之间具有三个点[A]。为了确保尾巴无论在什么位置都保持一定的宽度，我计算了句柄和语音气泡中心之间的度数[B]。为了使文本框和句柄的位置保持同步，我计算了文本框移动了多少，然后简单地将差异添加到句柄位置[C]。

//calculate degree between textbox and handle [B]
var angleRadians = Math.atan2(handle.top - textbox.top, 
                              handle.left - textbox.left);
var offsetX = Math.cos(angleRadians + (Math.PI/2));
var offsetY = Math.sin(angleRadians + (Math.PI/2));

//update the polygon [A]
poly.points[0].x = handle.left;
poly.points[0].y = handle.top;
poly.points[1].x = textbox.left - (offsetX * arrowWidth);
poly.points[1].y = textbox.top - (offsetY * arrowWidth); 
poly.points[2].x = textbox.left + (offsetX * arrowWidth);
poly.points[2].y = textbox.top + (offsetY * arrowWidth);

//update the handle when the textbox moved [C]
if(textbox.left !== textbox.lastLeft || 
   textbox.top !== textbox.lastTop) {
  handle.left += (textbox.left - textbox.lastLeft);
  handle.top += (textbox.top - textbox.lastTop);
  handle.setCoords();
}

免责声明：我不是 Fabric.js 专家，也许该库有一些快捷方式。

推荐阅读