我需要编写一个应用程序,接受用户非常简单的涂鸦,有点像十万人和市场.
例如,我可能希望用户使用鼠标编写他们的名字.
有什么建议？
我甚至不需要自己主持.如果有某些地方提供的服务我可以使用,这很好.
使用html将基本的涂鸦应用程序组合在一起并不困难.我会让你弄清楚准备生产的细节.
我在这里使用extjs作为跨浏览器事件框架,但你可以使用你喜欢的任何东西(jquery).我也使用Raphael来获得跨浏览器绘图功能.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TestPage</title>
<script language="javascript" src="raphael-src.js"></script>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script language="javascript">
scribbler = function (container, width, height) {
this.canvas = Raphael(container, width, height);
this.currentdraw = null;
Ext.get(container).on('mousedown', function(e) {
var el = Ext.get(container);
this.currentdraw = this.canvas.path({ stroke: "black", fill: "none", "stroke-width":4 });
this.currentdraw.moveTo(e.getPageX() - el.getLeft(), e.getPageY() - el.getTop());
}, this);
Ext.get(container).on('mousemove', function(e) {
var el = Ext.get(container);
if (this.currentdraw != null)
{
this.currentdraw.lineTo(e.getPageX() - el.getLeft(), e.getPageY() - el.getTop());
}
}, this);
Ext.get(container).on('mouseup', function(e) {
this.currentdraw = null;
}, this);
}
var scribble;
Ext.onReady( function()
{
scribble = new scribbler("container", 800,600);
}
);
</script>
</head>
<body>
<div id="container" style="position:relative;border:1px solid black;width:640px;height:400px">
</div>
</body>
</html>
您必须以表格形式记录和存储各种涂鸦线以供提交.并确保鼠标指针始终正确(它是IE下的文本栏).
无论如何,享受.
PS.我已经上传了一个包含raphael和完整extjs2库的工作示例到drop.io(3Mb,7zip).
PPS.我上传了一个基本(但非常完整)控件的工作示例.见好奇龟.
正如其他答案所述,Flash将是最简单的方法.
但是不要把画布排除在外.通过一些漂亮的javascript和一些专有的MS guff(VML),你可以在IE中模拟画布行为.
如果闪光不是你的东西(它肯定不是我的)那么这可能是一个非常巧妙的选择.