Skip to content

Latest commit

 

History

History
202 lines (159 loc) · 8.87 KB

README.md

File metadata and controls

202 lines (159 loc) · 8.87 KB

OFD R&W 基于Canvas文档内容生成 Canvas API

为了更加自由和灵活的绘制OFD文档，OFD R&W提供了一个特殊的元素Canvas。 通过Canvas开发者可以自由绘制曲线、放置文字图形、操作形变等。

Canvas采用了与 HTML中Canvas类似的API设计 ，便于开发者快速上手。

  1. 创建Canvas，提供宽度和高度。
  2. 实现绘制器。
  3. 使用上下文提供的API绘制。

如下：

try(OFDDoc ofdDoc=new OFDDoc(path)){
    Canvas canvas=new Canvas(20d,20d);
    canvas.setDrawer(ctx->{
        // 调用API绘制图形
        ctx.beginPath();
        ctx.arc(10,10,5,0,360);
        ctx.stroke();
    });
    ofdDoc.add(canvas)
}

更多调用示例请参考 DrawContextTest

HTML Canvas模拟开发

由于OFDRW中的Canvas实现了与HTML Canvas基本一致的API接口，因此可以使用HTML的Canvas实现OFD固定布局模式的快速可视化开发。

在线调试入口

以水印为例，目标为一个覆盖整页面的水印，首先在HTML Canvas中使用相关JS API实现水印效果。

[1] 调整HTML Canvas的大小为A4纸页面大小（210x297），设置Canvas元素的width和height，如果觉得比较小可以适当的等比例放大如：420x594。

<canvas id="myCanvas" width="210" height="297">

[2] 获取Canvas上下文，调用JS API进行绘制

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 下面使用 ctx 调用HTML Canvas API进行绘制
// ...
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="210" height="297" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle = "rgba(255, 0, 0, 0.8)";
ctx.font="8px 宋体";
for (var i = 0; i <= 8; i++) {
    for (var j = 0; j <= 8; j++) {
        ctx.save();
        ctx.translate(22.4 * i, j * 50);
        ctx.rotate(45*Math.PI/180);
        ctx.fillText( "保密资料", 10, 10);
        ctx.restore();
    }
}
</script>

</body>
</html>

[3] 调整JS代码适应OFDRW Canvas Java API接口，注意：上面的字体配置和rotate的角度参数与js略有不同，调整后代码如下：

class Main {
    public static void main(String[] args) {
        Path out = Paths.get("target/first_canvas.ofd");
        try (OFDDoc ofdDoc = new OFDDoc(out)) {
            VirtualPage vPage = new VirtualPage(300d, 150d);
            Canvas canvas = new Canvas(0, 0, 300d, 150d);
            canvas.setDrawer(ctx -> {
                ctx.fillStyle = "rgba(255, 0, 0, 0.8)";
                ctx.font = "8px 宋体";
                for (int i = 0; i <= 8; i++) {
                    for (int j = 0; j <= 8; j++) {
                        ctx.save();
                        ctx.translate(22.4 * i, j * 50);
                        ctx.rotate(45);
                        ctx.fillText("保密资料", 10, 10);
                        ctx.restore();
                    }
                }
            });
            vPage.add(canvas);
            ofdDoc.addVPage(vPage);
        }
        System.out.println("生成文档位置：" + out.toAbsolutePath());
    }
}

API列表

路径相关

方法名 意义
beginPath 开启一段路径
closePath 关闭路径
clip 从原始画布中剪切任意形状和尺寸
moveTo 移动绘制点到指定位置
lineTo 从当前点连线到指定点
quadraticCurveTo 通过二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
bezierCurveTo 方法三次贝塞尔曲线的指定控制点，向当前路径添加一个点。
arc 创建弧/曲线（用于创建圆或部分圆）
rect 创建矩形路径
stroke 描边路径
fill 填充一个关闭的路径

矩形填充和描边

以下API会使当前图形绘制路径重置。

方法名 意义
fillRect 创建并填充矩形路径
strokeRect 创建并描边矩形路径

图形变换

方法名 意义
scale 缩放当前绘图，更大或更小
rotate 旋转当前的绘图
translate 重新映射画布上的 (0,0) 位置
transform 在已有当前变换矩阵基础上，再变换矩阵
setTransform 设置变换矩阵，替代当前的变换矩阵

文字

方法 或 变量 意义
fillText 填充文字
measureText 测量文本的宽度或高度
measureTextArea 测量文本的宽度或高度，以及每个文字的宽度高度。
font 字体样式，格式为 [字体样式] [字体粗细] 字号 字形，例如："italic 8mm 宋体"

图形图像

方法名 意义
drawImage 绘制图片

属性配置

方法 或 变量 意义
fillStyle 填充颜色，支持格式 16进制(#000000)、RGB(rgb(0,0,0))、RGBA(rgba(0,0,0,1))、图案(Pettern)、渐变(Gradient)等
strokeStyle 描边颜色，支持格式 16进制(#000000)、RGB(rgb(0,0,0))、RGBA(rgba(0,0,0,1))、图案(Pettern)、渐变(Gradient)等
TextAlign 文本对齐方式(get/set)，默认start
StrokeColor 描边颜色(get/set)，默认黑色
FillColor 填充颜色(get/set)，默认黑色
LineWidth 线宽度(get/set)，默认0.353mm
GlobalAlpha 透明度(get/set)
FontSetting 文字配置(get/set)
LineCap 回线条的结束端点样式(get/set)
LineJoin 两条线相交时，所创建的拐角类型(get/set)
MiterLimit 最大斜接长度，也就是结合点长度截断值(get/set)
LineDash 填充线时使用虚线模式，设置虚线间隔(get/set)

字体设置 FontSetting

方法名 意义
font 字体
fontSize 字号，单位（毫米mm）
italic 斜体
fontWeight 字体的粗细，可能值为： 100、200、300、400、500、600、700、800、900，默认值： 400
letterSpacing 字间距，默认0
charDirection 字符方向，可取值：0(默认)、90、180、270
readDirection 阅读方向，可取值：0(默认)、90、180、270

工作区

方法名 意义
save 保存当前工作区：描边颜色、填充颜色、变换矩阵、线宽度、绘制文字配置（字号、加粗、斜体、字体）、透明值
restore 还原绘图状态