Question

我的项目是JSF + PRIMEFACES + JPA，我想在jsf网页（XHTML）中绘制矩形。

在我基于已经存在于托管bean中的矩形列表单击按钮后，需要显示绘制。

它可以用JSF和primefaces做到这一点？或者我需要介绍javascript或其他什么？

enter image description here

更新1：

我认为richfaces有paint2d选项。它可以在我的项目中使用richfaces中的这个功能吗？

Answer 1

我认为你想要这个：

＆＃13;

<!doctype html>
<html>
    <head>
        <title>Example</title>
        <meta charset='utf-8' />
    </head>
    <body>
        <input type="button" value="Click Me" onclick="changeColor()" />
        <canvas id='example'>Somewhat</canvas>
        <script>
            var changeColor = function(){
                var colors = ['red' ,'green','blue','yellow','brown','azure','gold'];
                var example = document.getElementById("example"),
                context = example.getContext('2d');
                example.height = 480;
                example.width  = 640;
                context.beginPath();
                context.rect(188, 50, 200, 100);
                context.fillStyle = colors[parseInt(Math.random()*colors.length)];
                context.fill();
                context.lineWidth = 7;
                context.strokeStyle = 'black';
                context.stroke();  
            }
        </script>
    </body>
</html>

＆＃13;

Answer 2

自5.1.8精英版本（或5.2-SNAPSHOT）以来，Primefaces具有diagram component。它可以创建你上面的图像，所以也许你可以使用

Answer 3

我知道在js中必须使用canvas。这里最简单的例子：您可以编写javascript处理程序来捕获click事件，然后调用映像矩形的代码

＆＃13;

<!doctype html>
<html>
    <head>
        <title>pathExample</title>
        <meta charset='utf-8' />
    </head>
    <body>
        <canvas id='example'>Обновите браузер</canvas>
        <script>
            var example = document.getElementById("example"),
                context = example.getContext('2d');
            example.height = 480;
            example.width  = 640;
            context.beginPath();
            context.rect(188, 50, 200, 100);
            context.fillStyle = 'red';
            context.fill();
            context.lineWidth = 7;
      context.strokeStyle = 'black';
      context.stroke();
        </script>
    </body>
</html>

＆＃13;

如何在jsf项目中绘制矩形？

3 个答案: