rooftext प्रभाव और एचटीएमएल 5 (या Fabric.js) में घाटी पाठ प्रभाव

मैं नीचे दिए गए कोड का उपयोग कर रहा बनाने के लिए कैसे:rooftext प्रभाव और एचटीएमएल 5 (या 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>

मैं छवियों नीचे की तरह पाठ प्रभाव की जरूरत है, मैं इस बनाने के लिए एक बहुत कोशिश की है लेकिन मैं नहीं कर सकता।

enter image description here

किसी को भी कृपया मुझे बाहर करने में मदद कर सकते हैं?

क्या हम संदर्भ के साथ fabric.js से सक्रिय ऑब्जेक्ट का उपयोग भी कर सकते हैं?

स्रोत

2013-10-23 Rash

3 डी पर एक नजर डालें propeties को बदलने और परिप्रेक्ष्य मूल के साथ (आप) शायद यह प्रभाव हो सकता है। JsFiddle दिखाने के लिए कोई समय नहीं; पी कुछ जानकारी: http://24ways.org/2010/intro-to-css-3d-transforms/ – nkmol

हाँ इसका बहुत अच्छा जवाब –

@ केन-अब्दियास सॉफ्टवेयर मैं बस कुछ मार्गदर्शन के लिए पूछ रहा हूं fabric.js – Rash

यहाँ मूल कोड का एक संशोधित संस्करण है (प्रश्न में प्रदान किए गए कोड मान बदल गया है अपने मूल कोड की तुलना में .. .-)) जो सिर्फ मानकों के साथ चारों ओर खेलने के द्वारा इन सभी आकृति का उत्पादन कर सकते हैं:

Valley

Roof

Roof inversed

Bridge

छत सुपर नहीं है लेकिन मैं इसे स्केलिंग समर्थन जोड़ने के लिए छोड़ दूंगा क्योंकि यह एक उदाहरण के रूप में है।

ONLINE DEMO HERE

प्रारंभ:

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';

मुख्य समारोह:

/// 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); 
    } 
}

स्रोत

2013-10-23 22:05:51 K3N

में बहुत मदद करने के लिए धन्यवाद। मेरी मदद करने के लिए धन्यवाद .. :) :) – Rash

उपरोक्त गुणों का उपयोग करके आप मुझे बता सकते हैं कि fabric.js की सक्रिय वस्तुओं के लिए उनका उपयोग कैसे करें? – Rash

@Rash क्षमा करें, मैं कपड़े से परिचित नहीं हूं (आपका प्रश्न fabric.js के साथ टैग नहीं किया गया था)। जवाब उपयोगी होने पर अप-वोट/स्वीकार करना न भूलें। – K3N

rooftext प्रभाव और एचटीएमएल 5 (या Fabric.js) में घाटी पाठ प्रभाव

उत्तर

संबंधित मुद्दे