javascript – Svg(snapsvg)创建一个讲话泡泡

我正在创建一个聊天程序,屏幕上的一些数字正在与其他人聊天.

我需要完成这个项目的最后一件事就是当一个人说出一些可以放入可扩展的讲话泡泡的东西时.

由于我是使用SVG的新手,这是我的第一个真正的“游戏”项目,我想“让我们使用一些CSS来确保它正确缩放”

所以我做了以下CSS：

.bubble {
    background-color: #eee;
    border: 2px solid #333;
    border-radius: 5px;
    color: #333;
    display: inline-block;
    font: 16px/24px sans-serif;
    padding: 12px 24px;
    position: relative;
}
.bubble:after,.bubble:before {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #eee;
    bottom: -20px;
    content: '';
    left: 50%;
    margin-left: -20px;
    position: absolute;
}

/* Styling for second triangle (border) */

.bubble:before {
    border-left: 23px solid transparent;
    border-right: 23px solid transparent;
    border-top: 23px solid;
    border-top-color: inherit; /* Can't be included in the shorthand to work */
    bottom: -23px;
    margin-left: -23px;
}

但遗憾的是,这没有用.我后来发现这是因为SVG不支持所有CSS属性.所以现在我有点失落？我不太确定如何在SVG中创建可扩展的语音气泡,我希望你们中的一个人能够指出我正确的方向.

SVG路径我试过：

我设法创建了一个非常小的SVG路径但是我不确定如何使它更大并使其充满文本：

var mesasgeBox = chatSvg.path("M 200.444444444444446,200v-6h10.444444444444446v6h-4l-3.1111111111111107,1.6222222222222236l0.11111111111111072,-1.6222222222222236Z");

解决方法

下面的源需要一个位置(x / y)来知道出现的位置和文本换行的最大宽度.它是作为插件编写的,因此您可以轻松使用它.我没有对它进行优化,可以通过使用font-size缓存字母宽度来提高性能.
字体包装代码基于此解决方案 How to either determine SVG text box width,or force line breaks after ‘x’ characters?

请使用您喜欢的气泡布局替换插件内的纸张.

Snap.plugin(function (Snap,Element,Paper,glob) {
     Paper.prototype.bubbletext = function (x,y,txt,maxWidth,attributes) {

        var svg = Snap();
        var abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.";
        var preText = svg.text(0,abc);
        preText.attr(attributes);
        var letterWidth = (preText.getBBox().width / abc.length);
        svg.remove();

        var words = txt.split(" ");
        var widthCalc = 0,activeLine = 0,lines=[''];
        for (var letterCount = 0; letterCount < words.length; letterCount++) {

           var l = words[letterCount].length;
           if (widthCalc + (l * letterWidth) > maxWidth) {
              lines.push('');
              activeLine++;
              widthCalc = 0;
           }
           widthCalc += l * letterWidth;
           lines[activeLine] += words[letterCount] + " ";
        }

        var padding = 10;

        var t = this.text(x+padding,y+15+padding,lines).attr(attributes);

        t.selectAll("tspan:nth-child(n+2)").attr({
           dy: "1.2em",x: x+padding
        });

        var BoxHeight = t.node.clientHeight + (padding * 3);
        var messageBox = this.path("M " + (x-padding) + "," + (y-padding+BoxHeight) + "v-" + BoxHeight + "h" +  (t.node.clientWidth + (padding*3)) + "v"+BoxHeight+"h-6l-9,15l0,-15Z");
        messageBox.attr({
            fill:"rgba(0,255,.3)"
        });
        t.before(messageBox);
        return t;
     };
  });

var div = document.querySelector('div.wrap');
var bubble = Snap('100%','100%').attr({ viewBox: '0  0 200 200' });;
bubble.bubbletext(0,"Hallo Mike how are you. These text is auto wraped and the bubble size automaticaly. The svg result is also scaleable. Please change this text to test.",155,{ "font-size": "15px","fill": "#000"});
div.appendChild(bubble.node);

CODEPEN

UPDATE

将您的气泡布局添加到codepen示例中.

更新2我更新源示例.

javascript – Svg(snapsvg)创建一个讲话泡泡

解决方法

猜你在找的JavaScript相关文章