Văn bản dọc bên trong tiêu đề bảng bằng thư viện SVG dựa trên JavaScript

Question

Tôi sử dụng jqGrid với nhiều cột chứa thông tin boolean, được hiển thị dưới dạng hộp kiểm bên trong bảng (xem http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO.htm làm ví dụ). Để hiển thị thông tin gọn hơn, tôi sử dụng tiêu đề cột dọc. Nó hoạt động rất tốt và hoạt động trong jqGrid trong tất cả các trình duyệt (xem thảo luận của tôi với Tony Tomov trong jqGrid forum http://www.trirand.com/blog/?page_id=393/feature-request/headers-with-vertical-orientation/), nhưng trong văn bản theo chiều dọc của IE bị mờ và không đủ đẹp (mở liên kết ở trên trong IE và bạn sẽ thấy chính xác ý tôi là gì). Tôi được hỏi từ người dùng tại sao văn bản được hiển thị quá lạ. Vì vậy, tôi đang nghĩ đến việc sử dụng thư viện SVG dựa trên JavaScript như SVG Web (http://code.google.com/p/svgweb/) hoặc Raphaël (http://raphaeljs.com/). SVG rất mạnh và rất khó tìm được một ví dụ điển hình. Tôi chỉ cần hiển thị văn bản dọc (-90 grad, từ dưới lên) và sử dụng nếu có thể mà không làm việc ở chế độ định vị tuyệt đối.

Vì vậy, một lần nữa câu hỏi của tôi: tôi cần phải có một khả năng để hiển thị văn bản dọc (- 90 grad xoay) bên <td> yếu tố của một tiêu đề bảng. Tôi muốn sử dụng thư viện SVG dựa trên JavaScript như SVG Web hoặc Raphaël. Giải pháp phải hỗ trợ IE6. Có ai có một ví dụ tham khảo tốt mà có thể giúp tôi làm điều này? Nếu ai đó viết một giải pháp toàn bộ vấn đề tôi sẽ hạnh phúc.

Để được chính xác ở đây là giải pháp hiện tại của tôi: Tôi xác định

.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 */; 
} 

xác định RotateCheckboxColumnHeaders chức năng

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

Và bao gồm một cuộc gọi như RotateCheckboxColumnHeaders(grid, 110); sau khi tạo jqGrid.

Answer 1

Dưới đây là một jsfiddle làm việc nào đó. Nó sẽ hoạt động trong IE 6, tôi chỉ sử dụng jquery và raphael js. Tôi đã thực hiện kích thước tĩnh cho khu vực vẽ raphael và các văn bản, nhưng bạn chắc chắn có thể làm một chút toán học để tìm ra kích thước động:

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

Mã trông như thế này nếu bạn bao gồm jquery và raphael:

$(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(); 
    }); 
}); 

và HTML trông như thế này:

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

Oh, và tôi đã sử dụng điều này như ví dụ của tôi: http://raphaeljs.com/text-rotation.html

Answer 2

biến đổi văn bản Canvas dụ

  <!--[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>