YML用例图
html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>WawaMind beta v1.0</title>
</head>
<style type="text/html" title=css>css">html" title=css>css">
v\:* { BEHAVIOR: url(#default#VML) }
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
cursor:default;
width:1000px;
}
.wen{
padding-top:3px;
padding-left:3px;
padding-bottom:3px;
padding-right:3px;
FONT-SIZE: 9.2pt; LINE-HEIGHT: 20px;
BACKGROUND-COLOR: #99ccff;
BORDER-BOTTOM: #330099 1px solid;
BORDER-LEFT: #330099 1px solid;
BORDER-RIGHT: #330099 1px solid;
BORDER-TOP: #330099 1px solid;
/*filter:Alpha(Opacity="80",FinishOpacity="90",Style="0");*/
cursor:move;
z-index:100;
}
.editdiv
{
OVERFLOW: auto; background-color:#fff999; cursor:default;
height:50px;
}
.editdiv p
{
margin:0;
}
.expanbutton
{
cursor:hand; font-weight:bold; font-size:20px;
}
</style>
<script type="text/javascript">javascript">
var xx=0,yy=0,oldvalue="",poly1,zz=1
//有关移动的过程和函数
var dragapproved=false
var eventsource,x,y
var popeventsource=""
var Pencil = true;
var selectObj,selectObjBorder = null;
//页面双击创建编辑框
function dbClick() {
if (event.srcElement.className!="body") return;
var markhtml ="<div class='wen' style='position:absolute;left:"+window.event.offsetX+";top:"+window.event.offsetY+";width:150px;z-index:9'></div>";
var newMark=document.createElement(markhtml);
document.body.appendChild (newMark);
newMark.innerHTML = "<span class=\"expanbutton\" οnclick=\"expandMemo(this)\">-</span><span></span><div class=\"editdiv\" contentEditable=true onselectstart=\"event.cancelBubble=true\"></div>";
newMark.fromline = new Array();
newMark.toline = new Array();
}
//鼠标按下
function msDown() {
if(event.button==1){
var isclickScroll= (event.y < 0 || event.y > document.body.clientHeight
|| event.x < 0 || event.x > document.body.clientWidth)
if(selectObj){ //清空选择
selectObj.style.borderStyle = selectObjBorder;
selectObj = null;
}
if(event.srcElement.className=="wen" ||
event.srcElement.tagName == "curve" ||
event.srcElement.tagName == "shape"
) //选择要删除的对象
{
selectObj = event.srcElement;
selectObjBorder = selectObj.style.borderStyle;
selectObj.style.borderStyle = "dotted";
selectObj.style.borderWidth = "1px";
}
if (event.srcElement.className=="wen")
{
if(event.shiftKey) //画两个物体间的线
{
eventsource=event.srcElement;
return;
}
dragapproved=true //拖动物体
eventsource=event.srcElement
temp1=eventsource.style.pixelLeft
temp2=eventsource.style.pixelTop
x=event.clientX
y=event.clientY
}else{ //铅笔
dragapproved=false;
if (event.srcElement.className!="body" || isclickScroll) //防止在物体上画线
{
Pencil = false;
return;
}
Pencil = true;
document.body.setCapture();
color1="red"
size1=1
xx=event.offsetX;yy=event.offsetY;zz+=1
poly1=document.body.appendChild(document.createElement("<v:shape filled=false path='m0,0 l0,0' style='position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";width:100;height:100' strokecolor='"+color1+"' strokeweight='"+size1+"' coordsize='100,100'/>"))
oldvalue=poly1.path.value.replace("e","")
}
}
}
//鼠标移动
function msMove() {
if(event.button==1)
{
if(event.shiftKey) //画两个物体件的线
{
return;
}
if(dragapproved){ //拖动物体
var newleft=temp1+event.clientX-x
var newtop=temp2+event.clientY-y
eventsource.style.pixelLeft=newleft
eventsource.style.pixelTop=newtop
//移动线
for(var i = 0; i< eventsource.fromline.length;i++)
{
eventsource.fromline[i].from = newleft +","+ newtop;
}
for(var i = 0; i< eventsource.toline.length;i++)
{
eventsource.toline[i].to = newleft +","+ newtop;
}
}
else if(selectObj && selectObj.tagName == "curve")
{ //调整曲线
if(!event.altKey)
selectObj.control1 = event.x+","+event.y;
else
selectObj.control2 = event.x+","+event.y;
}
else{//铅笔功能
if (event.srcElement.className!="body") return; //防止在物体上画线
if(Pencil)
{
oldvalue+=","+(event.offsetX-xx)+","+(event.offsetY-yy);
poly1.path.value=oldvalue
poly1.path.value=poly1.path.value.replace(",0,",",").replace(",0 e","e")
}
}
}
}
//鼠标弹起
function msUp() {
document.body.releaseCapture();
if (event.shiftKey && event.srcElement.className=="wen") //画两个物体见的连线。
{
var target = event.srcElement;
var newline=document.createElement("<v:curve filled=\"false\" from="+eventsource.style.pixelLeft+","+eventsource.style.pixelTop+"\" to=\""+target.style.pixelLeft+","+target.style.pixelTop+"\"></v:curve>");
document.body.insertBefore(newline);
eventsource.fromline[eventsource.fromline.length] = newline;
target.toline[target.toline.length] = newline;
}
}
//控制编辑框的展开和收缩
function expandMemo(o)
{
var expand = o.innerText == "+";
var text = o.parentNode.childNodes[2].innerText;
o.parentNode.childNodes[1].innerText = expand ? "":text.substring(0,10);
o.parentNode.childNodes[2].style.display = expand ? 'block':'none';
o.innerText = expand ? "-" :"+";
}
function keyDown() {
if(event.keyCode == 46) //删除
{
if(selectObj)
{
document.body.removeChild(selectObj);
selectObj = null;
}
}
}
document.onkeydown = keyDown
</script>
<body class="body" ondblclick="dbClick()" onmousedown="msDown()" onmousemove="msMove()" onmouseup="msUp()" onselectstart="return false;">
</body>
</html>
Tip
1、在网页的任何空白处用鼠标左键拖动可以涂鸦，便于临时记录一些文字；
2、在网页的任何空白处双击鼠标左键，会显示一个可编辑框，编辑框的浅黄色部分可以输入文字（鼠标会变成可输入形状），点击左上角的+/-图标可以展开和收缩文字，用鼠标拖动编辑框上部淡蓝色的部分（鼠标会变成可拖动形状）可以把文字框拖动到别的地方。
3、用鼠标左键点击某一个编辑框的淡蓝色部分，按住Shift键不放，拖拽到另一个编辑框，会在两个编辑框之间画一条线，然后再移动编辑框，这条线会跟着动。用来表示两条关联的信息。
4、点击铅笔笔记、连接曲线、编辑框，会变成选中状态，其边框会编程虚线，然后按delete键可以删除
5、两个编辑框之间的连接曲线可以选中后用鼠标拖动以改变曲度，按住alt键拖动是变化第2个控制点，不按alt键是变化贝塞尔曲线的第1个控制点。
