如何在 Javascript 中制作可拉伸的聊天气泡？

Posted 2023-03-25

【中文标题】如何在 Javascript 中制作可拉伸的聊天气泡？

【英文标题】：How to make stretchable chat bubble in Javascript?

【发布时间】：2021-12-03 14:51:28

【问题描述】：

我想用 javascript 制作可拉伸的气泡聊天形状。它应该具有渐变色作为背景，并且可以在形状周围添加边框。结果会是这样的：

圆形部分是可拉伸的，三角形将保持在中间，大小相同。

我已经尝试了这些方法：

使用clipPaths 绘制SVG。这里的问题是三角形没有保持相同的形状（它正在拉伸）。

CSS clip-path。这里的问题是我没有设法使用基本形状绘制这种形状。不幸的是，clip-path 不支持多个clip-path。

在canvas 中绘制气泡并用作背景。由于气泡应根据内部内容进行拉伸，因此问题是在内容更改大小时获取事件并为画布触发redraw。

目前，canvas 方法可能是最简单的方法，但也许我还缺少其他一些解决方案。

【参考方案1】：

你可以使用::after来达到效果

.message 
  display: inline-block;
  height: 120px;
  width: 130px;
  border-radius: 8px;
  position: relative;
  background: rgb(2, 0, 36);
  background: linear-gradient(10deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);


.message::after 
  content: "";
  background-color: black;
  height: 16px;
  width: 16px;
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);

<div class="message"></div>

【讨论】：

不幸的是，这是纯色，但我需要渐变。

可以添加渐变色...简单

以及如何将颜色与三角形对齐？这就是问题所在。

你必须单独给它上色

感谢您的想法 - 帮助很大。这里想多了。