Wie rooftext Wirkung und Tal Texteffekt in HTML5 (oder Fabric.js)

Ich verwende folgenden Code machen:Wie rooftext Wirkung und Tal Texteffekt in HTML5 (oder Fabric.js)

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){ 
/// (c) Ken Fyrstenberg Nilsen, Abidas Software .com 
/// License: CC-Attribute 

var ctx = demo.getContext('2d'), 
    font = '64px impact', 
    w = demo.width, 
    h = demo.height, 
    curve, 
    offsetY, 
    bottom, 
    textHeight, 
    angleSteps = 255/h, 
    i = h, 
    y, 
    os = document.createElement('canvas'), 
    octx = os.getContext('2d'); 

os.width = w; 
os.height = h; 
octx.font = font; 
octx.textBaseline = 'top'; 
octx.textAlign = 'center'; 

function renderBridgeText() { 
    curve = parseInt(iCurve.value, 10); 
    offsetY = parseInt(iOffset.value, 10); 
    textHeight = parseInt(iHeight.value, 10); 
    bottom = parseInt(iBottom.value, 10); 

    vCurve.innerHTML = curve; 
    vOffset.innerHTML = offsetY; 
    vHeight.innerHTML = textHeight; 
    vBottom.innerHTML = bottom; 

    octx.clearRect(0, 0, w, h); 
    ctx.clearRect(0, 0, w, h); 

    octx.fillText(iText.value, w * 0.5, 0); 

    /// slide and dice 
    i = w; 
    while (i--) { 
     y = bottom + curve * Math.sin(i/angleSteps * Math.PI /160); 
     ctx.drawImage(os, i, offsetY, 1, textHeight,i,offsetY, 1, y); 
    } 
} 
iCurve.onchange = iOffset.onchange = iHeight.onchange = iBottom.onchange = iText.onkeyup = renderBridgeText; 
renderBridgeText() 
}//]]> 
</script> 
</head> 
<body> 
    <canvas id=demo width=600 height=300></canvas> 
<br> 
    <span>Curve:</span> 
<input id="iCurve" type="range" min=0 max=200 value=110> 
<span id="vCurve">110</span> 
    <br><span>OffsetY:</span> 
<input id="iOffset" type="range" min=0 max=100 value=4> 
<span id="vOffset">0</span> 
    <br><span>Text height:</span> 
<input id="iHeight" type="range" min=0 max=200 value=64> 
<span id="vHeight">64</span> 
    <br><span>Bottom:</span> 
<input id="iBottom" type="range" min=0 max=200 value=200> 
<span id="vBottom">200</span> 
<br><span>Text:</span> 
<input id="iText" type="text" value="BRIDGE TEXT"> 
</body>

Ich brauche den Texteffekt wie unten Bilder, ich habe viel versucht, dies zu machen aber ich kann nicht.

enter image description here

Kann mir jemand bitte helfen?

Können wir auch aktives Objekt von fabric.js mit Kontext verwenden? Hier

Quelle

2013-10-23 Rash

an der 3D-Transformation Werfen Sie einen Blick propeties und mit der Perspektive-Ursprung() Sie könnte diesen Effekt bekommen. Keine Zeit, um ein jsFiddle zu zeigen; P Einige Infos: http://24ways.org/2010/intro-to-css-3d-transforms/ – nkmol

Ja, es ist so cool Antwort –

@ Ken-AbdiasSoftware Ich frage nur nach einigen Anleitungen, wie Um diese Kontexteigenschaften mit aktiven Objekten von fabric.js – Rash

ist eine modifizierte Version des ursprünglichen Codes (der bereitgestellten Code betreffende Werte geändert im Vergleich zu meinem ursprünglichen Code .. .-)), die nur all diese Formen erzeugen kann durch das Spiel mit den Parametern:

Valley

Roof

Roof inversed

Bridge

Das Dach ist nicht super, aber ich überlasse es Ihnen, Skalierungsunterstützung hinzuzufügen, da dies als ein Beispiel gemeint ist.

ONLINE DEMO HERE

Initialisierung:

var ctx = demo.getContext('2d'), /// context 
    font = '64px impact',  /// font 
    w = demo.width,    /// cache canvas width and height 
    h = demo.height, 
    curve,      /// radius 
    offsetY,      /// offset for text 
    bottom,      /// bottom of text 
    textHeight,     /// text height (region of text) 
    isTri = false,    /// is triangle shaped (roof) 
    dltY,      /// delta for triangle 
    angleSteps = 180/w,  /// angle steps for curved text 
    i = w,      /// "x" backwards 
    y,       /// top of text 

    /// offscreen canvas that holds original text 
    os = document.createElement('canvas'), 
    octx = os.getContext('2d'); 

os.width = w; 
os.height = h; 

/// set font on off-screen canvas where we draw it 
octx.font = font; 
octx.textBaseline = 'top'; 
octx.textAlign = 'center';

Hauptfunktion:

/// render 
function renderBridgeText() { 

    /// demo stuff snipped (see link) 

    /// clear canvases  
    octx.clearRect(0, 0, w, h); 
    ctx.clearRect(0, 0, w, h); 

    /// draw text (text may change) 
    octx.fillText(iText.value.toUpperCase(), w * 0.5, 0); 

    /// slide and dice 
    dltY = curve/textHeight; /// calculate delta for roof/triangle 
    y = 0;      /// reset y in case we do roof 
    i = w;      /// init "x" 

    while (i--) { 

     if (isTri) { 
      /// bounce delta value mid-way for triangle 
      y += dltY; 
      if (i === (w * 0.5)|0) dltY = -dltY; 

     } else { 
      /// calc length based on radius+angle for curve 
      y = bottom - curve * Math.sin(i * angleSteps * Math.PI/180); 
     } 

     /// draw a slice 
     ctx.drawImage(os, i, 0, 1, textHeight, 
          i, h * 0.5 - offsetY/textHeight * y, 1, y); 
    } 
}

Quelle

2013-10-23 22:05:51 K3N

Super Antwort. Danke, dass du mir geholfen hast. :) :) – Rash

Mit den oben genannten Eigenschaften kannst du mir sagen, wie man sie für aktive Objekte von fabric.js benutzt? – Rash

@Rash Entschuldigung, ich bin mit Fabric nicht vertraut (Ihre Frage wurde auch nicht mit fabric.js getaggt). Vergessen Sie nicht, zu wählen/zu akzeptieren, wenn die Antwort hilfreich war. – K3N

Wie rooftext Wirkung und Tal Texteffekt in HTML5 (oder Fabric.js)

Antwort

Verwandte Themen