我怎么能不使用HTML/CSS显示使用EaselJS

-2

请有人建议我定型/ JS中（特别Easeljs）显示部分的数字部分的数字，我怎么能不使用HTML/CSS显示使用EaselJS

普通样式：

所需风格：

2016-11-17 Mamallan

如何多样做你的分数必须是数字？如果你只需要基本的特殊字符，那么有很多html特殊字符可以完成http://brucejohnson.ca/SpecialCharacters.html#fractions所有你需要做的就是通过对象中的查找表将小数点版本转换成特殊字符 –

访问https：//www.mathjax。org – user1844933

欢迎来到SO。请访问[帮助]，看看有什么和如何问。提示：投入的努力和代码 – mplungjan

您可以检查这一点，也许它可以帮助你，它给德首创数量级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>

来源

2016-11-17 07:26:39

感谢您的回应，是否可以在不使用html和css的情况下完成？ – Mamallan

这是我能想到的最接近的一次。 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>

来源

2016-11-17 07:42:36 realtymarker

是否可以在不使用html和css的情况下完成？ – Mamallan

你是什么意思？ – realtymarker

只能通过js而不使用css/html – Mamallan

造型像这样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也有其他限制，比如不支持过滤器和缓存。

这是推荐的方法，你想要的文字更复杂的格式，因为帆布文字是如此有限的任意时间。

来源

2016-11-17 22:25:17 Lanny

谢谢你Lanny！ – Mamallan

我已经找到一种方法来显示像使用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/

来源

2016-11-28 04:48:47 Mamallan

我怎么能不使用HTML/CSS显示使用EaselJS

回答

相关问题