Question

我正在使用渲染器，该渲染器根据CSS规则布置可视GUI对象。渲染器有两个输入：对象树和css规则。每个物体都有位置，大小，颜色等。输出是一组属性，如果应用于对象，将导致布局对应于输入CSS规则。

理想的示例用法：

var renderer = new GUI_Renderer_CSS();
renderer.setRootContainterSize(840,200);
renderer.setParentToChildRelativePositions(true);

var css = "
   .menu {
        padding: 100px;
        background-color: blue;
    }
    .item {
        height: 30px;
        margin: 20px;
        background-color: red;
    }
    #special {
        margin: 40px;
        background-color: yellow;
    }
";

var objects = [{
    class:"menu"; 
    id="1"; 
    width:"300px";  // here the width is carried by the object itself
    children: [ 
        {class:"item"; id="2";}, 
        {class:"item"; id="3";}, 
        {class:"item"; id:"special"; } 
    ];
}];


var renderedProperties = renderer.render(objects, css);

// renderedProperties dump:
{
          1: { x:100px; y:100px; width:300px; height:210px; background-color:rgb(0, 0, 255)},
          2: { x:20px;  y:20px;  width:260px; height:30px;  background-color:rgb(255, 0, 0)},
          3: { x:20px;  y:50px;  width:260px; height:30px;  background-color:rgb(255, 0, 0)},
    special: { x:40px;  y:80px;  width:220px; height:30px;  background-color:rgb(255, 255, 0)},
}

renderer.getRootContainterSize(); // 840 x 410  // height is recalculated based on real space required by the rendered objects

请注意，此目的不是在浏览器中使用，也不是在HTML中使用。

问题：这样的事情已经存在吗？如果没有，有什么我可以开始吗？

JavaScript中自定义GUI渲染器的CSS解释器

0 个答案: