html5畫布創建標尺

我想在圖像中顯示的頂部和左側創建標尺。我沒有找到有用的東西。請指導我。html5畫布創建標尺

enter image description here

2013-01-13 Sandeep Kumar

請提供您想去的地方更多細節創造它？（你希望結果最終在頁面上） –

@ShaharGalukman：我希望它在畫布的左側和頂部。 –

我只是需要做同樣的事情網頁和管理的最終設計出一個簡單的算法來實現任務：

代碼背後：

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>

來源

2013-10-30 16:00:35 Damo

html5畫布創建標尺

回答

相關問題