Question

我试图在桌子的单元格中画一个小条。

一切正常但每次我更改浏览器窗口大小时，我的元素都会丢失。当我手动更改单元格大小时也是如此。

有人可以帮忙吗？

我的画布就像这样构建

在HTML中：

<canvas id='0' width='260' height='10'> </canvas>

在Javascript中：

var canvas = document.getElementById(0);


            if (canvas && canvas.getContext) {
                 ctx = canvas.getContext('2d');

           if (ctx) {

                          ctx.strokeStyle = 'red';
                          ctx.stroke();
                          ctx.fillStyle = '#8b0000';
                          ctx.fill();


                         ctx.font = "Bold 11px Arial";

                         ctx.fillText("Test", canvas.width - 248, canvas.height);




                            }
                        }

Answer 1

不幸的是，当有resize事件时，rally.sdk.ui.Table组件会重新绘制单元格。在调整大小时，您正在绘制的画布元素将替换为新的canvas元素。

您可以使用仅使用html和css在单元格中创建条形图，而不是使用画布进行绘制。

enter image description here

将此html嵌入要显示为条形而不是画布元素的属性中：

<div class="bar"> 
    <div class="percentDone" style="width: 50%">50%</div> 
</div>

并添加这些样式：

<style type="text/css">

    .bar .percentDone {
        text-align: center;
        background-color: #EDB5B1;
    }

</style>

希望这会给你你想要的东西。这是完整的应用程序代码，其中只包含虚拟数据：

<html>
<head>
   <title>Percent Done with CSS example</title>
   <meta name="Name" content="Percent Done with CSS example" />

    <style type="text/css">

        .bar .percentDone {
            text-align: center;
            background-color: #EDB5B1;
        }

    </style>

   <script type="text/javascript" src="/apps/1.31/sdk.js"></script>
   <script type="text/javascript">

    rally.addOnLoad(function(){

        var table = new rally.sdk.ui.Table({ 
            columns: [
                {key: 'name', header: 'Name', width: 100}, 
                {key: 'percentDone', header: 'Percent Done', width: 100}
            ]
        });

        table.addRows([
            {
                name: 'Test 1',
                percentDone: '<div class="bar"><div class="percentDone" style="width: 50%">50%</div></div>'
            },
            {
                name: 'Test 2',
                percentDone: '<div class="bar"><div class="percentDone" style="width: 70%">70%</div></div>'
            }
        ]);

        table.display('container');

    });

   </script>
</head>
<body>
   <div id="container"></div>
</body>
</html>

拉力赛：画布在桌子的单元格中

1 个答案: