在不使用Raphael javascript库中的boundingBox函数的情况下获取文本的大小 [英] Getting the size of text without using the boundingBox function in Raphael javascript library

问题描述

我正在尝试使用Rahpael库在javascript中创建一些带有文本的按钮。我想知道样式文本的大小，在绘图之前避免这样，这样我就可以创建适当的背景（按钮）。另外我想避免在画布/纸张之外绘制文本（文本的位置是其中心的位置）。

I am trying to create some buttons with text in javascript using the Rahpael library. I would like to know the size of the styled text, before drawing to avoid that so I can create proper background (the button). Also I would like to avoid drawing the text outside of the canvas/paper (the position of the text is the position of its center).

我可以使用Raphaels getBBox（ ）方法，但我必须首先创建（绘制）文本来执行此操作。所以我绘制文本以获得大小，以便能够在正确的位置绘制它。这很难看。所以我正在寻找一些通用的方法来估计给定字体，字体大小，系列的样式文本的度量...

I can use Raphaels getBBox() method, but I have to create (draw) the text in first place to do this. So I draw text to get the size to be able to draw it on the right position. This is ugly. So I am searching for some general method to estimate the metrics of styled text for given font, font-size, family ...

有可能使用HTML5画布 http://www.html5canvastutorials.com/tutorials/html5-canvas -text-metrics / 但Raphael不使用canvas。是否有可能使用Raphael或普通Javascript获取文本指标？

There is a possibility to do this using the HTML5 canvas http://www.html5canvastutorials.com/tutorials/html5-canvas-text-metrics/ but Raphael do not use canvas. Is there any possibility to get the text metrics using Raphael or plain Javascript?

推荐答案

我知道这看起来很草率，但你应该有绘制文本，测量文本，然后绘制按钮并移动标签没问题。为了安全起见，只需将其从屏幕上绘制出来：

I know it seems sloppy, but you should have no problem drawing the text, measuring it, then drawing the button and moving the label. To be safe, just draw it off the screen:

var paper = Raphael(0, 0, 500, 500);

var text = paper.text(-100, -100, "My name is Chris");

//outputs 80 12
console.log(text.getBBox().width, text.getBBox().height);

如果真的冒犯了你的感情，我会理解！ - 您可以轻松生成一个对象来记住给定字体的每个字符的宽度：

If this REALLY offends your sensibilities, however -- and I would understand! -- you can easily generate an object to remember the width off each character for a given font:

var paper = Raphael(0, 0, 500, 500),
    alphabet = "abcdefghijklmnopqrstuvwxyz";
    font = "Arial",
    charLengths = {},
    ascii_lower_bound = 32,
    ascii_upper_bound = 126;

document.getElementById("widths").style.fontFamily = font;

for (var c = ascii_lower_bound; c <= ascii_upper_bound; c += 1) {
    var letter = String.fromCharCode(c);    
    var L = paper.text(-50, -50, letter).attr("font-family", font);
    charLengths[letter] = L.getBBox().width;
}

//output

for (var key in charLengths) if (charLengths.hasOwnProperty(key)) {
    var row = document.createElement("tr");
    row.innerHTML = "<td>" + key + "</td><td>" + charLengths[key] + "</td>";    
    document.getElementById("widths").appendChild(row);    
}

这篇关于在不使用Raphael javascript库中的boundingBox函数的情况下获取文本的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！