1

我试图在我的桌子的一个单元格中画一个酒吧。

一切正常，但每次我更改浏览器窗口大小时，我的元素都会丢失。当我手动更改单元格大小时也会发生同样的情况。

有人可以帮忙吗？

我的画布是这样构建的

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




                            }
                        }
4

1 回答 1

3

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

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

在此处输入图像描述

将此 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>
于 2012-03-27T16:49:40.997 回答