html5画布创建标尺

时间:2013-01-13 09:33:24

标签: html5 canvas

我想在图像上显示顶部和左侧的标尺。我没有找到任何有用的东西。请指导我。

enter image description here

1 个答案:

答案 0 :(得分:0)

我只需要为网页做同样的事情,并设法最终设计一个简单的算法来实现任务:

代码背后:

 public partial class RulerGen : System.Web.UI.Page
 {
    protected void Page_Load(object sender, EventArgs e)
    {
        int RulerLengthMM = Int32.Parse(Request.QueryString["LenMM"]);
        int RulerLengthPixels = Int32.Parse(Request.QueryString["LenPx"]);
        int RulerHeightPixels = Int32.Parse(Request.QueryString["HeightPx"]);
        string sBC = Request.QueryString["BColour"];
        string sFC = Request.QueryString["FColour"];


        double dConversionFactor = (float)RulerLengthPixels / (float)RulerLengthMM;
        double dTolerance = 0.5;
        int iTextCount = 0;

        Bitmap b = new Bitmap(RulerLengthPixels, RulerHeightPixels);
        // Set to background colour
        for (int x = 0; x < RulerLengthPixels; x++)
        {
            for (int y = 0; y < RulerHeightPixels; y++)
            {
                b.SetPixel(x, y, Color.FromName(sBC));
            }
        }
        for (int x = 0; x < RulerLengthPixels; x++)
        {
            b.SetPixel(x, 0, Color.FromName(sFC));
            if (x % (dConversionFactor * 10) <= dTolerance || x % (dConversionFactor * 10) >= (dConversionFactor * 10) - dTolerance)
            {
                // Do this every 10 mm
                for (int y = 0; y < RulerHeightPixels*0.7; y++)
                {
                    b.SetPixel(x, y, Color.FromName(sFC));
                 }

                // Add text
                string sText = iTextCount++.ToString();
                var gr = Graphics.FromImage(b);

                gr.DrawString(sText, SystemFonts.DefaultFont, Brushes.Black, new Point(x, (int)(RulerHeightPixels * 0.5)));
            }
            if (x % (dConversionFactor * 10) == (dConversionFactor * 5) || (x % (dConversionFactor * 10) >= (dConversionFactor * 5) - dTolerance && x % (dConversionFactor * 10) <= (dConversionFactor * 5) + dTolerance))
            {
                // Do this every 5 mm
                for (int y = 0; y < RulerHeightPixels/2; y++)
                {
                    b.SetPixel(x, y, Color.FromName(sFC));
                }
            }
            if (x % (dConversionFactor) <= dTolerance || x % (dConversionFactor) >= dConversionFactor-dTolerance)
            {
                // Do this every 1 mm
                for (int y = 0; y < RulerHeightPixels/10; y++)
                {
                    b.SetPixel(x, y, Color.FromName(sFC));
                }
            }


        }

        // Convert the image to byte[]
        System.IO.MemoryStream stream = new System.IO.MemoryStream();
        b.Save(stream, System.Drawing.Imaging.ImageFormat.Gif);
        byte[] imageBytes = stream.ToArray();
        // Convert byte[] to Base64 String
        string base64String = Convert.ToBase64String(imageBytes);

        // set img tag src
        imgTest.Src = "data:image/gif;base64," +base64String;
        imgTest.Width = RulerLengthPixels;
        imgTest.Height = RulerHeightPixels;}}

Aspx代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RulerGen.aspx.cs" Inherits="Kodit.TemplateDesigner.RulerGen" %>

<!DOCTYPE html>    
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="" runat="server" id="imgTest" />
</div>
</form>
</body>
</html>