我怎麼能不使用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

回答

相關問題