Question

请有人在不使用html / css的情况下向我推荐造型/在js（特别是Easeljs）中显示分数，

正常风格：

所需风格：

Answer 1

你可以检查一下，也许它可以帮助你，它给出了所需的数字fraction

$('.fraction').each(function(key, value) {
    $this = $(this)
    var split = $this.html().split("/")
    if( split.length == 2 ){
        $this.html('<span class="top">'+split[0]+'</span><span class="bottom">'+split[1]+'</span>')
    }    
});

.fraction, .top, .bottom {
    padding: 0 5px;    
}

.fraction {
    display: inline-block;
    text-align: center;    
}

.bottom{
    border-top: 1px solid #000;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="fraction">1/2</span>
<span class="fraction">3/4</span>
<span class="fraction">1/32</span>
<span class="fraction">77/102</span>

Answer 2

这是我能想到的最接近的。 https://jsfiddle.net/t1tzu2ke/

希望这会有所帮助。 “

21 - 2

<style type='text/stylesheet'>
p{
font-size:3em;
}
span{
  width:10px;
  display:inline-block;
  font-size:.3em;
  padding-left:5px;
  line-height:.8em;
}
</style>

`

Answer 3

我找到了一种方法，可以使用Easeljs显示数字，例如分数，而不使用html / css

var canvas = document.getElementById("canvas");
    var stage = new createjs.Stage(canvas);


    var Container = new createjs.Container();
    Container.x = 50;
    Container.y = 50;
    var number = new createjs.Text(2, "Bold 24px Arial", "#494949");
    number.textAlign = "left";
    number.x = -15;
    number.y = -5;
    var top = new createjs.Text(1, "Bold 13px Arial", "#494949");
    top.x = 0;
    top.y = -7;
    var middle = new createjs.Text("-", "Bold 13px Arial", "#494949");
    middle.scaleX = 2;
    middle.x = 0;
    middle.y = 0;
    var bottom = new createjs.Text(2, "Bold 13px Arial", "#494949");
    bottom.x = 0;
    bottom.y = 10;
    var frCont = new createjs.Container();
    frCont.addChild(top, middle, bottom);

    Container.addChild(number, frCont);
    stage.addChild(Container);
    stage.update();


<canvas id="canvas" class="no-select" width="600" height="150"></canvas>

https://jsfiddle.net/73h2sf6t/

Answer 4

在EaselJS中这样的样式将具有挑战性，因为如果不创建大量额外的部分并手动定位它们，就无法在画布中真正设置文本样式。

您最好的选择是使用此主题中的一个建议（使用html / css），并将其包装在EaselJS DOMElement中。

var div = document.getElementById("myCustomControl");
var elem = new createjs.DOMElement(div);
stage.addChild(elem);

elem.x = 100;
elem.y = 200;
elem.scaleX = 2;
elem.rotation = 90;

DOMElement包装任何HTML元素（div，p，span等），并相对于EaselJS阶段进行转换。您无法在其他EaselJS内容中将此内容分层（它必须位于所有内容的顶部或底部），但您至少可以定位它。 DOMElement还有其他限制，例如不支持过滤器和缓存。

documentation

online demo

demo in GitHub

这是一种推荐的方法，只要您想要更复杂的文本格式，因为Canvas文本非常有限。

如何使用EaselJS显示分数

4 个答案: