基于Canvas控件库和新表单构建网页和网站的系统

分享于 

140分钟阅读

Web开发

  繁體

https://github.com/akshaysrin/CanvasControlLibrary/archive/master.zip

** 在文章或者代码中没有改变,所以需要重新读取。

重要通知

我不再做开源,我已经不再支持画布控制库了。 感谢你的投票,5星级我欣赏。 幸运的是,你所有看到这篇文章或者阅读或者修改或者使用你自己的软件或者使用我的代码。 在软件和计算机行业中,我do自己的能力,而不需要任何形式的培训,谁可以通过软件或者计算机来学习。 我寻找自己的产品想法,从现在到今天,我已经拥有了很多,我自己使用。 我还重写了画布控制库系统,可以用于一些产品想法,但它所有的关闭源代码不再免费。

新系统

现在有一个新的系统可以在 Visual Studio 2015中使用 ASP.NET MVC Web API 系统。 有一个新的Canvas控件库javascript文件和后台模型文件以及一个控制器。 系统现在也依赖于 $.post ajax方法,用于在客户端( 浏览器) 和后端 ASP.NET 之间交换数据。 要获得软件,请到 https://github.com/akshaysrin/CanvasControlLibrary

介绍

警告: IE10 Windows 7存在 POST Ajax请求问题,直到 Microsoft Canvas控件库修复this将不支持 Windows 7的IE10. Windows 8上的IE10工作正常。

向 上面 警告工作的时间为 :

我推荐使用的meta标记是 IE=edge。 除非你在 Windows 7上,否则自动更新将更新 IE 到 Windows 7版本 10. 如果在 Windows 7上使用 IE 10,然后继续使用 IE,则将元标记属性从IE=edge更改为 IE=EmulateIE9. 基本上来说,浏览器现在就像on一样工作,在这种情况下,画布控制库ajax不会打破。

导致这里新版本的文章更改:

因为文章是文章的整个系统,我将使用本节描述从最后版本到这个目前的文章。 为此,这里有的变更:

  • 除了不需要的控件外,所有控件都具有制表位功能,即滚动条和wordprocessor控件。 更新了 ASP.NET/C#, jsp/java和PHP服务器端逻辑。
  • 添加了在文本框之间切换焦点的功能。 Web Wunder邮件示例的登录屏幕painfully很明显,在这里,你必须单击 3和 textbox,才能在填写第一个页面之后获得焦点。 现在你可以直接签。 对组合框的支持,但它还没有意义。 所有有有意义的tab键的控件都将被包含。 还更新了如何创建自定义控件创建节,以包括如何在制表位停止过程中包含自定义控件。
  • 我创建了一个称为如何使用按钮控件创建控件how的节。 对那些我想鼓励自己编写自定义控件并将它的贡献给CCL社区的人"。

目录

简介

目前如果你想使用HTML5中的控件 like button 或者组合框,你可以在网页上使用HTML5元素和位置。 如果你希望文本和下拉 List 包含背景或者复杂控件的图像,这些控件将受到限制。 HTML5中引入的另一个新元素是canvas元素。 这里元素允许使用JavaScript在它上面绘制任何内容。 当前情况是没有可以用的控件,可以根据画布使用这些控件。 为了插入这个差异,我创建了一个画布控件库,这些控件和高级的Treeview 类似于。 因这里,在使用我的画布控件库的ComboBox示例中,将图像添加到文本区域的background 和 List 下降非常简单。 还将动画图形和图表控件移植到第一类画布控件库控件。

此外,本文还提供了基于的示例网页,以及运行在 Apache 上的PHP示例,以及运行在IIS的PHP示例。 你可以在任何主要浏览器上检查新系统的功能。 另外,随着不断增加的新增加也将推特的变化 Twitter。 已经为系统创建了一个页面。 所以如果你喜欢这个系统,或者在 Twitter 上使用它,也可以在页面或者看看Facebook页面。

如果你要查看 FormsBased.aspx ( ASP.NET/PHP在IIS上的Apache/PHP on ),请注意下面的示例:你将注意到这里新系统与需要服务器回发的网页和在客户机上显示新结果的当前正常的web页面之间存在以下区别:

  • 你不能离开页面,它就像一个 Windows 应用程序。
  • 用户可以在服务器处理更快的时候,更像 Windows WPF应用程序的可以用性体验一样,更好地输入信息。
  • 因为你在单击方式时没有下载整个网页,因这里在示例中预订票据更快更响应用户。 因此,在其他方面表现。
  • 如果你使用常规的HTML5控件构建表单的网站页面,那么 final 卖家就是不明智的。 所以你可以提供最好的外观和感觉,唯一的极限是你的艺术想象而不是技术,这是迄今为止的极限。

使用代码的

JavaScript的代码可以从GitHub存储库链接下载到 Canvas控件库。 目前,ASP.NET的示例在相同的GitHub存储库中可用。

标签控件:

最简单的元素是Label控件,并在画布中添加标签,以便在画布元素后面的画布元素中调用:

createLabel(elemId, 'l1', 150, 10, 100, 20, 'Label 1', '#000000', 12, '12pt Ariel', null, highestDepth); 

创建标签的基本函数调用是:

function createLabel(canvasid, controlNameId, x, y, width, height, text, 
 textColor, textHeight, textFontString, drawFunction, depth, alignment, clickFunction, 
 backgroundColor, autoAdjustWidth, tag, isHyperlink, url, nobrowserhistory, isnewbrowserwindow, 
 nameofnewbrowserwindow, widthofnewbrowserwindow, heightofnewbrowserwindow, newbrowserwindowisresizable, 
 newbrowserwindowhasscrollbars, newbrowserwindowhastoolbar, newbrowserwindowhaslocationorurloraddressbox, 
 newbroserwindowhasdirectoriesorextrabuttons, newbrowserwindowhasstatusbar, 
 newbrowserwindowhasmenubar, newbrowserwindowcopyhistory) 

这意味着画布的to被传递给了"canvas1",它的中要绘制的画布是函数调用的第一个参数。 第二个和第三个参数x 是要在画布上绘制的标签左上角的点位置。 标签的宽度和高度。 文本参数是要为标签显示的文本。在本例中,绘制的标签将显示位置 150处的文本标签 1,canvas1画布上的50. textColor 是要绘制的文本的颜色。 textHeighttextFontString 字体点值基本相同,在这里是 12,我们使用 12点Ariel字体来绘制标签文本。 如果你想绘制定制的东西,那么你可以自己提供JavaScript画布绘图代码,以任何自定义方式绘制标签。 深度值是在它的上绘制控件的层,通常你希望使用在画布控件库内部JavaScript代码中定义和维护的highestDepth 变量值。 你还可以将标签设置为超链接并提供参数。 查看提供额外超链接参数的按钮示例。

按钮控件:

如果你想将按钮添加到画布上,你可以在画布元素之后添加以下JavaScript调用,你可以按如下所示绘制该按钮:

createButton(elemId, 'b1', 10, 10, 100, 30, 'Google Search', '#0000FF', 12, 
 '12pt Ariel', 5, highestDepth, 1, 0, null, null, '#bee6fd', '#a7d9f5', 
 '#eaf6fd', '#d9f0fc', '#3c7fb1', null, 1, 'http://www.google.com'); 
createButton(elemId, 'b2', 50, 38, 100, 40, 'CodeProject', '#0000FF', 
 12, '12pt Ariel', 10, highestDepth + 1, 1, 1, null, null, '#bee6fd', '#a7d9f5', '#eaf6fd', 
 '#d9f0fc', '#3c7fb1', null, 1, 'http://www.codeproject.com', 0, 1, 'CodeProject', 
 '600', '400', 'no', 'no', 'no', 'no', 'no', 'no', 'no', 'no'); 
createButton(elemId, 'b8', 500, 74, 250, 56, 'Custom Click Function', '#0000FF', 
 12, '12pt Ariel', 7, highestDepth + 1, 2, 1, 
 function (canvasid, windowid) { invokeServerSideFunction('AjaxEx1.aspx', 
 'ClickMe', elemId, windowid, function () { alert('Did Postback'); }); }, 
 null, '#bee6fd', '#a7d9f5', '#eaf6fd', '#d9f0fc', '#3c7fb1'); 

创建按钮的基本函数调用是:

createButton(canvasid, controlNameId, x, y, width, height, text, textColor, 
 textHeight, textFontString, edgeRadius, depth, theme, hasgloss, clickFunction, drawFunction, 
 bottomColorStart, bottomColorEnd, topColorStart, topColorEnd, borderColor, tag, isHyperlink, 
 url, nobrowserhistory, isnewbrowserwindow, nameofnewbrowserwindow, widthofnewbrowserwindow, 
 heightofnewbrowserwindow, newbrowserwindowisresizable, 
 newbrowserwindowhasscrollbars, newbrowserwindowhastoolbar, 
 newbrowserwindowhaslocationorurloraddressbox, newbroserwindowhasdirectoriesorextrabuttons, 
 newbrowserwindowhasstatusbar, newbrowserwindowhasmenubar, newbrowserwindowcopyhistory) 

example example canvas1 draw,example font font font font height height height height height height height Google Google Google。 唯一的新事情是当你点击按钮时,我们提供 www.google.com.,我们不提供自定义图形JavaScript函数,所以我们把 drawFunction 参数设置为 null。 parameters。topColorStart和topColorEnd定义了按钮背景的下半梯度和上半梯度。 边框颜色参数在颜色中绘制边框。 isnewbrowserwindow 1 设置为自定义浏览器窗口的示例中,在第3 示例示例中提供自定义的javascript窗口,以自定义URL以显示 URL,并在示例中显示自定义的javascript按钮。

主题 beautification beautification 2主题主题 1,带有光泽和主题 1的屏幕截图如下图所示:

主题 2的截图显示为 below,它是一个更复杂的主题:

网格/listbox控件:

要向画布添加网格,你需要在画布元素之后执行以下JavaScript调用,你要在画布元素上绘制网格:

createGrid(elemId, 'g1', 10, 150, 400, 90, highestDepth, 
 [['123567891011121314', 'abcdefghijklmnopqrst', '000-89843-8983459'], ['2356789101112131415', 
 'bcdefghijklmnopqrstu', '000-89843-8983459'], ['35678910111213141516', 'cdefghijklmnopqrstuv', 
 '000-89843-8983459'], ['45678910111213141516', 'defghijklmnopqrstuv', '000-89843-8983459'], 
 ['5678910111213141516', 'efghijklmnopqrstuv', '000-89843-8983459'], ['678910111213141516', 
 'fghijklmnopqrstuv', '000-89843-8983459']], ['Numbers', 'Alphabets', 'GUIDS'], '#000000', 12, 
 '12pt Ariel', '#000000', 14, '14pt Ariel', null, null, function (canvasid, windowid, c, r) { 
 alert('you clicked cell number ' + c + ' at row number ' + r); }, 20, 30, [150, 150, 200], 1, 
 '#b7bfc8', 1, '#fbfbfb', '#d9dde1', '#f6f8fb', '#e7e7e7', '#eaf1ff', '#d7e5ff'); 

创建网格的基本函数调用是:

createGrid(canvasid, controlNameId, x, y, width, height, depth, rowData, 
 headerData, rowDataTextColor, rowDataTextHeight, rowDataTextFontString, headerDataTextColor, 
 headerDataTextHeight, headerDataTextFontString, drawRowDataCellFunction, drawHeaderCellFunction, 
 cellClickFunction, dataRowHeight, headerRowHeight, columnWidthArray, hasBorder, borderColor, 
 borderLineWidth, headerbackgroundstartcolor, headerbackgroundendcolor, altrowbgcolorstart1, 
 altrowbgcolorend1, altrowbgcolorstart2, altrowbgcolorend2, tag) 

函数中新参数之一是 rowData,它只是一个包含为每个单元格绘制单元格文本的行,其中包含一个行。 下一个 array headerData 是一个 array,它包含为每个 header 行绘制的header 单元格文本。 它的优点之一是 header 行继续滚动网格内容,只有内容行和单元格是滚动的。 你可以通过传入一个 drawRowDataCellFunction 函数来绘制单元格内容,在示例中我们使用默认的图形方法。 你可以做相同的工作,以绘制示例案例中的header 单元格,因这里默认图形方法将使用。 我提供了一个 cellClickFunction,它只是弹出一个消息框,告诉你在网格上单击哪个单元格,然后做任何复杂的业务。 dataRowHeight 是每行的高度,它的中每行必须均匀且固定,在该示例中设置为 20像素。 设置为 30像素的header 行高度相同。 columnWidthArray 允许你传入包含网格中所有列宽度的array。 这三个参数的其余部分是如何绘制网格边界的。 最后 6个参数都用于渐变 header 和交替行背景的渐变。

对于一个列表框,只需要创建一个只有 1列的网格。 这就是为什么我没有为列表框提供单独的控件。

ComboBox控件

要将组合框添加到画布中,可以从web页面以下的JavaScript元素在画布元素之后调用:

createComboBox(elemId, 'cb1', 10, 280, 200, 20, highestDepth, ['Mumbai','Pune','Juhu', 
 'Phoenix','London','New York','San Fransisco','Los Angeles','Houston','Boston'], null, null, 
 null, null, null, '#364635', 10, '10pt Ariel', '#1b213b', 10, '10pt Ariel'); 

创建ComboBox的基本函数调用是:

createComboBox(canvasid, controlNameId, x, y, width, height, depth, data, 
 drawTextAreaFunction, drawButtonFunction, drawListAreaFunction, buttonClickFunction, 
 listAreaClickFunction, textAreaTextColor, textAreaTextHeight, textAreaFontString, listAreaTextColor, 
 listAreaTextHeight, listAreaFontString, onSelectionChanged, tag) 

数据参数是包含要在下拉 List 区域中显示的字符串的List的array。 这里的一些新参数是 drawTextAreaFunctiondrawButtonFunctiondrawListAreaFunction,它们都以默认的绘图功能在示例中作为null传递。 你可以重写这些选项以完全自定义组合框的图形。

复选框控制

要将复选框添加到画布中,可以从web页面以下的JavaScript元素在画布元素之后调用:

createCheckbox(elemId, 'chk1', 150, 320, highestDepth, 0); 

创建复选框的基本函数调用是:

createCheckbox(canvasid, controlNameId, x, y, depth, status, tag) 

在这种情况下,新参数的状态为 1,选中的参数为,不选中 0.

单选按钮组控制:

要将单选按钮组添加到画布中,可以从web页面以下的JavaScript元素在画布元素之后调用:

createRadioButtonGroup(elemId, 'rg1', 10, 350, 0, highestDepth, 'test1', 
 ['Dog', 'Cat', 'Horse', 'Cow', 'Giraffe'], 0, '#000000', '10pt Ariel', 10, 10); 

创建单选按钮组的基本函数调用是:

createRadioButtonGroup(canvasid, controlNameId, x, y, alignment, depth, groupname, 
 labels, selectedid, labelTextColor, labelFontString, labelTextHeight, radius, tag) 

一些新参数是对齐的,现在只能将它设置为 0并在代码中忽略单选按钮。 稍后你将被设置为 1,并将它的绘制为垂直堆叠的单选按钮。 groupname 参数是单选按钮组的NAME,易于识别,在示例中是 test1. label参数是 array,它包含每个单选按钮的标签文本,并按所提供的顺序绘制。 selectedid 参数是 array 中的索引,从该索引开始选择。

图像控制:

要将图像添加到画布中,可以从web页面以下的JavaScript元素调用以下图像:

createImage(elemId, 'i1', 10, 400, 64, 64, highestDepth, 'test.png', 
 function (canvasid, windowid) { alert('You clicked the image'); }); 

创建图像的基本函数调用是:

createImage(canvasid, controlNameId, x, y, width, height, depth, imgurl, 
 clickFunction, tile, tag, isHyperlink, url, nobrowserhistory, 
 isnewbrowserwindow, nameofnewbrowserwindow, 
 widthofnewbrowserwindow, heightofnewbrowserwindow, 
 newbrowserwindowisresizable, newbrowserwindowhasscrollbars, 
 newbrowserwindowhastoolbar, newbrowserwindowhaslocationorurloraddressbox, 
 newbroserwindowhasdirectoriesorextrabuttons, 
 newbrowserwindowhasstatusbar, 
 newbrowserwindowhasmenubar, newbrowserwindowcopyhistory) 

下面是new参数,建议在单击图像时使用URL链接路径,在示例中单击 clickFunction 是在弹出消息时执行的功能。 这个图片 like button 和标签同样可以变成超链接。 查看按钮以了解如何指定可选参数的说明。

Treeview 控件:

要向画布添加 Treeview,你需要在画布元素之后执行以下JavaScript调用,在画布元素上绘制 Treeview,如下所示:

The example is still to be created by me. 

创建 Treeview的基本函数调用是:

createTreeView(canvasid, controlNameId, x, y, width, height, depth, nodes, textcolor, 
 textfontstring, textheight, clickNodeFunction, tag, hasicons, iconwidth, iconheight) 

节点参数替换旧版本中的数据参数。 你不再需要自己创建这个函数,而是使用 helper 函数 addChildNodes(nodes, parentnode, imageurl, expanded, label, customextrainfo) 另外,每个节点格式都是 { TreeviewNodeInstancesParentNode: parentnode,TreeviewNodeInstancesRootNodes: 节点,密文:密文,展开: 扩展,: 新的array ( ),标签: 标签,CustomExtraInfo: CustomExtraInfo }. 这是自解释的。 在单击节点时,clickNodeFunction 就是一个JavaScript函数,在示例中弹出一条消息给出节点of索引值。 现在节点 array 可以有一个 icon 图像的URL,以便显示一个图像,例如,节点将是 [2,1,'Test',1,'MyImage.png']。 如果使用图标,hasicons应该是 1,你必须提供宽度和高度,因此所有图标都必须是相同的宽度和高度,否则将出现dispay错误。

ProgressBar控件:

如果你想将ProgressBar添加到画布中,你可以在画布元素之后执行以下JavaScript调用,你可以按照以下方式绘制 ProgressBar:

createProgressBar(elemId, 'pg2', 10, 290, 200, 20, highestDepth, '#33ec25', 100, 0, 60); 

创建ProgressBar的基本函数调用是:

createProgressBar(canvasid, controlNameId, x, y, 
 width, height, depth, color, maxvalue, minvalue, currentvalue, tag) 

颜色是进度条的颜色。 maxvalue参数是最大值或者进程为 100%,这是控件的宽度。 如果你想处理一个进度栏,那么在这个例子中,minvalue参数是 0,但是在 30处显示一个进度条,那么这个参数是有用的。 如果你想要显示不同的进度百分比,你可以使用setProgressBarCurrentValue函数来更改这个值,无论你什么时候想显示一个不同的进度。 createProgressBar函数的windowid参数由函数返回,这样你可以在变量中保存它,并在需要时将它的传递给。

slider 控件:

要向画布添加 slider,你需要在画布元素之后执行以下JavaScript调用,在画布元素上绘制 slider,如下所示:

createSlider(elemId, 's2', 10, 350, 200, 20, highestDepth, 10, 100, 0, 50); 

创建 slider的基本函数调用是:

createSlider(canvasid, controlNameId, x, y, width, 
 height, depth, handlewidth, maxvalue, minvalue, value, tag) 

你可以在 slider 高度和handlewidth参数上指定手柄的尺寸。 最大值和最小值和当前值是 slider 上的句柄位置,也必须提供参数。

面板控件:

如果你想将面板添加到画布上,你可以在画布元素后面添加以下JavaScript调用,你可以按照下面的方法绘制面板:

var panelwindowid = createPanel(elemId, 'p1', 5, 50, 150, 140, 
 highestDepth, 1, '#c8c8c8', 1, '#d1ddff', '#a7afc6');
registerChildWindow(elemId, createProgressBar(elemId, 'pg1', 10, 100, 200, 20, 
 highestDepth, '#33ec25', 100, 0, 60), panelwindowid);
registerChildWindow(elemId, createSlider(elemId, 's1', 10, 150, 200, 20, 
 highestDepth, 10, 100, 0, 50), panelwindowid);var panelwindowid2 = createPanel(elemId, 'p2', 5, 250, 150, 140, 
 highestDepth, 1, '#c8c8c8', 1, '#d1ddff', '#a7afc6', 1, 150, 0, 'Test Panel', 
 '#000000', 12, '12pt Ariel', '#cfcfcf', '#ababab', 20, '#495be5', 1, 7);
registerChildWindow(elemId, createProgressBar(elemId, 'pg2', 10, 290, 200, 20, 
 highestDepth, '#33ec25', 100, 0, 60), panelwindowid2);
registerChildWindow(elemId, createSlider(elemId, 's2', 10, 350, 
 200, 20, highestDepth, 10, 100, 0, 50), panelwindowid2);var panelwindowid3 = createPanel(elemId, 'p3', 5, 400, 150, 140, 
 highestDepth, 1, '#c8c8c8', 1, '#d1ddff', 
 '#a7afc6', 1, 150, 0, 'Test Panel', '#000000', 12, 
 '12pt Ariel', '#cfcfcf', '#ababab', 20, '#495be5', 0, 7);
registerChildWindow(elemId, createProgressBar(elemId, 'pg3', 10, 430, 200, 20, 
 highestDepth, '#33ec25', 100, 0, 60), panelwindowid3);
registerChildWindow(elemId, createSlider(elemId, 's3', 10, 470, 200, 20, 
 highestDepth, 10, 100, 0, 50), panelwindowid3);
var panelwindowid3 = createPanel(elemId, 5, 350, 
 150, 140, highestDepth, 1, '#c8c8c8', 
 1, '#d1ddff', '#a7afc6', 1, 150, 0, 'Test Panel', '#000000', 12, 
 '12pt Ariel', '#cfcfcf', '#ababab', 20, '#495be5', 0, 7);
registerChildWindow(elemId, createProgressBar(elemId, 10, 380, 200, 20, 
 highestDepth, '#33ec25', 100, 0, 60), panelwindowid3);
registerChildWindow(elemId, createSlider(elemId, 10, 420, 200, 20, 
 highestDepth, 10, 100, 0, 50), panelwindowid3);

创建面板的基本函数调用是:

createPanel(canvasid, controlNameId, x, y, 
 width, height, depth, hasBorder, borderColor, 
 hasBackgroundGradient, backgroundStartColor, 
 backgroundEndColor, iscollapsable, collapsedWidth, 
 collapsedHeight, panellabel, panelLabelTextColor, 
 panelLabelTextHeight, panelLabelTextFontString, 
 headerBackgroundStartColor, headerBackgroundEndColor, headerheight, 
 expandCollapseButtonColor, isexpanded, expandCollapseButtonRadius, tag) 

面板创建的第一个例子除了由参数指定的渐变填充的rectangle 外没有它的他的例子。 若要向面板中添加子控件,请使用 registerChildWindow 函数。 在本例中,我将 slider 和进度条控件附加到面板。 你会在屏幕截图中注意到,他们是剪辑到区域定义的父控件的面板边界。 第二个和第三个例子展示了如何制作可以展开的可折叠面板。 第二个示例展开面板展开和第三个折叠。

压延机控制:

如果你想将日历添加到画布上,你可以在画布元素之后执行以下JavaScript调用,你可以在画布元素上绘制 TeeView:

createCalendar(elemId, 'cal1', 10, 10, 358, 408, highestDepth, 'July', '2012', 
 '3 July 2012', 50, 50, 50, '#7979AE', '#bbbbc8', '#202020', 16, '16pt Ariel', '#000000', 12, '12pt Ariel', 
 '#D0D0D0', 12, '12pt Ariel', '#d2d2fd', 12, '12pt Ariel', '#9898b7', '#FFFFFF', 12, '12pt Ariel', '#b4b4ff', 
 '#d3d3fb', function (canvasid, windowid, selectedDay) { alert('You selected the date ' + 
 selectedDay.toString()); }, '#6f7791', 12, '12pt Ariel'); 

创建日历的基本功能调用是:

createCalendar(canvasid, controlNameId, x, y, width, height, depth, visibleMonth, 
 visibileYear, selectedDay, dayCellWidth, dayCellHeight, headerHeight, headerBackgroundColor, 
 bodyBackgroundColor, textHeaderColor, textHeaderHeight, textHeaderFontString, dayDateActiveColor, 
 dayDateActiveTextHeight, dayDateActiveTextFontString, 
 dayDateInactiveTextColor, dayDateInactiveTextHeight, 
 dayDateInactiveTextFontString, selectedDayTextColor, 
 selectedDayTextHeight, selectedDayTextFontString, 
 selectedDayHighLightColor, todayTextColor, 
 todayTextHeight, todayTextFontString, todayHighLightColor, 
 mouseoverHightlightColor, ondayClickFunction, 
 dayLabelTextColor, dayLabelTextHeight, dayLabelTextFontString, tag) 

月份和年份以完整月份 NAME 示例July年和年编号示例 2012提供,通过visibleMonth和visibleYear参数。 当用户点击某一天时,selectedDay 参数将高亮显示日历上那一天的日期。 通过 dayCellWidthdayCellHeight 参数提供一天单元格的宽度和高度。 headerHeight参数提供月份名称和按钮的标题的高度。 daydateactive。"。"。参数提供在可以见月内绘制日期的信息。 daydateinactive。"。"。在不在可以见月的日历上的那些日期的参数。 今天。parameters参数提供如何绘制今天的日期。 在日历上单击一天时,ondayClickFunction 可以提供自定义逻辑的能力。 dayLabel。"。"。参数提供如何绘制日期的header 名称例如,,等。

日历示例的屏幕截图如下:

小型日历示例 javascript:

createCalendar(elemId, 'cal2', 10, 500, 148, 168, highestDepth, 'July', '2012', 
 '3 July 2012', 20, 20, 20, '#7979AE', '#bbbbc8', '#202020', 8, '8pt Ariel', '#000000', 8, 
 '8pt Ariel', '#D0D0D0', 8, '8pt Ariel', '#d2d2fd', 8, '8pt Ariel', '#9898b7', '#FFFFFF', 8, 
 '8pt Ariel', '#b4b4ff', '#d3d3fb', function (canvasid, windowid, selectedDay) 
 { alert('You selected the date ' + selectedDay.toString()); }, '#6f7791', 8, '8pt Ariel'); 

小日历示例的屏幕截图如下:

DatePicker控件:

要在画布中添加 DatePicker,你需要在画布元素之后执行以下JavaScript调用,你要在画布元素上绘制 DatePicker DatePicker如下所示:

createDatePicker(elemId, 'cdp1', 10, 700, 148, 20, highestDepth, 'July', '2012', 
 '3 July 2012', 20, 20, 20, '#7979AE', '#bbbbc8', '#202020', 8, '8pt Ariel', '#000000', 8, '8pt Ariel', 
 '#D0D0D0', 8, '8pt Ariel', '#d2d2fd', 8, '8pt Ariel', '#9898b7', '#FFFFFF', 8, '8pt Ariel', '#b4b4ff', 
 '#d3d3fb', null, '#6f7791', 8, '8pt Ariel', '#000000', 12, '12pt Ariel', 168); 

创建日历的基本功能调用是:

createDatePicker(canvasid, controlNameId, x, y, width, height, depth, 
 visibleMonth, visibileYear, selectedDay, dayCellWidth, dayCellHeight, headerHeight, headerBackgroundColor, 
 bodyBackgroundColor, textHeaderColor, textHeaderHeight, textHeaderFontString, dayDateActiveColor, 
 dayDateActiveTextHeight, dayDateActiveTextFontString, dayDateInactiveTextColor, dayDateInactiveTextHeight, 
 dayDateInactiveTextFontString, selectedDayTextColor, selectedDayTextHeight, selectedDayTextFontString, 
 selectedDayHighLightColor, todayTextColor, todayTextHeight, todayTextFontString, todayHighLightColor, 
 mouseoverHightlightColor, ondayClickFunction, dayLabelTextColor, dayLabelTextHeight, dayLabelTextFontString, 
 textboxAreaTextColor, textboxAreaTextHeight, textboxAreaTextFontString, calenderHeight, tag) 

所有参数都与日历控件几乎相同。 差异是 calenderHeight,而不是高度决定下拉日历的高度。 高度定义文本框区域的高度以及相应大小的按钮的相应大小。 3 个新参数 textboxAreaTextColortextboxAreaTextHeighttextboxAreaTextFontString 都定义了在 dd/mm/yyyy 格式中选定日期的文本如何被绘制。

下面提供了带有下拉日历显示的datepicker控件的屏幕截图:

动画条形图控件:

要在画布中添加动画条形图控件,你需要在画布元素之后执行以下JavaScript调用,在画布元素上绘制条形图图,你可以按如下所示绘制条形图:

createBarGraph(elemId, 'bg1', 500, 500, 400, 300, highestDepth, [['GM', 50, '#FF0000'], 
 ['Ford', 30, '#00FF00'], ['Chrysler', 20, '#0000FF']], 100, 5, "Auto Industry %'s", '#000000', 
 12, '12pt Ariel', 50, '#000000', 10, '10pt Ariel', 50, 20, function (canvasid, windowid, i) 
 { var barGraphProps = getBarGraphProps(canvasid, windowid); 
 alert('You clicked on the bar labeled:: ' + barGraphProps.Data[i][0]); }, 1, 100); 

创建条形图的基本函数调用是:

createBarGraph(canvasid, controlNameId, x, y, width, height, depth, data, 
 maxvalue, nummarksy, title, titletextcolor, titletextheigth, titletextfontstring, barwidth, 
 axisLabelsTextColor, axisLabelsTextHeight, axisLabelsTextFontString, marginleft, 
 gapbetweenbars, barClickFunction, haslegend, marginright, tag) 

数据参数是数组的array。 每个酒吧由一个标签,一个数字和酒吧的颜色。 maxvalue是y 轴的maxvalue的参数。 nummarksy是y 轴上的标记数。 标题参数提供如何绘制标题。 barwidth是数据 array 中提供的每个标签所绘制的每个条的宽度。 AxisLabel。"。"。参数提供如何绘制轴标签和每条标签 inside的标签。 marginleft参数是要在y 轴左侧留下多少空间。 gapbetweenbars参数定义了每个条之间的间隙。 barClickFunction 允许你在单击栏时执行一些自定义操作。 在这个例子中它弹出一个警报,它给出了栏的标签文本。

条形图示例的屏幕截图如下所示:

动画饼图控件:

要将动画饼图控件添加到画布中,可以从web页面以下的JavaScript元素在画布上调用:

createPieChart(elemId, 'pc1', 10, 10, 500, 336, highestDepth, [['GM', 50, '#FF0000'], 
 ['Ford', 30, '#00FF00'], ['Chrysler', 20, '#0000FF']], "Auto Industry %'s", '#000000', 
 10, '10pt Ariel', '#000000', 10, '10pt Ariel', function (c, w, i) 
 { var p = getPieChartProps(c, w); 
 alert("You clicked on slice for" + p.Data[i][0]); }); 

创建条形图的基本函数调用是:

createPieChart(canvasid, controlNameId, x, y, width, height, depth, data, title, 
 titletextcolor, titletextheight, titletextfontstring, labeltextcolor, 
 labeltextheight, labeltextfontstring, sliceClickFunction, tag) 

数据参数是数组的array。 每个饼片由一个标签。一个数字和饼图片的颜色来定义。 实际大小半径计算为控件的高度减去标题文本高度减去标题文本高度 24. 所以如果你想要一个更小或者更大的圆,只要调整窗户的高度。 当用户点击饼片,并将画布 id。窗口id和索引放入数据元素时,将调用切片函数,其中单击了数据元素的clicked。 在这个例子中,它弹出一个警告,说你点击了通用汽车。福特或者克莱斯勒的slice。

示例饼图的屏幕截图没有选中任何切片,用户单击了 换句话说,:

用户为这里举行了一个截图,用于克莱克斯饼图片用户单击这里示例:

动画多线图控制:

要将动画多行图控件添加到画布中,可以从web页面以下的JavaScript元素在画布之后调用:

createLineGraph(elemId, 'lg1', 10, 550, 400, 336, highestDepth, [[[[10, 80], [20, 50], 
 [30, 75], [40, 34], [50, 20], [60, 80], [70, 68], [80, 90], [90, 45]], '#00FF00'], [[[10, 45], [20, 70], 
 [30, 35], [40, 64], [50, 50], [60, 30], [70, 40], [80, 70], [90, 90]], '#FF0000']], 100, 5, 100, 5, 
 'Automotive Sales', '#000000', 10, '10pt Ariel', '#000000', 10, '10pt Ariel', 
 function (canvasid1, windowid1, i) { alert(i.toString()); }, 50);
createLineGraph(elemId, 'lg2', 550, 10, 400, 336, highestDepth, [[[['A1', 80], 
 ['A2', 50], ['A3', 75], ['A4', 34], ['A5', 20], ['A6', 80], ['A7', 68], ['A8', 90], ['A9', 45], 
 ['A10', 68]], '#00FF00'], [[['A1', 45], ['A2', 70], ['A3', 35], ['A4', 64], ['A5', 50], ['A6', 30], 
 ['A7', 40], ['A8', 70], ['A9', 90], ['A10', 28]], '#FF0000']], 100, 5, 100, 5, 'Automotive Sales', 
 '#000000', 10, '10pt Ariel', '#000000', 10, '10pt Ariel', 
 function (canvasid1, windowid1, i) { alert(i.toString()); }, 50, 1); 

创建多重折线图的基本函数调用是:

createLineGraph(canvasid, controlNameId, x, y, width, height, depth, data, xmaxvalue, 
 nummarksx, ymaxvalue, nummarksy, title, titletextcolor, titletextheight, titletextfontstring, 
 axislabelstextcolor, axislabelstextheight, axislabelstextfontstring, 
 clickFunction, marginleft, islabeledxvalues, tag) 

数据参数是数组的array。 每行由x。y 值和行颜色的array 定义。 可以为多行提供多个这样的集合,也可以为一行提供多个这样的集合。 单击函数获取一个值,该值是被单击的行集合的索引。 因此你可以根据用户单击哪个行来执行自定义逻辑,这是不同的数据集。

由于使用了数字而不使用标签上的标签,多行图形示例的屏幕截图丢失,因此在以下情况下:

使用x 轴上标签,以便将最后一个可选参数设置为 1的第二个示例的屏幕截图:

动画图表控制:

要将动画规范图表控件添加到画布,可以从web页面以下的JavaScript元素调用以下图表:

createGauge(elemId, 'g1', 10, 950, 350, 350, highestDepth, [0, 100, [0, 30, '#FF0000'], 
 [30, 60, '#FFF000'], [60, 100, '#00FF00'], 10, 5, 80], 'Automotive Efficiency %', 
 '#000000', 16, '16pt Ariel', 150, '#FFFFFF', 10, '10pt Ariel');

创建规格图表的基本函数调用是:

createGauge(canvasid, controlNameId, x, y, width, height, depth, data, title, 
 titletextcolor, titletextheight, titletextfontstring, gaugeradius, 
 gaugelabeltextcolor, gaugelabeltextheight, gaugelabeltextfontstring, tag) 

数据参数是数组的array。 例子中主 array的第一个元素是最小值,第二个元素是最大值,第二个元素是最大值。 main array 中的第二个元素是 array,它定义了从左边到的第一个 arc,它是红色填充的。 第三个元素是一个 array,它定义值的第二个 arc,从值 30到 60范围,并且是 yellow。 下一个元素是 array,定义示例中的最后一个 arc,它从值 60到 100,并且是绿色的。 主要 array的下一个元素是 10,它是主要标记的数量,下一个 5是在每个主要标记之间绘制标记的下一个。 finally 最后一个元素是指示示例为 80时的值。

图表图表示例的屏幕截图如下所示:

动画雷达图控制:

要将动画雷达图控件添加到画布中,可以从web页面以下的JavaScript元素在画布上调用:

createRadarGraph(elemId, 'rg1', 400, 950, 350, 400, highestDepth, [10, 20, 30, 40, 50, 60], 
 60, '#5f69b3', 6, 'Test Radar Graph', '#000000', 16, '16pt Ariel', '#000000', 10, '10pt Ariel');

创建规格图表的基本函数调用是:

createRadarGraph(canvasid, controlNameId, x, y, width, height, depth, data, maxvalue, 
 colorstr, nummarks, title, titletextcolor, titletextheight, titletextfontstring, 
 marklabeltextcolor, marklabeltextheight, marklabeltextfontstring, tag) 

数据参数是一个简单的数字 List,每个数字的每个轴都会绘制一个数字。 maxvalue参数应该是一个轴的最大值。 colorStr是你要绘制雷达区域的颜色。

动画线图控制:

要将动画线区域图控件添加到画布中,可以从web页面以下的JavaScript元素在画布上调用:

createLineAreaGraph(elemId, 'lag1', 1000, 10, 400, 400, highestDepth, [[[10, [20, 30, 10]], 
 [20, [50, 30, 20]], [30, [20, 40, 30]], [40, [10, 20, 40]], [50, [20, 20, 10]], [60, [40, 40, 20]], 
 [70, [50, 10, 10]], [80, [10, 20, 10]], [90, [20, 30, 10]], [100, [40, 20, 10]]], ['#FF0000', '#00FF00', 
 '#0000FF']], 100, 100, 5, 5, 'Regional Sales', '#000000', 16, "normal 16px 'Trebuchet MS', Verdana, 
 Arial, Helvetica, sans-serif", '#000000', 10, '10pt Ariel', 50); 
createLineAreaGraph(elemId, 'lag2', 1450, 10, 400, 400, highestDepth, [[['A1', [20, 30, 10]], 
 ['A2', [50, 30, 20]], ['A3', [20, 40, 30]], ['A4', [10, 20, 40]], ['A5', [20, 20, 10]], ['A6', [40, 40, 20]], 
 ['A7', [50, 10, 10]], ['A8', [10, 20, 10]], ['A9', [20, 30, 10]], ['A10', [40, 20, 10]]], ['#FF0000', '#00FF00', 
 '#0000FF']], 100, 100, 5, 5, 'Regional Sales', '#000000', 16, "normal 16px 'Trebuchet MS', Verdana, 
 Arial, Helvetica, sans-serif", '#000000', 10, '10pt Ariel', 50, 1);

创建线面积图的基本函数调用是:

createLineAreaGraph(canvasid, controlNameId, x, y, width, height, depth, data, xmaxvalue, 
 ymaxvalue, nummarksx, nummarksy, title, titletextcolor, 
 titletextheight, titletextfontstring, axislabelscolor, 
 axislabelsheight, axislabelsfontstring, marginleft, islabeledonxaxis, tag) 

数据参数是数组的array,它以x 值和 array 值的y 值开始。 每个x 必须具有一致的y 值数目的限制。 主 array的第二个元素是要用于区域的颜色的array,必须与每个x 值的y 值相同。 if在第二个例子中,如果你想在x 轴上加上标签,那么只要提供 islabeledonxaxis,如果你提供数字,就不要像在第一个示例中使用数字那样提供数字。

下面是第一个带有数字的示例的示例屏幕截图:

下面是第二个示例,其中使用了x 轴值上的文本:

注意两个图表之间的唯一区别是x 轴上的标签,因为两个图表之间的x 值是不同的。

烛台图形控制:

要将ole图形控件添加到画布中,可以从web页面以下的JavaScript元素在画布之后调用:

createCandlesticksGraph(elemId, 'cg1', 1000, 500, 350, 400, highestDepth, [[30, 70, 20, 80], 
 [10, 30, 5, 35], [50, 30, 23, 80]], [[0, 'GM'], [1, 'Ford'], [2, 'Chrysler']], 75, 100, 5, 'Automotive Stocks', 
 '#000000', 16, '16pt Ariel', 20, '#586d8c', '#305791', 50, '#000000', 10, '10pt Ariel');

创建烛台图形的基本函数调用是:

createCandlesticksGraph(canvasid, controlNameId, x, y, 
 width, height, depth, data, xmarkslabeldata, 
 xmarkswidth, ymaxvalue, nummarksy, title, titlecolor, 
 titleheight, titlefontstring, candlebodywidth, 
 candelbodycolorstr, candellinecolorstr, marginleft, 
 axislabelscolor, axislabelsheight, axislabelsfontstring, tag) 

数据参数是数组的array,其中每个 array 都具有开放。关闭。低。高值。 如果开放值为 LESS,那么如果不将它概括在一起,那么烛台将被填充。 你可以为烛台提供颜色。

下面是该示例的屏幕截图:

圆环图控制:

要向画布添加圆环图控件,你需要在画布元素之后执行以下JavaScript调用,在画布元素上绘制圆环图,方法如下:

createDoughnutChart(elemId, 'dgc1', 1000, 950, 450, 450, highestDepth, [['GM', 50, '#FF0000'], 
 ['Ford', 30, '#00FF00'], ['Chrysler', 20, '#0000FF']], "Auto Industry %'s", '#000000', 16, '16pt Ariel', 
 80, 25, '#000000', 10, '10pt Ariel', 100, 10, '10pt Ariel', function (c, w, i) { var p = getDoughnutChartProps(c, w); 
 alert("You clicked on slice for" + p.Data[i][0]); });

创建圆环图的基本函数调用是:

createDoughnutChart(canvasid, controlNameId, x, y, width, height, 
 depth, data, title, titlecolor, 
 titletextheight, titlefontstring, innerradius, 
 marginsides, labelcolor, labelheight, labelfontstring, 
 legendwidth, legendheight, legendfontstring, sliceClickFunction, tag) 

数据参数与饼图的格式相同,因此请参考。 内半径参数定义中间孔的inside 半径。 圆环图实际上是一个饼图,它中间有一个洞。 marginsides 是在圆环图的右边和左边留下多少空间。 图例宽度参数是用于图例的右侧空间大小。 当用户单击某个切片并且参数与饼图相同时,将引发 sliceClickFunction

下面显示了一个没有切片的示例屏幕截图:

下面显示了带有克莱斯勒切片的示例屏幕截图:

堆积条形图控制:

要将堆叠条形图控件添加到画布中,可以从web页面以下的JavaScript元素调用:

createStackedBarGraph(elemId, 'sbg1', 1450, 800, 400, 400, highestDepth, 
 [['GM', [10, '#FF0000'], [20, '#0000FF'], [10, '#00FF00']], 
 ['Ford', [20, '#FF0000'], [10, '#0000FF'], 
 [30, '#00FF00']], ['Chrysler', [32, '#FF0000'], 
 [25, '#0000FF'], [35, '#00FF00']]], 100, 5, 'Stacked Bar Graph', 
 '#000000', 16, '16pt Ariel', 100, 40, '#000000', 10, '10pt Ariel', function (c, w, i) 
 { var p = getstackedBarGraphProps(c, w); alert("You clicked on the" + 
 p.Data[i][0] + " stacked bar!"); }, 50);

创建堆积条形图的基本函数调用是:

createStackedBarGraph(canvasid, controlNameId, 
 x, y, width, height, depth, data, maxvalue, 
 nummarksy, title, titlecolor, titleheight, 
 titlefontstring, barwidth, gapbetweenbarssets, axislabelscolor, 
 axislabelsheight, axislabelsfontstring, barClickFunction, marginleft, tag) 

data data array arrays arrays stacked starting starting,然后从label标签的标签 array 确定条形长度和 maxvalue 参数所提供的最大值,以及该栏段的颜色。 如果你想调整条的宽度是有点棘手的,那么你要做的就是要增加 barwidthgapbetweenbars 参数,不管你想要的是哪一个,总是 gapbetweenbars。 在这个例子中 barClickFunction 提供了一个消息,显示所点击栏的栏标签。

下面是该示例的屏幕截图:

带有标签线Chart控件的 条:

要将与标签线图控件混合在画布上的条形图添加到画布中,可以在画布元素之后绘制条形图:

createBarsMixedWithLabledLineGraph(elemId, 'mbwllg1', 1450, 450, 400, 300, 
 highestDepth, [['GM', 50, '#FF0000'], ['Ford', 30, '#00FF00'], ['Chrysler', 20, '#0000FF']], 100, 5, 
 "Auto Industry %'s", '#000000', 12, '12pt Ariel', 50, '#000000', 10, '10pt Ariel', 50, 20, 
 function (canvasid, windowid, i) { var barGraphProps = getBarGraphProps(canvasid, windowid); 
 alert('You clicked on the bar labeled:: ' + barGraphProps.Data[i][0]); }, 1, 100, [[[['GM', 80], 
 ['Ford', 50], ['Chrysler', 75]], '#00FF00'], 
 [[['GM', 45], ['Ford', 70], ['Chrysler', 35]], '#FF0000']], 
 function (c, w, i) { alert("You clicked on the line" + i); });

创建堆积条形图的基本函数调用是:

createBarsMixedWithLabledLineGraph(canvasid, 
 controlNameId, x, y, width, height, depth, data, maxvalue, 
 nummarksy, title, titletextcolor, titletextheigth, 
 titletextfontstring, barwidth, axisLabelsTextColor, 
 axisLabelsTextHeight, axisLabelsTextFontString, marginleft, gapbetweenbars, 
 barClickFunction, haslegend, marginright, linesData, lineClickFunction, tag) 

数据参数是条形值,linesData参数保存绘制线条的点。

下面是该示例的屏幕截图:

选项卡控件:

要将tab控件添加到画布中,可以从web页面以下的JavaScript元素在画布元素之后调用:

var tabwindowid = createTabControl(elemId, 'tab1', 200, 60, 250, 100, highestDepth, 
 ['Tab 1', 'Tab 2', 'Tab 3'], '#000000', 10, '10pt Ariel', '#C0C0C0', 
 '#D0D0D0', 1, '#6c6cde', 1, '#C0C0C0', '#D0D0D0', 0, 3, '#6c6cde', 1);var tabp = getTabProps(elemId, tabwindowid);
registerChildWindow(elemId, createImage(elemId, 'i1', 250, 90, 50, 50, highestDepth, 
 'Madras.png', function () { alert('You clicked Madras.png'); }), tabp.PanelWindowIDs[0]);
registerChildWindow(elemId, createImage(elemId, 'i2', 250, 90, 50, 50, highestDepth, 
 'Bombay.png', function () { alert('You clicked Bombay.png'); }), tabp.PanelWindowIDs[1]);
registerChildWindow(elemId, createImage(elemId, 'i3', 250, 90, 50, 50, highestDepth, 
 'Pune.png', function () { alert('You clicked Pune.png'); }), tabp.PanelWindowIDs[2]);

创建选项卡控件的基本函数调用是:

createTabControl(canvasid, controlNameId, x, y, width, 
 height, depth, tablabels, tablabelcolor, tablabelheight, tablabelfontstring, tablabelgradientstartcolor, 
 tablabelgradientendcolor, panelHasBorder, panelBorderColor, panelHasBackgroundGradient, 
 panelBackgroundStartColor, panelBackgroundEndColor, selectedTabID, gapbetweentabs, 
 selectedtabbordercolor, selectedtabborderlinewidth, tag) 

tablabels是字符串的array,每个标签必须有一个 NAME。 选项卡的数目是 tablabels array的长度,以字符串 List 中指定的顺序表示。 selectedTabID是开始选项卡的tablabels array的索引。

在这个例子中,首先要做的是将选项卡控件的窗口ID保存在一个名为tabwindowid的变量中。 然后使用getTabProps获取选项卡的所有属性。 然后对于要添加到特定选项卡的每个控件,你调用 registerChildWindow。 如果你使用 tablabels array 选项卡索引,则该窗口的窗口ID将显示在你接收到的选项卡属性的PanelWindowIDs属性中。 因为每个选项卡控件区域是一个面板,该面板通过在单击标签标签 header 时更改它的隐藏状态来维护该选项卡。 在示例中,你可以检查只有在单击时显示该特定选项卡的图像。

下面是该示例的屏幕截图:

图像映射控件:

要将图像映射控件添加到画布中,可以在画布元素后面的web页面中使用以下的JavaScript元素调用:

createImageMapControl(elemId, 'im1', 250, 200, 200, 150, highestDepth, 'indiamap.gif', 
 [[134, 261, 10, '#00FF00'], [219, 291, 7, '#FF0000'], [248, 361, 10, '#0000FF']], 
 function (c, w, i) { alert("You clicked on" + (i == 0? 
 "Mumbai" : (i == 1? "Hyderabad" : "Chennai"))); }, 1, 90, 240, 1, 0.1); 

创建图像映射控件的基本函数调用是:

createImageMapControl(canvasid, controlNameId, x, y, width, 
 height, depth, imgurl, pinxys, pinClickFunction, hasZoom, imagetopleftxoffset, 
 imagetopleftyoffset, scale, scaleincrementfactor, tag) 

当然,首先是提供一个url来加载图像。 在这种情况下,我使用了一个印度地图,因为我可以使用任何图像。 pinxys是一个 array,其中 array的每个元素都是 [x, y, radius, color]。 x 和y 是图像左上角的左上角,1. 你可以使用Gimp或者任何图像处理软件来查找图像中的x,y 像素坐标,以便为每个要插入的点提供坐标。 半径当然是在图像的x,y 坐标上绘制的针的半径。 当用户单击pin并提供标准画布id和窗口id以及 pinxys array 中的索引i 时,就会调用 pinClickFunction。 在示例中,我只是简单地说明了你点击的那个城市的NAME。 如果 hasZoom 是 1,那么你就可以用鼠标滚轮来放大和缩小。 这将与任何浏览器,如 Google Chrome,支持 onmousewheel 事件,这是我使用的。 在启动时,imagetopleftxoffsetimagetopleftyoffset 是图像中开始显示图像部分的点。 再次遵循pinxys坐标的规则。 如果缩放太小,你希望在图像中启动缩放,或者在图像中打开窗口,这样就不会在图像上显示部分图像,而不会关闭图像。 scaleincrementfactor 是用鼠标滚轮移动多少,因这里在示例中选择 0.1,因为我的图像不太大。

下面是该示例的屏幕截图:

菜单栏控件:

要向画布添加菜单栏控件,你需要在画布元素之后执行以下JavaScript调用,在画布元素上绘制菜单栏控件,如下所示:

createMenuBarControl(elemId, 'mb1', 0, 0, 800, 20, highestDepth, [['File', '#000000', 10, 
 '10pt Ariel', 0, null, [['Save', '#000000', 10, '10pt Ariel', 0, 
 function () { alert('You choose Save from the menu.'); }, 
 null], ['Save As', '#000000', 10, '10pt Ariel', 0, 
 function () { alert('You choose Sava As from the menu'); }, 
 null], ['Options', '#000000', 10, '10pt Ariel', 0, null, 
 [['Advanced', '#000000', 10, '10pt Ariel', 0, 
 function () { alert('You choose Advanced from the menu'); }, 
 null], ['Configuration', '#000000', 10, '10pt Ariel', 0, 
 function () { alert('You choose Configuration from the menu'); }, 
 null]]]]], ['Help', '#000000', 10, '10pt Ariel', 0, 
 function () { alert('You choose Help from the menu'); }, null]], 
 '#bec7ff', '#848ec9', '#515eac', '#e3e7ff', '#c5cdff', 0); 

创建菜单栏控件的基本函数调用是:

createMenuBarControl(canvasid, controlNameId, x, y, width, height, 
 depth, data, barcolorstart, barcolormiddle, barcolorend, 
 dropdowncolorstart, dropdowncolorend, orientation, tag) 

由于菜单文本中的每个项都可以配置为任何字体和大小规范,所以数据格式很复杂。 菜单的第一个元素是 array,它的第一个元素是要在菜单中显示的文本标签。 第二个元素是文本的颜色。 第三个元素是文本的高度。 第四个元素是字体规范。 第五个元素始终将它设置为 0,因为代码内部使用的是菜单项的子菜单。 第五个元素是当用户单击菜单项时调用的函数。 和 final 元素是与这里定义的相同菜单项元素数组的array。 如果项没有子菜单项的子菜单,则将这里第六个参数设置为 null。 orientation参数还没有实现,但在实现时允许底部和侧边上的菜单栏。

下面显示了一个带有子菜单项的示例菜单栏的屏幕截图:

TextBox控件:

要将textbox控件添加到画布中,可以从web页面以下的JavaScript元素在画布元素之后进行调用:

createTextBox(elemId, 'textbox1', 400, 10, 300, 60, highestDepth, 'Type your name here', 
 '#F0F0F0', 18, '18pt Ariel', '#051329', 18, '18pt Ariel', 50, '[a-Z]+', 0, null, 1, '#2e3642', 1, 0, 
 '#000000', 3, 3, 20, 1, 10, 1, '#9bacc6', '#d6e4f9', 
 0, null, 0, null, 0, 0, 0, null, '', '#0d2952', '#0000F0', 1); 

创建textbox控件的基本函数调用是:

createTextBox(canvasid, controlNameId, x, y, width, height, depth, 
 waterMarkText, waterMarkTextColor, waterMarkTextHeight, waterMarkTextFontString, textColor, 
 textHeight, textFontString, maxChars, allowedCharsRegEx, isPassword, passwordChar, hasBorder, 
 borderColor, borderLineWidth, hasShadow, shadowColor, shadowOffsetX, shadowOffsetY, shadowBlurValue, 
 hasRoundedEdges, edgeRadius, hasBgGradient, bgGradientStartColor, bgGradientEndColor, hasBgImage, 
 bgImageUrl, hasAutoComplete, listPossibles, dropDownPossiblesListIfThereIsInputText, limitToListPossibles, 
 listPossiblesTextHeight, listPossiblesTextFontString, initialText, 
 caretColor, textSelectionBgColor, hasFocusInitially) 

水印属性定义文本框在空时的外观,它将显示水印消息。 文本属性是关于如何将用户键入的文本绘制到文本框中的信息。 maxChars限制你可以输入的字符数。 allowedCharsRegEx 是一个正则表达式,它的中任何用户类型都将被字符检查。 如果字符无效,则不会影响文本的值。 如果应该隐藏文本和要使用的字母,则为密码属性。 边框属性用于在文本框周围绘制边框。 阴影现在不能工作,但是要为控件设置一个下拉阴影。 边缘属性定义文本框是否有圆角。 渐变属性定义是否要为文本框的background 设置渐变。 你可以使用图像属性将图像插入到文本框的background 中。 自动完成参数限制用户只从给定字符串的array 类型中选择文本值。 可以为 initialText 提供一些文本,最初显示为用户键入的文本。 caretColor 是用来绘制插入符号的颜色。 selectionColor 用于绘制所选内容的background。 如果希望这里文本框在窗体上具有焦点,请最初将 hasFocusInitially 设置为 1.

没有用户输入的示例文本屏幕截图:

用 NAME 键入文本框的示例屏幕截图:

图像调节器控制:

要将图像调整器控件添加到画布中,可以在画布元素后面的web页面之后调用以下JavaScript调用:

createImageFader(elemId, 'MoviePosters', 500, 200, 135, 200, highestDepth, ['fantastic_four.jpg', 
 'IncredibleHulk.jpg', 'Thor.jpg', 'xmen_first_class.jpg'], 0, 1, 0.01, 100, function (canvasid, windowid, e, i) 
 { var imageFaderProps = getImageFaderProps(canvasid, windowid); alert(imageFaderProps.ImageURLs[i]); }, 1); 

创建图像调节器控件的基本函数调用是:

createImageFader(canvasid, controlNameId, x, y, width, height, depth, 
 imageURLs, fadeStartValue, fadeEndValue, fadeStepValue, holdForTicks, clickFunction, overlayimages) 

imageURLs是要显示的图像的array的。 fadeStart 值是在 0和 1之间的alpha数,它决定了在显示下一个图像之前将图像淡出的程度。 fadeEndValue在 0和 1之间再次出现,这是图像将显示的最大或者 final alpha值。 fadeStepValue 是如何增加的,它基本上决定了图像 换句话说,的淡入速度速度和慢度。 holdForTicks是图片在最大alpha中显示的刻度绘制调用的数目,在我的示例中是完全不透明 1. 如果你的图片已经被点击,你可以使用当前的图片,点击这里的图片,然后点击图片的索引,这样你就可以做任何事情了。 如果你希望前一个图像平滑淡出当前或者下一个图像,则overlayimages为 1.

图像 slider 控件:

要在画布中添加图像 slider 控件,你需要在画布元素之后执行以下JavaScript调用,你要在画布元素上绘制图像 slider 控件:

createImageSlider(elemId, 'MoviePosters2', 500, 500, 135, 200, highestDepth, 
 ['fantastic_four.jpg', 'IncredibleHulk.jpg', 'Thor.jpg', 'xmen_first_class.jpg'], 
 1, -1, 100, function (canvasid, windowid, e, idx) { alert(idx.toString()); }); 

创建图像调节器控件的基本函数调用是:

createImageSlider(canvasid, controlNameId, x, y, 
 width, height, depth, imageURLs, direction, stepIncrement, holdForTicks, clickFunction) 

imageURLs是要显示的图像的array的。 direction 为 1或者 0. 如果它是 1,那么如果它是 0,它将垂直滑动图像,它将垂直滑动图像。 如果 stepIncrement 为正,direction 为 1,则它将滑动 rightways,如果为负,则滑动 leftways。 如果 stepIncrement 为正,direction 为 0,则它将向下滑动到顶部,如果负数位于底部。 holdForTicks 是在图像再次滑动之前保持图像的刻度数。 在示例 clickFunction 中显示一条警告消息,该消息的索引为 imageURLs array 中的索引。

边界可以填充地图控件:

要将边界可以填充的映射控件添加到画布中,可以从web页面以下的JavaScript元素调用:

createBoundaryFillableMap(elemId, 'bfm1', 10, 420, 500, 389, highestDepth, [[95, 155, 
 40, 130, 160, 185, 255, 255, 255, 255, 0, 0, 255, 255], [338, 180, 320, 160, 360, 
 205, 255, 255, 255, 255, 0, 255, 0, 255]], 'WorldMap.png', 500, 389); 

创建图像调节器控件的基本函数调用是:

createBoundaryFillableMap(canvasid, controlNameId, x, y, width, 
 height, depth, fillpoints, imgurl, imgwidth, imgheight) 

fillpoints是数组的array。 每个 array 都有第一个 2元素的格式,即地图上的x,y 坐标,开始填充。 元素是边界框左上角的x。y 坐标坐标,当然,后面的元素是边界框右下角的x y 坐标。 元素是 RGBA in original color original values,当然的4元素是RGBA的颜色,以取代它。 图像 WorldMap.png 是一个带有边框的轮廓图形,而我的图像则是白色 background。 当然,如果你选择将填充算法与任何控件合并,则填充算法可以在一个函数中使用。 由于已经有一个可以伸缩的地图控制,如果你阅读代码,那么我没有让这个地图控制。

If do部分填充then元素 has 3元素,第一个元素是方向,如果 0水平填充,则元素的最小长度是x,最大为 fill。 因为我给你完全控制你必须知道你在图像中的点,或者它将导致未知的结果。 如果方向为 1,则下一个元素为y 最小值,之后为y 最大值。 基本上,为局部填充提供的起点应该在边界x 最小值和x 最大或者最大值或者y 最大值之间。

以下示例是如何以蓝色的方式从左到右从左到右填充:

createBoundaryFillableMap(elemId, 'bfm1', 800, 400, 500, 389, highestDepth, 
 [[95, 155, 40, 130, 160, 185, 255, 255, 255, 255, 0, 0, 255, 255, 0, 40, 100], 
 [338, 180, 320, 160, 360, 205, 255, 255, 255, 255, 0, 255, 0, 255]], 
 'WorldMap.png', 500, 389); 

下面是生成的图像示例:

以下示例是如何以蓝色的方式从右向左填充美国:

createBoundaryFillableMap(elemId, 'bfm1', 800, 800, 500, 389, highestDepth, 
 [[95, 155, 40, 130, 160, 185, 255, 255, 255, 255, 0, 0, 255, 255, 0, 100, 160], 
 [338, 180, 320, 160, 360, 205, 255, 255, 255, 255, 0, 255, 0, 255]], 'WorldMap.png', 500, 389); 

下面是生成的图像示例:

多行标签控制:

要将多行标签控件添加到画布中,可以在画布元素后面的web页面上调用以下JavaScript元素:

createMultiLineLabel(elemId, 'mll1', 250, 400, 200, highestDepth, 0, 
 'This is a very long sentance to test word wrap. My name is nAkshay Srinivasann and ' + 
 'this is a multi line label control demo. It is a control that is one of the many controls ' + 
 'in Canvas Control Library which is a system of building web pages that has been made ' + 
 'possible by the new HTML5 element called canvas.', '#000000', 12, '12pt Ariel', 5, 1);
createMultiLineLabel(elemId, 'mll1', 250, 800, 200, highestDepth, 1, 
 '<NT>This is a </NT><N><C>#FF0000</C><F>16pt ' + 
 'Ariel</F><T>very long</T></N><NT> sentance to test word wrap. ' + 
 ' My name is </NT><N><C>#00FF00</C><F>bold italic 14pt Tahoma<' + 
 '/F><T>nAkshay Srinivasann</T></N><NT> and this is a multi line label ' + 
 'control demo. It is a control that is one of the many controls in Canvas Control Library which' + 
 ' is a system of building web pages that has been made possible by the new </NT><N>' + 
 '<C>#0000FF</C><F>10pt Ariel</F><T>HTML5</T></N><NT>' + 
 ' element called canvas.</NT>', '#000000', 16, '12pt Ariel', 5, 1); 

创建多行标签控件的基本函数调用是:

createMultiLineLabel(canvasid, controlNameId, x, y, width, 
 depth, hasMarkup, text, textColor, textHeight, textFontString, lineSpacingInPixels, wordSensitive) 

这里控件自动确定高度,因此这是你不指定高度的少数控件之一。 设置为 0的hasMarkup则将文本参数呈现为。 如果设置为 1,则将假定文本参数中有标记,这是一组可以在第二个示例中看到的标记:

  • <NT> - 这是正常文本,这意味着它将使用提供给函数调用的参数的文本颜色。高度和字体。
  • <N> 这意味着这是特殊格式的文本,它有一些标记,用于指定文本格式:
    • <C> - 这是文本的颜色
    • <F> - 这是字体字符串
    • < T> - 这是实际的文本字符串
  • 也可以指定换行符,在文本字符串中可以使用n。

lineSpacingInPixels 是要添加的行之间的间隙。 如果 wordSensitive 参数设置为 1,则不能在线的末尾放置一个词,并在该线上查找空格。 如果设置为 0,则单词将在没有虚线的新行中换行。

这里控件允许你现在就可以像文本一样,不用常规的HTML5文本,以便在系统中保留。

纯文本( 未标记)的屏幕截图如下:

带不同字体度量和颜色的文本标记文本的屏幕截图:

字处理器控制:

要将word处理器控件添加到画布中,可以从web页面以下的JavaScript元素在画布元素之后调用:

createWordProcessor(elemId, 'Wp1', 800, 400, 400, 224, highestDepth, 0, '', 
 '#051329', 12, '12pt Ariel', 5, 1, 'Type a paragraph here.', '#F0F0F0', 14, '14pt Ariel', 
 2000, 0, '#000000', 1, 1, 1, 10, 1, '#9bacc6', 
 '#d6e4f9', 0, null, 10, 1, '#2e3642', 1, '.+', '#0d2952'); 

创建字处理器控件的基本函数调用是:

createWordProcessor(canvasid, controlNameId, x, y, width, height, 
 depth, hasMarkup, text, textColor, textHeight, textFontString, 
 lineSpacingInPixels, wordSensitive, 
 waterMarkText, waterMarkTextColor, waterMarkTextHeight, 
 waterMarkTextFontString, maxChars, hasShadow, 
 shadowColor, shadowOffsetX, shadowOffsetY, hasRoundedEdges, edgeRadius, hasBgGradient, 
 bgGradientStartColor, bgGradientEndColor, hasBgImage, bgImageUrl, margin, hasBorder, 
 borderColor, borderLineWidth, allowedCharsRegEx, caretColor) 

字处理器控件实质上是多行文本框。 现在标记的文本不可以用,因这里 hasMarkup 必须为 0才能使标记代码正常工作。 所以它是由,定义的纯文本,提供的textFontString度量。 与文本框控件非常类似,但它是多行而不是单行。 在本例中,通过将 allowedCharsRegEx 设置为。+ 来允许任何字符。 其中一个限制是字处理器/多行文本框的高度必须是最佳的表示结果乘以两倍的文本加上文本高度加上行间距加上行间距加上像素。

文字处理程序控制空白( 无用户输入) 与水印文本显示的屏幕截图:

带有一段用户输入文本的文字处理程序屏幕截图:

虚拟键盘控制:

要将虚拟键盘控件添加到画布中,可以从web页面以下的JavaScript元素在画布元素之后调用:

createVirtualKeyboard(elemId, 'vkb1', 500, 600, 360, 180, highestDepth, null, 
 function (c, w, l) { alert(l); }, 5, 5, 1, 12, '12pt Ariel'); 

创建虚拟键盘控件的基本函数调用是:

createVirtualKeyboard(canvasid, controlNameId, x, y, 
 width, height, depth, keys, keypressFunc, gapbetweenbuttons, gapbetweenrows, hasgloss, 
 textheight, textfontstring, customDrawLetterFunc) 

虚拟键盘控件有 array 键,它定义键盘将为你设置的键。 密钥被定义为一个 array,它的中字母为第一个元素,密钥高度和另一个键盘的索引。 键盘 array 是一个行的array,它保存前面定义的键数组。 键 array 是 finally 数组的array。 这样你就可以在键盘 array 上索引,以便拥有 switch 键盘的特殊键。 我建议你在以null为单位的示例中为你提供默认键盘。 这个例子定义了一个简单的按键函数,它提醒在虚拟键盘上按下的键的字母。

虚拟键盘的屏幕截图如下所示:

按下'12 #'按钮后的虚拟键盘截图被按下,它的中的索引为虚拟键盘的另一个布局,如下所示:

另外,如果浏览器在Android或者 iPhone/iPad/iPod 上,则检查文本处理器和word处理器控件,并将相应显示。 然而,当使用这种方法作为对旧设备的响应,甚至是 HTC is Android手机时,仍然要注意。 也许在更强大的设备上,比如 Samsung Galaxy S3和 iPhone 5,也许可以。 但我没有访问或者购买这些平台的方法,因这里有一些来自幸运的智能手机和平板电脑的反馈。 我认为这些移动设备浏览器中的Javascript引擎不够快,或者处理器无法处理移动浏览器中的另一层。

新的窗口绘图系统有很大的响应,or Android手机现在可以使用了。

拆分控制:

在画布中添加拆分控件后,你需要在画布元素之后执行以下JavaScript调用,你将在画布元素上绘制拆分器控件。 :

var panelwindowid = createPanel(elemId, 'p1', 0, 0, 
 200, 200, highestDepth, 1, '#c8c8c8', 1, '#d1ddff', '#a7afc6');
registerChildWindow(elemId, createProgressBar(elemId, 'pg1', 10, 100, 
 200, 20, highestDepth, '#33ec25', 100, 0, 60), panelwindowid);
registerChildWindow(elemId, createSlider(elemId, 's1', 10, 150, 200, 
 20, highestDepth, 10, 100, 0, 50), panelwindowid);var panelwindowid2 = createPanel(elemId, 'p2', 204, 0, 200, 200, 
 highestDepth, 1, '#c8c8c8', 1, '#d1ddff', '#a7afc6',
 1, 150, 0, 'Test Panel', '#000000', 12, '12pt Ariel', 
 '#cfcfcf', '#ababab', 20, '#495be5', 1, 7);
registerChildWindow(elemId, createProgressBar(elemId, 'pg2', 210, 10, 
 200, 20, highestDepth, '#33ec25', 100, 0, 60), panelwindowid2);
registerChildWindow(elemId, createSlider(elemId, 's2', 210, 100, 200, 
 20, highestDepth, 10, 100, 0, 50), panelwindowid2);
createSplitter(elemId, 'spl1', 201, 0, 3, 200, highestDepth, '#D0D0D0');

创建拆分器的基本函数调用是:

function createSplitter(canvasid, controlNameId, x, y, width, height, depth, linecolor) 

拆分器是位于 Windows 水平或者垂直之间的线条。 如果宽度为 GREATER 而不是高度,则表示它是水平对齐的拆分器。 拆分器将做什么,它会找出 Windows的2像素内的内容,并调整它们的宽度或者原点。

简单的XML查看器控制插件:

要将一个简单的XML查看器控件添加到画布中,可以从web页面以下的JavaScript元素调用。 :

createSimpleXMLViewer(elemId, 'sxmlvr1', 10, 500, 200, 250, highestDepth, 
 '<root><Databases><Employees><Tables><Employee><Column 
 ColumnName="id">1</Column><Column 
 ColumnName="FirstName">Akshay</Column><Column 
 ColumnName="MiddleName"></Column><Column 
 ColumnName="LastName">Srinivasan</Column><Column 
 ColumnName="EmpId">42312345672892</Column></Employee>
 </Tables></Employees></Databases></root>', 
 '#000000', '12pt Ariel', 12, null, null, 1, 16, 16, 'Node.png', 
 'Value.png', 'Attribute.png');

创建简单的XML查看器的基本函数调用是:

function createSimpleXMLViewer(canvasid, controlNameId, x, y, width, height, 
 depth, xml, textcolor, textfontstring, textheight, clickNodeFunction, 
 tag, hasicons, iconwidth, iconheight, imgURLNode, imgURLValue, imgURLAttribute) 

基于 Treeview的简单XML查看器控件使用控件接受用户提供的某些XML并作为树提供。 在下载的过程中有一个例子。 XML必须以 <root> 标记开始,并以 </root> 标记结束,基本上形成了 XML,它在javascript中所支持的XML是所有它所支持的。

下面是代码示例的屏幕截图:

投票控制:

在画布中添加投票控件后,你将在画布元素之后执行以下JavaScript调用,你要在画布元素上绘制投票控件,如下所示 :

createVotingControl(elemId, 'vc1', 450, 150, 300, 30, highestDepth, 
 5, 10, 59, 172, 53, 255, 0, 5, 1, 0, 1, 180, 21, '#000000', '12pt Ariel', 
 12, 0, 0, 6.7, 1, 0, 0, 1, 'duckoutline.png', [15, 13, 0, 0, 30, 26, 255, 
 255, 255, 255, 59, 172, 53, 255], 30, 26, 0, 255, 255, 255, 255);
createVotingControl(elemId, 'vc2', 450, 200, 300, 30, 
 highestDepth, 5, 5, 213, 210, 0, 255, 30, 5, 1, 1, 1, 180, 21, '#000000', 
 '12pt Ariel', 12, 0, 0, 3.5, 1, 0, 0, 0, null, null, 30, 30, 0, 0, 0, 0, 0, 
 function (canvasid, windowid, votingProps, clickx, clicky, value) { 
 votingProps.InitialValue = value; invalidateRect(canvasid, null, 
 votingProps.X, votingProps.Y, votingProps.Width, votingProps.Height); }); 
createVotingControl(elemId, 'vc3', 450, 250, 300, 30, highestDepth, 5, 5, 59, 172, 53, 255, 0, 5, 1, 1, 1, 180, 21, '#000000', '12pt Ariel', 12, 0, 0, 0.5, 1, 0, 0, 1, 'staroutline.png', [8, 8, 0, 0, 30, 26, 255, 255, 255, 255, 59, 172, 53, 255], 17, 17, 0, 255, 255, 255, 255, function (canvasid, windowid, votingProps, clickx, clicky, value) { votingProps.InitialValue = value; invalidateRect(canvasid, null, votingProps.X, votingProps.Y, votingProps.Width, votingProps.Height); }, 1);
注意在新系统中,必须使用以下调用调用 invalidateRect:
invalidateRect(canvasid, -1, votingProps.X, votingProps.Y, votingProps.Width, votingProps.Height);
创建投票控件的基本函数调用是:
function createVotingControl(canvasid, controlNameId, x, y, width, 
 height, depth, numstars, maxvalueofallstars, starcolorred, starcolorgreen, 
 starcolorblue, starcoloralpha, starsizeinpixels, spacinginpixelsbetweenstars, 
 haspartialstars, editable, hasvaluelabel, labelxpos, labelypos, labeltextcolor, 
 labeltextfontstring, labeltextheight, starsstartingposoffsetwhenlabel, 
 starsyposwhenlabel, initialvalue, outlinethicknessofemptystar, starsorientation, 
 fillorientation, iscustompattern, outlineimgurl, customfillpoint, imgwidth, 
 imgheight, hasmouseoverlabel, staroutlinebgcolorred, staroutlinebgcolorgreen, 
 staroutlinebgcolorblue, staroutlinebgcoloralpha, customclickfunction, 
 rounddisplayedvaluetonumofdecimals) 

参数numstars是要显示的形状数。 如果所有恒星的总值值为 Maxvalueofallstars,则为。 然后用于填充图形/星星的颜色。 如果你使用标准星,那么星星的宽度和高度在默认情况下是相同的。 然后提供绘制的形状/星星之间的间距。 如果是部分填充一个分数值,那么这将是 1,如果不是 0. 关于部分复杂形状填充的一个要注意的是,当水平填充图像中心应该完全在标准星形中。 我使用的是更合适的方法是,图形艺术家沿着中间水平的方向提升一只鸭子。 可以编辑基本意味着点击时可以点击和值改变。 接下来的参数定义了将是'所有恒星最大值的值'的标签。 如果要偏移绘制恒星的起始位置,请为该参数提供除 0以外的其他内容。 Initialvalue仅仅是用来填充恒星/复杂形状的值。 如果你想要一个较厚的空心星轮廓线,那么提供一些 GREATER 比 1. Starorientation是如何绘制星星 0意味着水平 1表示垂直。 Fillorientation是如何垂直填充星形 0垂直 1. Iscustompattern表示你要提供一个像我鸭子例子一样轮廓形状的图像。 Customfillpoint是在BoundaryFillableMap中定义的,所以请参考如何构造 array。 基本上你提供了一个空形状内的点来填充你的复杂形状。 然后是图像的宽度和高度。 然后,background 颜色的rgb值。 如果要在自定义单击函数中单击传递来进行自定义操作,请执行下列操作:。 那么如果有标签的话,显示的值有多少个小数。

按上面的顺序显示 上面 示例的屏幕截图:

基于的窗口绘图系统在移动设备上

绘制 Windows的新系统不是在画布上绘制所有 Windows,而是使用函数invalidateRect来使区域无效。 所有的Windows 都在那个区域里被重新绘制。 这个变化反映在新的动画系统中,而且只有动画窗口才会被重新绘制,你必须立即为registerAnimatedWindow函数调用提供一个 windowid。 这使得代码更加复杂,可以看到 FormsBases.aspx 示例中现在有更复杂的代码逻辑,重新绘制影响的Windows,系统不会知道这些代码已经更改。

带有图片的自定义ComboBox控件的 示例,该控件位于下拉列表中:

以下HTML创建了一个带有图片的ComboBox控件示例,该控件位于下拉区域中:

<canvasid="canvas1"width="500"height="500"tabindex="0"></canvas><scripttype="text/javascript">registerCanvasElementId('canvas1');
createComboBox('canvas1', 'cb1', 10, 10, 150, 20, highestDepth, 
 ['Bombay', 'Pune', 'Madras', 'Delhi'], null, null, drawListAreaCustom, null,
 listAreaCustomClickFunction, '#364635', 10, '10pt Ariel', '#1b213b', 10, '10pt Ariel');
invalidateRect(elemId, null, 0, 0, 500, 500);function drawListAreaCustom(canvasid, windowid) {
 var comboboxProps = getComboboxPropsByListAreaWindowId(canvasid, windowid);
 var vscrollBarProps = getScrollBarProps(canvasid, comboboxProps.VScrollBarWindowID);
 var ctx = getCtx(canvasid);
 ctx.fillStyle = '#FFFFFF';
 ctx.beginPath();
 ctx.rect(comboboxProps.X, comboboxProps.Y + comboboxProps.Height, comboboxProps.Width - 15, 100);
 ctx.fill();
 ctx.fillStyle = comboboxProps.ListAreaTextColor;
 ctx.font = comboboxProps.ListAreaFontString;
 for (var i = vscrollBarProps.SelectedID; i <
 comboboxProps.Data.length && ((comboboxProps.ListAreaTextHeight + 10) *
 (i - vscrollBarProps.SelectedID + 1)) + 4 <100; i++) {
 switch (comboboxProps.Data[i]) {
 case'Bombay':
 drawCustomImage(ctx, comboboxProps.X, comboboxProps.Y + 4 +
 ((comboboxProps.ListAreaTextHeight + 10) * 
 (i - vscrollBarProps.SelectedID + 1)), 16, 16, 'Bombay.png');
 break;
 case'Pune':
 drawCustomImage(ctx, comboboxProps.X, comboboxProps.Y + 4 +
 ((comboboxProps.ListAreaTextHeight + 10) * 
 (i - vscrollBarProps.SelectedID + 1)), 16, 16, 'Pune.png');
 break;
 case'Madras':
 drawCustomImage(ctx, comboboxProps.X, comboboxProps.Y + 4 +
 ((comboboxProps.ListAreaTextHeight + 10) * 
 (i - vscrollBarProps.SelectedID + 1)), 16, 16, 'Madras.png');
 break;
 case'Delhi':
 drawCustomImage(ctx, comboboxProps.X, comboboxProps.Y + 4 +
 ((comboboxProps.ListAreaTextHeight + 10) * 
 (i - vscrollBarProps.SelectedID + 1)), 16, 16, 'Delhi.png');
 break;
 }
 ctx.fillText(comboboxProps.Data[i], comboboxProps.X + 20, comboboxProps.Y + 17 +
 ((comboboxProps.ListAreaTextHeight + 10) * (i - vscrollBarProps.SelectedID + 1)));
 }
 ctx.strokeStyle = '#b7bfc8';
 ctx.beginPath();
 ctx.rect(comboboxProps.X, comboboxProps.Y + 
 comboboxProps.Height, comboboxProps.Width - 15, 100);
 ctx.stroke();
}var preloadedImages = new Array();function drawCustomImage(ctx, x, y, width, height, src) {
 for (var i = 0; i <preloadedImages.length; i++) {
 if (preloadedImages[i].Src == src) {
 ctx.drawImage(preloadedImages[i].Image, x, y);
 return;
 }
 }
 var image = new Image(width, height);
 image.src = src;
 image.onload = function () {
 preloadedImages.push({ Src: src, Image: image });
 ctx.drawImage(image, x, y);
 };
}function listAreaCustomClickFunction(canvasid, windowid, e) {
 var comboboxProps = getComboboxPropsByListAreaWindowId(canvasid, windowid);
 var vscrollBarProps = getScrollBarProps(canvasid, comboboxProps.VScrollBarWindowID);
 var canvas = getCanvas(canvasid);
 var x = e.calcX;
 var y = e.calcY;
 for (var i = vscrollBarProps.SelectedID; i <comboboxProps.Data.length && 
 ((comboboxProps.ListAreaTextHeight + 10) * (i - vscrollBarProps.SelectedID + 1)) <100; i++) {
 if (x> comboboxProps.X && y> comboboxProps.Y + 4 + comboboxProps.Height + 
 ((comboboxProps.ListAreaTextHeight + 10) * (i - vscrollBarProps.SelectedID)) &&
 x <comboboxProps.X + comboboxProps.Width - 15 && y <comboboxProps.Y + 
 comboboxProps.Height + 4 + ((comboboxProps.ListAreaTextHeight + 10) *
 (i - vscrollBarProps.SelectedID + 1))) {
 comboboxProps.SelectedID = i;
 setHiddenWindowStatus(canvasid, comboboxProps.VScrollBarWindowID, 1);
 setHiddenWindowStatus(canvasid, comboboxProps.ListAreaWindowID, 1);
 draw(canvasid);
 return;
 }
 }
}</script>

注意:调用无效的rectangle需要在新系统中传递 -1而不是 null。

使用 /Bombay.png Pune.png,Madras.png,Delhi.png 4. 你可以使用任何具有不同文件名的图像,只要在函数 drawListAreaCustom 中的switch case 语句中更改图像url即可。

下面是 上面 示例的屏幕截图:

如何使用基于新表单的系统:

目前关于如何在服务器上使用表单的概念是,当单击example按钮requires按钮会在服务器端 do regular regular ASP.NET viewstate控件的状态,以及控件的状态。 控件值将被PHP或者 ASP.NET MODULE 打开,并且将调用一个PHP或者aspx服务器端页面和函数来进行更改。 然后将一个全新的网页发送回客户端网页浏览器。

this,当你需要在服务器端执行所有控件状态和值的AJAX调用时,你就可以通过调用 ASP.NET web页面来完成所有控件状态和值的操作。 如果你在示例中提供了对控件值和状态的所有更改,则调用你的C# 函数,并在该示例中更改标签的文本。 所有控件状态和值都包装在XML中,并回到同一页面。 重新绘制用户界面,对在同一网页上反映的控件所做的更改。 客户端从来不会将网页放回到服务器端,转到另一个网页,这是正常的实践。

下面是客户端代码,它是调用aspx页上的服务器端 C# 函数的按钮:

createLabel(elemId, 'l1', 150, 10, 100, 20, 'Label 1', '#000000', 12, '12pt Ariel', null, highestDepth); 
createButton(elemId, 'b3', 30, 74, 250, 40, 
 'Custom Click Function', '#0000FF', 12, '12pt Ariel', 
 2, highestDepth + 1, function (canvasid, windowid) 
 { invokeServerSideFunction('AjaxEx1.aspx', 'ClickMe', 
 elemId, windowid, function () { alert('Did Postback'); }); }, 
 null, '#bee6fd', '#a7d9f5', '#eaf6fd', '#d9f0fc', '#3c7fb1');

服务器端的代码非常简单,如下所示:

publicpartialclass Default2 : System.Web.UI.Page
{
 CanvasControlLibrary ccl;
 protectedvoid Page_Load(object sender, EventArgs e)
 {
 ccl = new CanvasControlLibrary(Request.InputStream);
 ccl.InvokeServerSideFunction(this.Page);
 ccl.SendVars(Response.OutputStream);
 }
 protectedoverridevoid Render(HtmlTextWriter writer)
 {
 }
 publicvoid ClickMe(string canvasid, int windowid)
 {
 CanvasControlLibrary.CCLLabelProps lp = 
 ccl.getControlPropsByControlNameID("l1") as CanvasControlLibrary.CCLLabelProps;
 lp.Text = "Did Postback";
 }
} 

JavaScript函数调用中的标签声明是正常的。 另一方面的按钮调用了一个名为 invokeServerSideFunction的JavaScript函数,它的中所有的幻灯片都会发生。 函数第一个参数是你的服务器端代码所在的网页的NAME。 下面是aspx页上调用服务器端的函数的NAME。 第三个和第四个参数只是在服务器端标识的画布on和窗口 on,控件在客户端引发事件。 第五个是JavaScript函数,你可以在后台完成后调用它,这样你就可以在客户端进行更改。

在页面加载事件的On页上,调用服务器端类,然后在实例化服务器端函数的ClickMe C# 函数之后。 在本例中,一个简单的调用获取label控件并将它的文本值更改为 postback。 然后调用画布控件库服务器端类,将所有更改发送回客户端。

通过单击按钮下载并运行示例时,标签将更改服务器端显示文本标签 1显示为已经执行的操作。 这个例子很简单,但是通过这个系统,你可以创建完全功能的页面。 在需要窗体的情况下,你所做的就是有一个启动面板,其中有你的控件。 当单击按钮并提交所收集的所有信息时,将第二个面板与所显示的窗体保存。 使用这种能力,你可以使用服务器端回发自定义代码构建功能完备的网页,并在新画布控件库中构建任何当前 基于表单 网页。

以下是系统基本概念的图表:

PHP示例:

这里示例已经在Apache和IIS上进行了测试。 这与简单的ClickMe示例相同,但在PHP中而不是 C# ASPX页面处理服务器端 postback:

<?phpinclude 'CanvasControlLibrary.class.php';$parameters = array();$ccl = new CanvasControlLibrary();
$ccl->InvokeServerSideFunction();
$ccl->SendVars($parameters);
function ClickMe($obj, $canvasid, $windowid)
{
 $lp = $obj->getControlPropsByControlNameID("l1");
 $lp->Text = "Did Postback";
}?>

就像 Default.php的Default.aspx 一样,它使用了几乎相同的页面,因为没有PHP或者 C# 代码。 当你单击按钮时,postback 会出现在列出的上面 中。 这里所有的东西都是在PHP类文件中完成的,所以你必须包含它。 你将库作为类对象实例化,并且与服务器端ASPX页相同。 演示中只更改了一个标签。

使用 postback的工作表单示例:

这个例子是一个网页,它使用画布控制库和基于表单的系统为虚构电影院创建一个简单的网页,叫做虚拟影院。 电影院顶部有一个电影剧院公司的标题图片 logo。 有一个菜单栏,它有链接到各种它的他页面,这里时不实现任何它的他页面。 它在印度的四个城市有电影院,位于孟买。德里。班加罗尔和 Chennai。 开始页面的目的是为客户选择那城市的名字,然后在那个城市中选择电影院。 当客户选择多重图像时,显示在剧院播放的所有电影的海报和显示时间。 如果单击显示时间标签,它将突出显示,并添加一个用于支付的textbox控件和按钮。 textbox控件用于票证数量,只接受要在其中键入的数字。 当你填写它并点击支付按钮它就会显示一个服务器端 postback,显示你的戏票,多少电影票,电影名称,以及你已经预订的门票。 下面是客户机端代码:

<scripttype="text/javascript">var elemId = 'canvas';var selecteCinemaWindowID;
registerCanvasElementId(elemId);function cityChanged(canvasid, windowid, index) {
 invokeServerSideFunction('AjaxEx1.aspx', 'onSelectCityChanged', canvasid, windowid, function () { 
 var wprops = getWindowProps(elemId, selecteCinemaWindowID);
 invalidateRect(elemId, null, wprops.X, wprops.Y, wprops.Width, wprops.Height);
 });
}function onSelectCinema(canvasid, windowid, index) {
 invokeServerSideFunction('AjaxEx1.aspx', 
 'onSelectCinemaChanged', canvasid, windowid, showMoviesForCinema);
}function selectMovieTime(canvasid, windowid) {
 var labelProps = getLabelProps(canvasid, windowid);
 var labelWindowProps = getWindowProps(canvasid, windowid);
 labelProps.BackGroundColor = '#899b0d';
 var labelWindowIDS = new Array();
 labelWindowIDS.push(createLabel(elemId, 'numTicketsLabel', 630, 220, 160, 30, 
 'Number of Tickets:', '#131aa3', 16, '16pt Ariel', null, highestDepth));
 labelWindowIDS.push(createTextBox(elemId, 'numTicketsTextBox', 800, 220, 50, 30, highestDepth, 'No.', 
 '#F0F0F0', 12, '12pt Ariel', '#051329', 12, '12pt Ariel', 2, '[0-9]', 0, null, 1, '#2e3642',
 1, 0, '#000000', 3, 3, 20, 1, 10, 1, '#9bacc6', '#d6e4f9', 0, null, 0, null, 
 0, 0, '#D0D000', 12, '12pt Ariel', '', '#0d2952', 'rgba(0, 0, 240, 0.2)', 1));
 labelWindowIDS.push(createButton(elemId, 'PaymentButton', 875, 220, 100, 30, 
 'Book Tickets', '#0000FF', 12, '12pt Ariel', 2, highestDepth + 1, 1, 1,
 function (canvasid, windowid) {
 invokeServerSideFunction('AjaxEx1.aspx', 'DoPaymentForTickets', elemId, windowid, afterPayment);
 }, null, '#bee6fd', '#a7d9f5', '#eaf6fd', '#d9f0fc', '#3c7fb1', labelWindowProps.ControlNameID));
 for (var i = 0; i <controlNameIDs.length; i++) {
 var window = getWindowByControlNameID(controlNameIDs[i]);
 if (window.ControlType == 'Label' && window.WindowCount!= windowid) {
 var labelProps2 = getLabelProps(canvasid, window.WindowCount);
 labelProps2.BackGroundColor = null;
 labelWindowIDS.push(window.WindowCount);
 }
 }
 for (var i = 0; i <labelWindowIDS.length; i++) {
 var wprops = getWindowProps(elemId, labelWindowIDS[i]);
 invalidateRect(elemId, null, wprops.X, wprops.Y, wprops.Width, wprops.Height);
 }
}function afterPayment(params) {
 suspendDraw = 1;
 for (var i = 0; i <controlNameIDs.length; i++) {
 destroyControlByNameID(controlNameIDs[i]);
 }
 controlNameIDs = new Array();
 destroyControlByNameID('numTicketsLabel');
 destroyControlByNameID('numTicketsTextBox');
 destroyControlByNameID('PaymentButton');
 destroyControlByNameID('label1');
 destroyControlByNameID('label2');
 destroyControlByNameID('selectCityComboBoxComboBoxTextArea');
 destroyControlByNameID('selectCinemaComboBoxComboBoxTextArea');
 suspendDraw = 0;
 createLabel(elemId, 'PaymentMessageLabel', 10, 220, 1024, 30, params[0], 
 '#131aa3', 16, '16pt Ariel', null, highestDepth);
 invalidateRect(elemId, null, 0, 0, 1024, 768);
}var controlNameIDs = new Array();function showMoviesForCinema(params) {
 suspendDraw = 1;
 for (var i = 0; i <controlNameIDs.length; i++) {
 destroyControlByNameID(controlNameIDs[i]);
 }
 controlNameIDs = new Array();
 suspendDraw = 0;
 var xoffset = 0;
 var labelWindowIDS = new Array();
 for (var i = 0; i <params.length; i++) {
 var windowid = createImage(elemId, 'Poster' + i.toString(), 10 + 
 xoffset, 300, 266, 200, highestDepth, params[i][0]);
 controlNameIDs.push('Poster' + i.toString());
 var timesoffset = 0;
 for (var j = 1; j <params[i].length; j++) {
 labelWindowIDS.push(createLabel(elemId, 'MovieTimeLabel' + j.toString() + 'Poster' + 
 i.toString(), 10 + xoffset + timesoffset, 510, 50, 20, params[i][j], '#cdc833', 
 12, '12pt Ariel', null, highestDepth, null, selectMovieTime, null, 1));
 controlNameIDs.push('MovieTimeLabel' + j.toString() + 'Poster' + i.toString());
 timesoffset += 70;
 }
 xoffset += 296;
 }
 for (var i = 0; i <labelWindowIDS.length; i++) {
 var wprops = getWindowProps(elemId, labelWindowIDS[i]);
 invalidateRect(elemId, null, wprops.X, wprops.Y, wprops.Width, wprops.Height);
 }
}function form1() {
 createImage(elemId, 'imgTitle', 312, 10, 400, 100, highestDepth + 1, 'Title.png');
 createMenuBarControl(elemId, 'menuBar1', 0, 120, 1024, 60, highestDepth, [['HOME', '#000000', 20, 
 '20pt Ariel', 0, null, null], ['TICKETS', '#000000', 20, '20pt Ariel', 0, null, null],
 ['MOVIES', '#000000', 20, '20pt Ariel', 0, null, null], ['CINEMAS', '#000000', 20, '20pt Ariel', 
 0, null, null], ['TRAILERS', '#000000', 20, '20pt Ariel', 0, null, null],
 ['CONTACT US', '#000000', 20, '20pt Ariel', 0, null, null]], 
 '#fdf2c0', '#f0cc75', '#d99839', '#e3e7ff', '#c5cdff', 0);
 createLabel(elemId, 'label1', 10, 220, 50, 30, 'City', 
 '#131aa3', 16, '16pt Ariel', null, highestDepth);
 createComboBox(elemId, 'selectCityComboBox', 75, 220, 200, 30, highestDepth, ['Cities'], null, 
 null, null, null, null, '#131aa3', 16, '16pt Ariel', 
 '#131aa3', 16, '16pt Ariel', cityChanged);
 createLabel(elemId, 'label2', 300, 220, 120, 30, 
 'Multiplex', '#131aa3', 16, '16pt Ariel', null, highestDepth);
 selecteCinemaWindowID = createComboBox(elemId, 
 'selectCinemaComboBox', 400, 220, 200, 30, highestDepth, 
 ['Select a city first'], null, null, null, null, null, '#131aa3', 16, '16pt Ariel', 
 '#131aa3', 16, '16pt Ariel', onSelectCinema);
 return selecteCinemaWindowID;
}var windowid = form1();
invokeServerSideFunction('AjaxEx1.aspx', 'InitializeForm1', elemId, windowid, null);
invalidateRect(elemId, null, 0, 0, 1024, 768);</script>

注意:invalidateRect调用需要用 -1调用,而不是在新系统中调用 null。

这里发生的事情是画布元素声明的第一件事。 然后调用 registerCanvasElementId 函数调用JavaScript来初始化画布控制库系统。 下面是一个方便的表单创建函数 form1 form1 declared为城市和选定城市的影院创建一个图像。菜单栏和 2 ComboBox控件。 函数将返回其中一个控件的任何有效的windowid。 将调用 form1,并且实例化所有控件。 然后调用 invokeServerSideFunction JavaScript函数,通过AJAX调用调用服务器端 AjaxEx1.aspx 页面,并在 ASP.NET 页面上调用 C# 函数 InitializeForm1. JavaScript函数 cityChanged 声明了在页面 AjaxEx1.aspx 上调用另一个服务器端函数( 称为 onSelectCityChanged )。 当用户选择多路复用时,对 onSelectCinemaChanged 进行一个服务器端调用,以及显示时间信息的array。 这个 array 然后被传递给客户端JavaScript函数 showMoviesForCinema。 第一件事是销毁任何旧的控制,显示电影海报,并显示最后一次选择时的时间。 然后我们继续创建图像控件来显示第一个电影海报,然后为每个显示时间标签,并遍历参数 array。 我们通过 finally 打电话来显示新的控件。

下面是服务器端页面 AjaxEx1.aspx的代码:

/* Canvas Control Library Copyright 2012
 Created by Akshay Srinivasan [akshay.srin@gmail.com]
 This javascript code is provided as is with no warranty implied.
 Akshay Srinivasan are not liable or responsible for any consequence of 
 using this code in your applications.
 You are free to use it and/or change it for both commercial and non-commercial
 applications as long as you give credit to Akshay Srinivasan the creator 
 of this code.
*/using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Text;using System.IO.Compression;using System.IO;using System.Text.RegularExpressions;using System.Xml;using System.Reflection;using System.Collections;publicpartialclass Default2 : System.Web.UI.Page
{
 CanvasControlLibrary ccl;
 ArrayList parameters = new ArrayList();
 ArrayList movieIndexes = new ArrayList();
 protectedvoid Page_Load(object sender, EventArgs e)
 {
 movieIndexes = new ArrayList { new ArrayList { "Phoenix Mills", 
 new ArrayList { "Fantastic Four", "Ferris Bueller's Day Off", 
 "Incredible Hulk" } }, new ArrayList { "Juhu", new ArrayList { "Iron Man", 
 "Point Break", "Spider Man 2" } }, new ArrayList {"Nariman Point", 
 new ArrayList{"Spider Man 4", "Spider Man 3", "The Avengers"}}, 
 new ArrayList{"Chitrapur", 
 new ArrayList{"Thor", "Wolverine", "X-Men First Class"}}, 
 new ArrayList{"Khari Baoli", 
 new ArrayList{"GI Joe Rise of Cobra", "The Avengers", 
 "Wolverine"}}, new ArrayList{"Lakshmi Garden", 
 new ArrayList{"Thor", "Point Break", "Iron Man"}}, 
 new ArrayList{"Gandhi Nagar", new ArrayList{"Spider Man 2", 
 "Incredible Hulk", "GI Joe Rise of Cobra"}}, new ArrayList{"Lake City", 
 new ArrayList{"The Avengers", "X-Men First Class", "Iron Man"}}, 
 new ArrayList{"Rajaji Nagar", 
 new ArrayList{"Fantastic Four", "Wolverine", "Thor"}}, 
 new ArrayList{"Harrington Road", 
 new ArrayList{"The Avengers", "X-Men First Class", "Iron Man"}}, 
 new ArrayList{"Boat Club", 
 new ArrayList{"GI Joe Rise of Cobra", 
 "Spider Man 3", "Incredible Hulk"}}, 
 new ArrayList{"Chetpet", 
 new ArrayList{"Thor", "Fantastic Four", "The Avengers"}}};
 ccl = new CanvasControlLibrary(Request.InputStream);
 ccl.InvokeServerSideFunction(this.Page);
 ccl.SendVars(Response.OutputStream, parameters);
 }
 protectedoverridevoid Render(HtmlTextWriter writer)
 {
 }
 publicvoid ClickMe(string canvasid, int windowid)
 {
 CanvasControlLibrary.CCLLabelProps lp = 
 ccl.getControlPropsByControlNameID("l1") as CanvasControlLibrary.CCLLabelProps;
 lp.Text = "Did Postback";
 }
 publicvoid InitializeForm1(string canvasid, int windowid)
 {
 CanvasControlLibrary.CCLComboBoxProps selectCityComboBox = 
 ccl.getControlPropsByControlNameID("selectCityComboBoxComboBoxTextArea") 
 as CanvasControlLibrary.CCLComboBoxProps;
 selectCityComboBox.Data = new System.Collections.ArrayList();
 selectCityComboBox.Data.Add("Select a city");
 selectCityComboBox.Data.Add("Mumbai");
 selectCityComboBox.Data.Add("Delhi");
 selectCityComboBox.Data.Add("Bangalore");
 selectCityComboBox.Data.Add("Chennai");
 ((CanvasControlLibrary.CCLScrollBarProps)ccl.getControlPropsByWindowID(canvasid, 
 selectCityComboBox.VScrollBarWindowID)).MaxItems = selectCityComboBox.Data.Count.ToString();
 }
 publicvoid onSelectCityChanged(string canvasid, int windowid)
 {
 CanvasControlLibrary.CCLComboBoxProps selectCityComboBox = 
 ccl.getControlPropsByControlNameID("selectCityComboBoxComboBoxTextArea") 
 as CanvasControlLibrary.CCLComboBoxProps;
 CanvasControlLibrary.CCLComboBoxProps selectCinemaComboBox = ccl.getControlPropsByControlNameID(
 "selectCinemaComboBoxComboBoxTextArea") as CanvasControlLibrary.CCLComboBoxProps;
 selectCinemaComboBox.Data = new System.Collections.ArrayList();
 switch (selectCityComboBox.Data[Convert.ToInt32(selectCityComboBox.SelectedID)].ToString())
 {
 case"Mumbai":
 selectCinemaComboBox.Data.Add("Select a Theater");
 selectCinemaComboBox.Data.Add("Juhu");
 selectCinemaComboBox.Data.Add("Phoenix Mills");
 selectCinemaComboBox.Data.Add("Nariman Point");
 break;
 case"Delhi":
 selectCinemaComboBox.Data.Add("Select a Theater");
 selectCinemaComboBox.Data.Add("Chitrapur");
 selectCinemaComboBox.Data.Add("Khari Baoli");
 selectCinemaComboBox.Data.Add("Lakshmi Garden");
 break;
 case"Bangalore":
 selectCinemaComboBox.Data.Add("Select a Theater");
 selectCinemaComboBox.Data.Add("Gandhi Nagar");
 selectCinemaComboBox.Data.Add("Lake City");
 selectCinemaComboBox.Data.Add("Rajaji Nagar");
 break;
 case"Chennai":
 selectCinemaComboBox.Data.Add("Select a Theater");
 selectCinemaComboBox.Data.Add("Harrington Road");
 selectCinemaComboBox.Data.Add("Boat Club");
 selectCinemaComboBox.Data.Add("Chetpet");
 break;
 default:
 selectCinemaComboBox.Data.Add("Select a city");
 break;
 }
 ((CanvasControlLibrary.CCLScrollBarProps)ccl.getControlPropsByWindowID(canvasid, 
 selectCinemaComboBox.VScrollBarWindowID)).MaxItems = 
 selectCinemaComboBox.Data.Count.ToString();
 }
 publicvoid DoPaymentForTickets(string canvasid, int windowid)
 {
 CanvasControlLibrary.CCLButtonProps buttonProps = 
 ccl.getControlPropsByWindowID(canvasid, windowid.ToString()) 
 as CanvasControlLibrary.CCLButtonProps;
 CanvasControlLibrary.CCLLabelProps lp = 
 ccl.getControlPropsByControlNameID((string)buttonProps.Tag) 
 as CanvasControlLibrary.CCLLabelProps;
 CanvasControlLibrary.CCLTextBoxProps textbox = 
 ccl.getControlPropsByControlNameID("numTicketsTextBox") 
 as CanvasControlLibrary.CCLTextBoxProps;
 CanvasControlLibrary.CCLComboBoxProps selectCinemaComboBox = 
 ccl.getControlPropsByControlNameID("selectCinemaComboBoxComboBoxTextArea") 
 as CanvasControlLibrary.CCLComboBoxProps;
 Regex regex = new System.Text.RegularExpressions.Regex(
 "MovieTimeLabel[0-9]+Poster(?<PosterIndex>[0-9]+)");
 Match m = regex.Match((string)buttonProps.Tag);
 int movieIndex = Convert.ToInt32(m.Groups["PosterIndex"].Value);
 string movieName = "";
 for (int i = 0; i < movieIndexes.Count; i++)
 {
 if (((ArrayList)movieIndexes[i])[0].ToString() == 
 selectCinemaComboBox.Data[Convert.ToInt32(selectCinemaComboBox.SelectedID)].ToString())
 {
 movieName = ((ArrayList)((ArrayList)movieIndexes[i])[1])[movieIndex].ToString();
 }
 }
 parameters.Add("The payment was successful. You have" + 
 textbox.UserInputText + " tickets to see" + movieName + " at" + 
 selectCinemaComboBox.Data[Convert.ToInt32(selectCinemaComboBox.SelectedID)].ToString() +
 " showing at time" + lp.Text + ".");
 }
 publicvoid onSelectCinemaChanged(string canvasid, int windowid)
 {
 CanvasControlLibrary.CCLComboBoxProps selectCinemaComboBox = 
 ccl.getControlPropsByControlNameID("selectCinemaComboBoxComboBoxTextArea") 
 as CanvasControlLibrary.CCLComboBoxProps;
 switch (selectCinemaComboBox.Data[Convert.ToInt32(selectCinemaComboBox.SelectedID)].ToString())
 {
 case"Phoenix Mills":
 parameters = new ArrayList{new ArrayList { "fantastic_four.jpg", 
 "1:30 pm", "5:45 pm" }, new ArrayList { "ferrisbuellersdayoff.jpg", 
 "9:00 pm", "11:30 pm" }, 
 new ArrayList { "IncredibleHulk.jpg", "6:00 pm", "8:30 pm" }};
 break;
 case"Juhu":
 parameters = new ArrayList { new ArrayList { "ironman.jpg", "4:30 pm", 
 "9:45 pm" }, new ArrayList { "pointbreak.jpg", "6:00 pm", 
 "7:30 pm" }, 
 new ArrayList { "Spider-Man-2.jpg", "5:00 pm", "10:30 pm" } };
 break;
 case"Nariman Point":
 parameters = new ArrayList { new ArrayList { "spider-man4.jpg", "7:30 pm", 
 "8:45 pm" }, new ArrayList { "spider_man3.jpg", "2:00 pm", 
 "5:30 pm" }, new ArrayList { "The-Avengers.jpg", "9:00 pm", 
 "9:30 pm", "10:30 pm", "11:30 pm" } };
 break;
 case"Chitrapur":
 parameters = new ArrayList { new ArrayList { "thor.jpg", "8:30 pm", 
 "10:45 pm" }, 
 new ArrayList { "wolverine.jpg", "2:00 pm", 
 "5:30 pm" }, 
 new ArrayList { "xmen_first_class.jpg", "9:00 pm", "11:30 pm" } };
 break;
 case"Khari Baoli":
 parameters = new ArrayList { new ArrayList { "gijoeriseofcobra.jpg", 
 "2:30 pm", "5:45 pm" }, 
 new ArrayList { "The-Avengers.jpg", 
 "8:00 pm", "9:15 pm" }, 
 new ArrayList { "wolverine.jpg", "7:30 pm", "10:15 pm" } };
 break;
 case"Lakshmi Garden":
 parameters = new ArrayList { 
 new ArrayList { "Thor.jpg", "8:30 pm", "10:45 pm" }, 
 new ArrayList { "pointbreak.jpg", "3:00 pm", "4:15 pm" }, 
 new ArrayList { "ironman.jpg", "8:45 pm", "9:15 pm" } };
 break;
 case"Gandhi Nagar":
 parameters = new ArrayList { 
 new ArrayList { "Spider-Man-2.jpg", "4:30 pm", "6:45 pm" }, 
 new ArrayList { "IncredibleHulk.jpg", "7:00 pm", "9:15 pm" }, 
 new ArrayList { "gijoeriseofcobra.jpg", "3:45 pm", "4:15 pm" } };
 break;
 case"Lake City":
 parameters = new ArrayList { 
 new ArrayList { "The-Avengers.jpg", "9:30 pm", "9:45 pm" }, 
 new ArrayList { "xmen_first_class.jpg", "6:00 pm", "8:15 pm" }, 
 new ArrayList { "ironman.jpg", "8:45 pm", "10:15 pm" } };
 break;
 case"Rajaji Nagar":
 parameters = new ArrayList { 
 new ArrayList { "fantastic_four.jpg", "9:30 pm", "11:45 pm" }, 
 new ArrayList { "wolverine.jpg", "8:00 pm", "9:15 pm" }, 
 new ArrayList { "Thor.jpg", "6:45 pm", "10:15 pm" } };
 break;
 case"Harrington Road":
 parameters = new ArrayList { 
 new ArrayList { "The-Avengers.jpg", "10:30 pm", "10:45 pm" }, 
 new ArrayList { "xmen_first_class.jpg", "9:00 pm", "10:15 pm" }, 
 new ArrayList { "ironman.jpg", "8:45 pm", "11:15 pm" } };
 break;
 case"Boat Club":
 parameters = new ArrayList { 
 new ArrayList { "gijoeriseofcobra.jpg", "8:30 pm", "8:45 pm" }, 
 new ArrayList { "spider_man3.jpg", "10:00 pm", "11:15 pm" }, 
 new ArrayList { "IncredibleHulk.jpg", "8:45 pm", "9:15 pm" } };
 break;
 case"Chetpet":
 parameters = new ArrayList { 
 new ArrayList { "Thor.jpg", "7:30 pm", "8:45 pm" }, 
 new ArrayList { "fantastic_four.jpg", "5:00 pm", "6:15 pm" }, 
 new ArrayList { "The-Avengers.jpg", "10:45 pm", "11:15 pm" } };
 break;
 }
 ((CanvasControlLibrary.CCLScrollBarProps)ccl.getControlPropsByWindowID(canvasid, 
 selectCinemaComboBox.VScrollBarWindowID)).MaxItems = 
 selectCinemaComboBox.Data.Count.ToString();
 }
}

在页面中,由 CanvasControlLibrary.cs 定义的服务器端类被实例化。 C# 函数 InitializeForm1 所做的全部操作是填充与城市的NAME的选择城市组合框。 函数获取对选择城市组合框的引用以查找选择哪个城市并根据选定的城市选择cinema电影组合框 reference。 现在实际上会发生的事情不是对城市和电影院的名字进行硬编码。 在 onSelectCinemaChanged 中,我们所做的就是将 array 传递回客户端,其中包含电影海报要显示的url的图像以及显示时间。 点击电影下的时间标签后,将显示高亮显示,2个新控件将添加到文本框中,并在文本框中添加一个按钮,以使用服务器端 postback 来保存座位。 服务器端代码只获取从客户端浏览器传递的信息关于简单构建一个消息字符串,剧院,电影,显示时间和数量的座位,并将它传递给客户浏览器,显示成功消息。 在现实世界中,你当然可以通过支付网关逻辑等。

下面是我在示例中工作时将不断更改的页面截图:

选择了德里和德里 Nagar 1后,将显示带有它的海报和显示时间的电影。 下面是示例截图:

如何在新的基于表单的系统中使用 Sessions

下面是如何在 ASP.NET 中实现的指南。 本质上,在具有HTML和Javascript的web页面中,重写渲染方法并调用传递给 HtmlTextWriter的static 方法 CanvasControlLibrary.StartSession。 这样做的目的是将你与一个会话对象联系起来。 例如,我要使用简单的ClickMe函数,并更改它,以简单地检查 CurrentSessionObj.Data 对象是否有任何数据。 如果它存在增量并将标签的值设置为。 现在作为一个测试,你可以拉出页面并按下按钮,标签中的数字会按单击。 拉出另一个页面或者浏览器并且执行相同的操作,因为它们是不同的会话,值不同。 下面是 file: 后面代码中的html/javascript页面的代码

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;publicpartialclass _Default : System.Web.UI.Page
{
 protectedvoid Page_Load(object sender, EventArgs e)
 {
 }
 protectedoverridevoid Render(HtmlTextWriter writer)
 {
 base.Render(writer);
 CanvasControlLibrary.StartSession(writer);
 }
} 

下面的代码是 ASPX file: 中的AJAX回调 ClickMe 函数

publicvoid ClickMe(string canvasid, int windowid)
{
 CanvasControlLibrary.CCLLabelProps lp = 
 ccl.getControlPropsByControlNameID("l1") as CanvasControlLibrary.CCLLabelProps;
 if (ccl.CurrentSessionObj.Data.Count == 0)
 {
 ccl.CurrentSessionObj.Data.Add("Counter", 1);
 }
 else {
 ccl.CurrentSessionObj.Data["Counter"] = 
 (int)ccl.CurrentSessionObj.Data["Counter"] + 1;
 }
 lp.Text = ccl.CurrentSessionObj.Data["Counter"].ToString();
}

这种技术是一种替代方法,如果你想使用它的普通 ASP.NET 会话,因为它更轻和更快。 对于 PHP,只需使用支持AJAX调用的常规PHP会话,因为PHP的设计本质上是由PHP设计的。

如何用按钮控件创建控件以作为一个示例:

你控制的第一件事是它基本上是视觉上的东西,你。 除这里之外,除非控件只是可以视化 换句话说,否则只能提供一些相互交互的数据。 一个简单的例子是按钮控件。

因此,当你创建按钮控件时,首先要做的是设置一个 array 来保存控件的属性。 在按钮控件的情况下,它是下面的array:

var buttonPropsArray = new Array();

由于这个例子中将有多个画布和多个控件,除了属性以外,还将保存属性windowid和 canvasId。 你需要获得控件的属性,以便可以操作它,甚至可以引用该控件,以便绘制控件。 因此,在按钮的示例中设置一个 getYourControlTypeNameProps() 函数,如下所示:

function getButtonProps(canvasid, windowid) {
 for (var i = 0; i < buttonPropsArray.length; i++) {
 if (buttonPropsArray[i].CanvasID == canvasid && buttonPropsArray[i].WindowID == windowid) {
 return buttonPropsArray[i];
 }
 }
}

接下来要做的是创建一个创建函数,以便用户可以创建自定义控件的实例。 在下面的示例中,定义了 canvasId。controlNameId ( 这是用于唯一标识覆铜板subsytem中这里控件的用户实例的控件的标识名)。窗口坐标。窗口坐标。高度和窗口的层次等最小参数,定义了深度参数所给出的窗口在下面的位置。 因此最小创建函数签名将类似于下面的示例:

function createCustomControlTypeName(canvasid, controlNameId, x, y, width, height, depth);

但是,就像按钮示例示例中的控件一样,你需要额外的信息来根据用户的意愿定制控件。 按钮可以在按钮上显示各种参数,例如宽度和高度和颜色。 事件基于按钮的情况下,单击按钮时你希望发生什么情况。 因此,你创建了收集这里用户信息并将它的传递到创建控制函数的附加参数。 还允许对创建控件函数进行面向对象的访问,你将添加一个OO包装器。 命名约定为 CCLCustomControlTypeName。 最简单的例子如下:

function CCLControlTypeName() { }
CCLControlTypeName.prototype = {
 CanvasID: null, ControlNameID: null, X: null, Y: null, Width: null, Height: null, Depth: null,
 CustomParam1: null, CustomParam2: null,
 Initialize: function () {
 createControlTypeName(this.CanvasID, this.ControlNameID, this.X, this.Y, this.Width, this.Height, this.Depth);
 }
}

为什么它是包装器,因为它只调用基础创建控件函数传递参数中的基础创建控件。 你可以允许控件的最终用户使用控件的OO创建,或者直接调用javascript函数,这两种方法都是受支持的。 如果想提供缺省值,不要把它们放到 OO Prototype属性级别,而是使用代码来创建控制函数调用,这样这两种方法都将被支持。

在按钮的实例中创建控制函数调用的过程实际上是在按钮的示例中调用createWindow函数调用:

var windowid = createWindow(canvasid, x, y, width, height, depth, null, 'Button', controlNameId);

注意:需要用 -1调用 createWindow,而不是在新系统中调用 null。

这里要注意的是字符串'按钮'。 你应该对控制你的系统用来标识你的类型的控件的控制进行控制。 你想保存唯一标识控件实例窗口的窗口 of,并将它的传递到创建控件函数的末尾。 下一件事是将传入的参数填充到具有属性的对象上,然后将它的添加到创建控件属性的array。 在按钮控件的情况下,它是:

buttonPropsArray.push({
 CanvasID: canvasid, WindowID: windowid, X: x, Y: y, Width: width, Height: height, Text: text,
 EdgeRadius: edgeRadius, BottomColorStart: bottomColorStart, BottomColorEnd: bottomColorEnd,
 TopColorStart: topColorStart, TopColorEnd: topColorEnd, TextHeight: textHeight, TextFontString: textFontString,
 TextColor: textColor, IsPressed: 0, BorderColor: borderColor, IsHyperlink: isHyperlink, URL: url,
 NoBrowserHistory: nobrowserhistory, IsNewBrowserWindow: isnewbrowserwindow,
 NameOfNewBrowserWindow: nameofnewbrowserwindow, WidthOfNewBrowserWindow: widthofnewbrowserwindow,
 HeightOfNewBrowserWindow: heightofnewbrowserwindow, NewBrowserWindowIsResizable: newbrowserwindowisresizable,
 NewBrowserWindowHasScrollBars: newbrowserwindowhasscrollbars, NewBrowserWindowHasToolbar: newbrowserwindowhastoolbar,
 NewBrowserWindowHasLocationOrURLOrAddressBox: newbrowserwindowhaslocationorurloraddressbox,
 NewBrowserWindowHasDirectoriesOrExtraButtons: newbrowserwindowhasdirectoriesorextrabuttons,
 NewBrowserWindowHasStatusBar: newbrowserwindowhasstatusbar, NewBrowserWindowHasMenuBar: newbrowserwindowhasmenubar,
 NewBrowserWindowCopyHistory: newbrowserwindowcopyhistory, Tag: tag, Theme: theme, HasGloss: hasgloss
});

现在你已经在这个时候拥有了控件的最小。 但它什么也不做,因为它。 所以任何普通控件都要做的最重要的事情就是绘制那些控件的表示形式。 为这里,调用registerWindowDrawFunction接受 canvasId,windowid和一个函数,每次需要重新绘制该控件的网页或者画布元素。 你还可以在参数中做一个可选的事件,以便为控件用户提供可选的自定义图形函数。 按钮示例如下所示:

if (drawFunction!= undefined && drawFunction!= null)
 registerWindowDrawFunction(windowid, function () { drawFunction(canvasid, windowid); }, canvasid);else registerWindowDrawFunction(windowid, function () { defaultButtonDrawFunction(canvasid, windowid); }, canvasid);

你可以按照HTML5规范使用普通的javascript画布绘图函数绘制控件。 尝试在这里坚持所有浏览器支持的最小值。 then示例是figure单击按钮中的按钮,然后单击鼠标右键,然后单击鼠标右键,然后单击鼠标右键,然后单击鼠标按钮。 你应该始终将控件的不同可以单击区域划分为矩形区域。 我创建了许多控件,我使用 ClickExtents array 来填充绘图函数。 如果单击按下矩形区域,然后在下面的代码中单击,则循环执行这些检查:

var xm = e.calcX;var ym = e.calcY;if (xm > scrollBarProps.X && xm < controlProps.X + controlProps.Width &&
 ym > controlProps.Y && ym < controlProps.Y + controlProps.Height) {
 //Do some custom code logic here }
}

x x ordinate x 坐标 ordinate x 坐标 ordinate x co logic logic logic logic logic logic logic logic logic logic inbetween inbetween。 对y 坐标进行相同的检查。 如果两者都是可信的,在矩形区域中有一个点击,现在你可以执行一些特定于控件的点击函数代码。

处理自我引用的另一个事件不包括它们在 postback 系统中的属性,因为它会导致无限循环。 另一件不需要包括的是实际图像二进制数据或者属性中的任何类型的二进制数据,这些数据将返回到 postback 系统。 在本地存储这些数据,因为我们永远不会离开页面,并且在 ajax postback 调用期间不会丢失这些数据。

所以 postback 系统的第一步是调用 invokeServerSideFunction,这会导致客户端的javascript进行ajax服务器端调用。 然后在getEncodedVariables调用服务器端将所有属性和它们的值包装在所有控件数组中,并将它们作为POST数据发送到服务器端。 所以你必须在getEncodedVariables函数中添加代码,以便你的控件的属性和值被传递给你的控件。 例如,在按钮的例子中,它的代码添加是在getEncodedVariables函数调用中使用 postback 系统:

strVars += '[/labelPropsArray][buttonPropsArray]';for (var i = 0; i < buttonPropsArray.length; i++) {
 strVars += '[i]' + stringEncodeObject(buttonPropsArray[i]) + '[/i]';
}
strVars += '[/buttonPropsArray][scrollBarPropsArray]';

然后我们到达服务器端,所有这些数据都被打开,以便在 C# 中使用。 所以现在你必须修改 CanvasControlLibrary.cs 文件。 这在UnwrapVars函数中发生。 在按钮的情况下,代码为: >/p>

case"buttonPropsArray":
 foreach (XmlNode child2 in child1.ChildNodes)
 {
 CCLButtonProps b = new CCLButtonProps();
 ButtonPropsArray.Add(b);
 FillClassObject(child2, b);
 }
 break;

注意按钮控件属性的NAME 上发生的内容称为 buttonPropsArray。 so我们使用 pseudo,然后你必须创建一个 array 节点代码来保存这个按钮,然后我们就可以在一个类中使用反射来保存这个按钮,

public List

现在,有时我们传递数组,有时甚至是对象,所以对象将它的类型定义为非字符串,而是列出 <对象> 和javascript对象作为LightWeightDictionary类型。 你也可以看到对象的标记属性的标记属性也很好。 这并不重要,因为所有的反射代码逻辑将透明地处理你的控制。

custom ajax page custom ajax ajax custom custom custom custom custom custom ajax ajax ajax,holding ajax controls time time time time time time time time ajax ajax。 所有这些动作都在SendVars中发生。 所以现在,你必须在这个函数中添加对控件的支持。 在SendVars函数中,按钮示例代码如下所示:

strVars.Append("[/labelPropsArray][buttonPropsArray]");foreach (CCLButtonProps b in ButtonPropsArray)
{
 strVars.Append("[i]").Append(encodeObject(b)).Append("[/i]");
}
strVars.Append("[/buttonPropsArray][scrollBarPropsArray]");

另一件需要改变的事情是函数 getControlPropsByControlNameID。 这基本上允许用户传递惟一的控件 NAME id,并返回服务器端代码中的属性。 在下面的按钮示例中,代码为:

case"Button":foreach (CCLButtonProps o in ButtonPropsArray)
{
 if (o.CanvasID == w.CanvasID && o.WindowID == w.WindowCount)
 {
 return (object)o;
 }
}break;

现在你回到客户端,并且javascript将XML解压到web页面的控件中,以修改 等等 客户端函数 UnWrapVars。 现在还有逻辑可以恢复在生成 ajax postback 调用之前保存的函数逻辑,现在需要恢复。 因此,有一个循环,你需要添加对控件的支持。 按钮的below 显示了一个示例:

var o = getButtonProps(savedFunctionsOnPostback[i].CanvasID, savedFunctionsOnPostback[i].WindowID);if (setSavedFunctionOnPostback(o, savedFunctionsOnPostback, i) == 1) { continue; }

在创建需要制表位的控件时,在创建控制函数中添加参数tabstopindex并将它的传递到控件的createwindow函数调用。 如果你有一个复杂的控件,比如组合框,那么你还需要传递你的主窗口的函数,这个主窗口代表你的控制。 在组合框中,默认情况下为你选择或者预先选择的文本的textareawindowid。 你还需要更新对新参数的OO调用,并将参数保存到控件实例的属性中。 因此在服务器端,你必须更新你的控件属性的类定义,以便同时包含这个新的tabstopindex属性。 然后你的控件将有制表位支持。

现在你拥有了完全受支持的控制。 它将绘制到画布网页,它将通过 ajax postback 系统向服务器端发送信息。

这是为画布控制库创建自定义控件的过程,同时我提供了许多控件。

支持以下浏览器:

Latest 2012年08月,Safari,Opera,Firefox,SeaMonkey,Maxthon和 ie9/ie10的最新版本支持,基本上支持所有主流浏览器。 为了便于查看,支持的浏览器图标如下所示:

现在支持 iPad。iPhone和 iPod。

为了让IE9工作,你必须在网页HTML中包含以下元标记:

<metahttp-equiv="X-UA-Compatible"content="chrome=1, IE=edge"/>

控制  for  构建  SYS  系统  form  
相关文章