javascript - 有什么方法可以使用 Raphael js 库绘制表格

Question

我正在使用 Raphael JS 创建类似 ERD 的工具，但不知道如何使用 Raphael 创建类似表的实例。

Answer 1

paper = new Raphael(0,0,500,500);

var x = 100;
var y = 50;
var height = 50
var width = 100;

WriteTableRow(x,y,width*2,height,paper,"TOP Title");
y= y+height;
WriteTableRow(x,y,width,height,paper,"Score,Player");
y= y+height;
for (i=1;i<=4;i++)
{
var k;
k = Math.floor(Math.random() * (10 + 1 - 5) + 5);
WriteTableRow(x,y,width,height,paper,i+","+ k + "");
y= y+height;
}


function WriteTableRow(x,y,width,height,paper,TDdata)
{
    var TD = TDdata.split(",");
    for (j=0;j<TD.length;j++)
    {
        var rect = paper.rect(x,y,width,height).attr({"fill":"white","stroke":"red"});
        paper.text(x+width/2, y+height/2, TD[j]) 
        x = x + width;
    }
}

// http://jsfiddle.net/LG5zn/116/

Answer 2

Raphael 可以绘制任何东西，但是如果您要手动创建表格等等，那么您可能会与框架作斗争。我最喜欢这个库的一个方面是它可以与传统的 HTML、CSS 和 Javascript 无缝协作。我强烈建议您从 HCJ 那里获得您想要的东西，并将 Raphael 用于任何不容易做到的事情。