作废章是常用的长方形印章,其形式如下图所示(图片来自参考文献1)。印章的形式很简单,就是红色方框内显示作废两个字,其实在网上百度长方形印章的话,可以搜索出很多类似形式的印章,区别仅在于尺寸不同及印章内容不同。
本文梳理之前学过的C#的GDI+、html的canvas、python的turtle及html的div标签等知识,列出上述四种编程方式的作废章绘制形式。
C#的GDI+
采用GDI+绘制边框的话,直接调用DrawRectangle即可,但是绘制文字的话可以采用两种方法。一种是直接绘制文字,直接调用DrawString绘制文本,这种方式需要调整文本字体大小以符合边框尺寸,另一种是先固定字体,将文本转成图片,然后用DrawImage方式将带文本的图片绘制到边框内。这两种方式的绘图效果及代码如下所示:
Graphics g = e.Graphics;
Font f = new Font("楷书", 20, FontStyle.Bold);
string text = "作 废";
Size s = g.MeasureString(text, f).ToSize();
Bitmap img = new Bitmap(s.Width + 1,s.Height + 1);
using(Graphics imgG=Graphics.FromImage(img))
{
using(StringFormat sf=new StringFormat())
{
sf.Alignment = StringAlignment.Far;
sf.LineAlignment = StringAlignment.Center;
imgG.DrawString(text, f, Brushes.Red, new RectangleF(0, 0, img.Width, img.Height), sf);
}
}
using(Pen p=new Pen(Brushes.Red,5))
{
g.DrawRectangle(p, new Rectangle(50, 50, 96, 39));
g.DrawString(text, f, Brushes.Red, new Rectangle(50, 50, 96, 39));
g.DrawRectangle(p, new Rectangle(50, 150, 96, 39));
g.DrawImage(img, new Rectangle(53, 154, 90, 35));
}
html的canvas
canvas的绘图思路主要是调用strokeRect和fillText函数绘制边框和内容,需要注意的是文本对齐的设置方式,这点详见参考文献4。绘制代码及效果如下图所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script>
window.onload=function()
{
var cnv=document.getElementById("canvas");
var cxt=cnv.getContext("2d");
cxt.strokeStyle="red";
cxt.lineWidth=4;
cxt.strokeRect(20,20,96,39);
cxt.font="bold 35px 楷体";
cxt.fillStyle="red";
cxt.textBaseline = "top";
cxt.fillText("作 废",20,20);
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="100" style="border:1px dashed gray;"></canvas>
</body>
</html>
python的turtle
采用tkinter中的canvas组件可以绘制作废章,不过最近在学turtle的基本用法,想着用turtle实现更简单。绘制代码及效果如下图所示:
import turtle
turtle.color('red')
turtle.pensize(5)
turtle.penup()
turtle.goto(-50,50)
turtle.pendown();
turtle.forward(96)
turtle.right(90);
turtle.forward(39)
turtle.right(90);
turtle.forward(96)
turtle.right(90);
turtle.forward(39)
turtle.penup()
turtle.goto(-40,15)
turtle.pendown();
turtle.write("作 废",align="left",font=("楷体", 22, "bold"))
turtle.hideturtle()
turtle.done()
html的div
不编写代码,使用html的div和span标签,通过CSS设置来配成作废章的样式(CSS的东西确实搞不太懂,主要参照参考文献5设置的文本对齐)。html代码及效果如下图所示:
.border{
position: absolute;
left: 50px;
top: 50px;
width: 96px;
height: 39px;
border: 4px solid red;
}
#content{
color : red;
font-size:30px;
font-weight:bold;
font-family: 楷体;
margin: 0 auto;
display: table;
}
<div class="border">
<span id="content">作 废</span>
</div>
参考文献
[1]https://item.jd.com/1684454184.html#none
[2]https://www.runoob.com/w3cnote/html5-canvas-intro.html
[3]https://codepen.io/
[4]https://www.twle.cn/l/yufei/canvas/canvas-basic-text-textbaseline.html
[5]https://www.cnblogs.com/HtmlDuck/p/16258806.html