-1

目標：ユーザーがユーザー入力フィールドに名前を入力し、[アニメーション]ボタンを選択すると、名前が縦に印刷され、各文字に各文字のドロップシャドウが含まれます。JavascriptライブラリRaphaelが望ましい場合があります。

問題：これまでのところ、名前が縦に2回並べて印刷されています。明らかに、2番目の列はドロップシャドウとしての文字である必要がありますが、シャドウのように見えるようにそれらのスタイルを変更する方法がわかりません。

私のマネージャーは私に1つのヒントを与えました：「私はテキストの下に配置された2番目のテキスト行を作成する必要がありました...そして私はそれに.blur（）メソッドを使用しました。私があなたに別のヒントを与える必要があるなら私はあなたにヒントを与えるでしょうドア。"

私はここで本当に困っています。誰かが提案、解決策、何かを持っているなら、それは非常にありがたいです。

<html> 
<head> 
<script src="raphael-min.js"></script> 
<script src="jquery-1.7.2.js"></script>  
<script type="text/javascript">   

function animate() {  

var txt = document.getElementById("words").value;
var area = txt;
var splittxt = txt.split("");

document.getElementById("letters").innerHTML = "";
document.getElementById("letters2").innerHTML = "";
var i;
for (i = 0; i < splittxt.length; i++) {
document.getElementById("letters").innerHTML = document.getElementById("letters").innerHTML + splittxt[i] + "<br>";
document.getElementById("letters2").innerHTML = document.getElementById("letters2").innerHTML + splittxt[i] + "<br>";
}
//displays how many symbols are in text box and what is in text box
document.getElementById("num").innerHTML= txt.length;          
document.getElementById("msg").innerHTML = txt;          

r.clear();      
// Make our pink rectangle 
ellipse = r.ellipse(40, 15, 30, 5).attr({"fill": "#969696", "stroke": "none"}); 
ellipse.glow({width:10});  
}      

</script>
<style type="text/css">
#letters
{
background-color:yellow;
width:25px;
float:left;
}

#letters2
{
letter-spacing:0px;
display:block;
-moz-transform: rotate(80deg);  
margin-left:90px;
margin-top:80px;
width:25px;
color:#DEDEDE;
}
</style>

</head> 

<body>  

Text: <input type="text" id="words" value="" /> 
<input type="button" value="Animate" onclick="animate()" /> 
<div id='msg'></div> 
<div id='num'></div>
<div id='letters'></div>
<div id="letters2"></div>
<div id="draw-here-raphael" style="height: 200px; width: 400px; margin-top:0px;"> 
</div> 
<div id="elps" style="margin-left:100px;"/>  

<script type="text/javascript"> //all your javascript goes here  
var r = new Raphael("draw-here-raphael");  

</script>

</body> 
</html>

長く生きると繁栄。

4

2 に答える 2

3

ラファエルは本当に必要ですか？私がしたことは、単にあなたの言葉を要素に出力し、css の text-shadow で影を取得することでした。縦書きのテキストを取得するために、</br>各文字の後に を追加しました。

フィドルを見てみましょう: http://jsfiddle.net/joplomacedo/wVGbF/

フィドルが表示されない場合のコードは次のとおりです。

HTML

Text: <input type="text" id="words" value="" /> 
      <input id="animateBtn" type="button" value="Animate" />
      <div class="print"></div>

CSS

.print {
    font: 44px/0.8em "Lobster", cursive;
    color: gold;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}​

JS

var join = Array.prototype.join;

$('#animateBtn').on('click', function() {
    var txt = $('#words').val(),
        spaced_txt = join.call(txt, "</br>");

    $('.print').html(spaced_txt);
});​
于 2012-07-13T13:54:17.230 に答える
1

Raphaelを使用したテキスト出力関数も次のとおりです。

function draw_text() {
  var txt = document.getElementById("words").value;
  var posy = txt.length*10;
  r.clear();
  var attr = {font: "50px Helvetica", opacity: 0.5};
  var text = r.text(40, 40+posy, txt).attr(attr).attr({fill: "#0f0"}); // underlayer or "shadow"
  text.attr({transform: "r270"}); // rotate 270 degrees
  var text2 = r.text(43, 43+posy, txt).attr(attr).attr({fill: "#aa0"}); // text above
  text2.attr({transform: "r270"}); // rotate 270 degrees
  r.safari();
}

var r = new Raphael("draw-here-raphael");

この例に基づく完全なスクリプトは、ここにあります。

于 2012-07-13T15:27:59.973 に答える