जावास्क्रिप्ट-आधारित एसवीजी लाइब्रेरी

Question

का उपयोग कर तालिका शीर्षकों के अंदर वर्टिकल टेक्स्ट मैं जूलग्रिड का उपयोग करता हूं जिसमें बूलियन जानकारी वाले कई कॉलम होते हैं, जिन्हें तालिका के अंदर चेकबॉक्स के रूप में प्रदर्शित किया जाता है (उदाहरण के रूप में http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO.htm देखें)। अधिक कॉम्पैक्टली जानकारी प्रदर्शित करने के लिए मैं लंबवत कॉलम हेडर का उपयोग करता हूं। यह बहुत अच्छी तरह से काम करता है और सभी ब्राउज़रों में jqGrid में काम करता है (jqGrid फोरम http://www.trirand.com/blog/?page_id=393/feature-request/headers-with-vertical-orientation/ में टोनी टॉमोव के साथ मेरी चर्चा देखें), लेकिन आईई वर्टिकल टेक्स्ट में धुंधला है और पर्याप्त अच्छा नहीं दिख रहा है (आईई में ऊपर दिए गए लिंक को खोलें और आप बिल्कुल देखेंगे मेरा मतलब)। मुझे उपयोगकर्ताओं से पूछा गया कि टेक्स्ट इतनी अजीब तरह से क्यों प्रदर्शित हुआ। तो मैं एक जावास्क्रिप्ट-आधारित एसवीजी लाइब्रेरी जैसे एसवीजी वेब (http://code.google.com/p/svgweb/) या राफेल (http://raphaeljs.com/) का उपयोग करने की सोच रहा हूं। एसवीजी बहुत शक्तिशाली है और एक अच्छा उदाहरण खोजना मुश्किल है। मुझे केवल ऊर्ध्वाधर पाठ (-90 ग्रेड, नीचे से ऊपर) प्रदर्शित करने की आवश्यकता है और यदि पूर्ण स्थिति के मोड में काम किए बिना संभव हो तो उपयोग करें।

तो एक बार और मेरे सवाल: मैं खड़ी पाठ प्रदर्शित करने की संभावना की आवश्यकता है (- 90 स्नातक रोटेशन) एक मेज हेडर के <td> तत्वों के अंदर। मैं एक जावास्क्रिप्ट-आधारित एसवीजी लाइब्रेरी का उपयोग करना चाहता हूं जैसे एसवीजी वेब या राफेल। समाधान आईई 6 का समर्थन करना चाहिए। क्या किसी के पास एक अच्छा संदर्भ उदाहरण है जो मुझे ऐसा करने में मदद कर सकता है? अगर कोई समस्या का पूरा समाधान पोस्ट करता है तो मैं खुश रहूंगा।

यहाँ सटीक होना करने के लिए अपने मौजूदा समाधान है: मैं परिभाषित

.rotate 
{ 
    -webkit-transform: rotate(-90deg); /* Safari 3.1+, Chrome */ 
    -moz-transform: rotate(-90deg); /* Firefox 3.5+ */ 
    -o-transform: rotate(-90deg); /* Opera starting with 10.50 */ 
    /* Internet Explorer: */ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" /* IE8 */; 
} 

परिभाषित RotateCheckboxColumnHeaders समारोह

var RotateCheckboxColumnHeaders = function (grid, headerHeight) { 
    // we use grid as context (if one have more as one table on tnhe page) 
    var trHead = $("thead:first tr", grid.hdiv); 
    var cm = grid.getGridParam("colModel"); 
    $("thead:first tr th").height(headerHeight); 
    headerHeight = $("thead:first tr th").height(); 

    for (var iCol = 0; iCol < cm.length; iCol++) { 
     var cmi = cm[iCol]; 
     if (cmi.formatter === 'checkbox') { 
      // we must set width of column header div BEFOR adding class "rotate" to 
      // prevent text cutting based on the current column width 
      var headDiv = $("th:eq(" + iCol + ") div", trHead); 
      headDiv.width(headerHeight).addClass("rotate"); 
      if (!$.browser.msie) { 
       if ($.browser.mozilla) { 
        headDiv.css("left", (cmi.width - headerHeight)/2 + 3).css("bottom", 7); 
       } 
       else { 
        headDiv.css("left", (cmi.width - headerHeight)/2); 
       } 
      } 
      else { 
       var ieVer = jQuery.browser.version.substr(0, 3); 
       // Internet Explorer 
       if (ieVer !== "6.0" && ieVer !== "7.0") { 
        headDiv.css("left", cmi.width/2 - 4).css("bottom", headerHeight/2); 
        $("span", headDiv).css("left", 0); 
       } 
       else { 
        headDiv.css("left", 3); 
       } 
      } 
     } 
    } 
}; 

और jqGrid बनाने के बाद RotateCheckboxColumnHeaders(grid, 110); की तरह एक फोन शामिल हैं।

Answer 1

यहाँ एक काम jsfiddle है कि यह करता है। इसे आईई 6 में काम करना चाहिए, मैंने केवल jquery और raphael js का उपयोग किया था। मैं राफेल ड्राइंग क्षेत्र और पाठ के लिए स्थिर आकार बना है, लेकिन आप निश्चित रूप से गतिशील आकार यह पता लगाने की एक छोटे से गणित कर सकते हैं:

http://jsfiddle.net/UYj58/9/

कोड इस तरह दिखता है अगर आप jQuery और राफेल में शामिल हैं:

$(document).ready(function(){ 
    var font = {font: '12px Helvetica, Arial'}; 
    var fill = {fill: "hsb(120deg, .5, 1)"} 
    $('tr th div').each(function (index, div){ 
     R = Raphael($(div).attr('id'), 20, 100); 
     R.text(4, 50, $(div).find('span').text()) 
      .attr(font) 
      .attr(fill) 
      .rotate(-90, true); 
     $(div).find('span').hide(); 
    }); 
}); 

और एचटीएमएल इस तरह दिखता है:

<table> 
    <thead> 
     <tr> 
      <th><div id="columnOne"><span>heading one</span></div></th> 
      <th><div id="columnTwo"><span>heading two</span></div></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
     </tr> 
     <tr> 
      <td>4</td> 
      <td>5</td> 
     </tr> 
    </tbody> 
</table> 

ओह, और मैं अपने उदाहरण के रूप में इस का प्रयोग किया: http://raphaeljs.com/text-rotation.html

Answer 2

कैनवास पाठ परिवर्तनों उदाहरण

  <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]--> 
<script type="text/javascript" src="../canvas.text.js"></script> 
<script type="text/javascript" src="../faces/dejavu_sans-normal-normal.js"></script> 
<script type="text/javascript" src="../faces/dejavu_sans-bold-normal.js"></script> 
    </head> 
    <body> 
      <canvas width="500" height="300" id="test-canvas" style="font-size: 16px;"></canvas> 

      <script type="text/javascript"> 
       function initCanvas(canvas) { 
        if (window.G_vmlCanvasManager && window.attachEvent && !window.opera) { 
         canvas = window.G_vmlCanvasManager.initElement(canvas); 
        } 
        return canvas; 
       } 

       window.onload = function() { 
        var canvas = initCanvas(document.getElementById("test-canvas")), 
           ctx = canvas.getContext('2d'); 

        ctx.strokeStyle = "rgba(255,0,0,1)"; 
        ctx.fillStyle = "rgba(0,0,0,1)"; 
        ctx.lineWidth = 1; 
        ctx.font = "20pt Verdana, sans-serif"; 
        ctx.strokeStyle = "#000"; 
        ctx.rotate(Math.PI/2); 
        ctx.fillText('Vertical', 0, 0); 
        ctx.restore(); 
       } 
      </script> 
    </body>