vml的简易画板_2
三、draw.css
body
{
font-size:12px;
}
.dbutton1
{
border:none;
width:60px;
height:21px;
background:url(../project/drawimage/draw_line.jpg);
cursor:hand;
}
.dbutton2
{
border:none;
width:60px;
height:21px;
background:url(../project/drawimage/draw_rect.jpg);
cursor:hand;
}
.dbutton3
{
border:none;
width:60px;
height:21px;
background:url(../project/drawimage/draw_oval.jpg);
cursor:hand;
}
.dbutton5
{
border:none;
width:60px;
height:21px;
background:url(../project/drawimage/draw_arc.jpg);
cursor:hand;
}
.dbutton6
{
border:none;
width:60px;
height:21px;
background:url(../project/drawimage/draw_text.jpg);
cursor:hand;
}
.dbutton7
{
border:none;
width:60px;
height:21px;
background:url(../project/drawimage/draw_textpath.jpg);
cursor:hand;
}
.dbutton8
{
border:none;
width:60px;
height:21px;
background:url(../project/drawimage/draw_polyline.jpg);
cursor:hand;
}
.dbutton9
{
border:none;
width:60px;
height:21px;
background:url(../project/drawimage/draw_select.jpg);
cursor:hand;
}
.dbutton4
{
border-style:solid;
border-width:1px;
width:60px;
cursor:hand;
height:16px;
background:white;
font-size:10px;
}
.dtext4
{
border-style:solid;
border-width:1px;
font-size:12px;
width:240px;
}
.dtext1
{
border-style:solid;
border-width:1px;
font-size:12px;
width:60px;
}
.dtext2
{
border-style:solid;
border-width:1px;
font-size:12px;
width:30px;
}
.dtext3
{
border-style:solid;
border-width:1px;
font-size:12px;
width:120px;
}
.dtd1
{
padding-left:21px;
font-size:12px;
}
.dselect1
{
font-size:12px;
border-style:solid;
border-width:1px;
width:72px;
}
四、vmldraw.js--画板的画图js
/*----------------全局变量区域--------------------*/
var pen_name=0;//画笔的名称
var pen_color="#000000";//画笔缺省颜色
var pen_strokecolor="#000000"; //画笔边框颜色
var pen_fillcolor="#ffffff";//填充颜色
var pen_strokewidth=3;//画笔的宽度
var pen_top=200;//画笔的初始化点坐标
var pen_left=360;
var obj_zindex=1000*Math.random();//图形图层-id区别(id的构成规则：类型_图层_area_尺寸)(尺寸优先：长（半径），宽,厚)
//需要计算面积的有area_尺寸，其他无
var obj_currentid=null;//图形对象id
var move_flag=false;//是否拖放标志
var zoom_flag=false;//是否缩放标志
var rotate_flag=false;//是否旋转标志
var obj_pathtextid=null;//附加路径文本对象id
var polyline_sx=null;//多边型开始点坐标
var polyline_sy=null;
var polyline_flag=false;//多边型是否继续绘制标志
var polyline_arr=null;//多边型点的坐标数组
var obj_polylineid=null;//正在绘画多边型对象id
var obj_strokeid=null;//画边框对象id
/*-----------字体对话框-----------*/
// cdlCFScreenFonts（屏幕字体）&H1
// cdlCFPrinterFonts（打印机字体）
// cdlCFBoth（既可以是屏幕字体又可以是打印机字体）
// Color:颜色 FontName-字体名字 FontSize-字体大小
// FontBold-粗体 FontItalic-斜体 FontUnderLine-下划线
function showfont()
{
document.all.fontDialog.Flags=257;
document.all.fontDialog.X="300px";
document.all.fontDialog.showfont();
return document.all.fontDialog.fontname;
}
/*---------------颜色选择板--参考别人改写-----------------*/
var ColorHex=new Array('00','33','66','99','CC','FF');
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF');
var current=null;
var colortype=1;
function intocolor(objcolortype)
{
colortype=objcolortype;
var colorTable=''
for (i=0;i<2;i++)
{
for (j=0;j<6;j++)
{
colorTable=colorTable+'<tr height=12>';
colorTable=colorTable+'<td width=11 style="background-color:#000000">';
if (i==0){
colorTable=colorTable+'<td width=11 style="background-color:#'+
ColorHex[j]+ColorHex[j]+ColorHex[j]+'">';
}
else{
colorTable=colorTable+'<td width=11 style="background-color:#'+SpColorHex[j]+'">';
}
colorTable=colorTable+'<td width=11 style="background-color:#000000">';
for (k=0;k<3;k++)
{
for (l=0;l<6;l++)
{
colorTable=colorTable+'<td width=11 style="background-color:#'+
ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">';
}
}//for
}//for
}//for
colorTable='<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'
+'<tr height=30><td colspan=21 bgcolor=#cccccc>'
+'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
+'<tr><td width="3"><td><input type="text" id="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'
+'<td width="3"><td><input type="text" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td></tr></table></td></table>'
+'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" οnmοuseοver="doOver()" οnmοuseοut="doOut()" οnclick="doclick()" style="cursor:hand;">'
+colorTable+'</table>';
document.all.colorpanel.innerHTML=colorTable;
}
function doOver() {
if ((event.srcElement.tagName=="TD") && (current!=event.srcElement)) {
if (current!=null){current.style.backgroundColor = current._background;}
event.srcElement._background = event.srcElement.style.backgroundColor;
document.all.DisColor.style.backgroundColor = event.srcElement.style.backgroundColor;
document.all.HexColor.value = event.srcElement.style.backgroundColor;
event.srcElement.style.backgroundColor = "white";
current = event.srcElement;
}
}
function doOut() {
if (current!=null) current.style.backgroundColor = current._background;
}
function doclick(){
if (event.srcElement.tagName=="TD"){
if(colortype==1)
{
pen_color=event.srcElement._background;
document.all.color_pen.style.backgroundColor=pen_color;
}
if(colortype==2)
{
pen_strokecolor=event.srcElement._background;
document.all.color_stroke.style.backgroundColor=pen_strokecolor;
}
if(colortype==3)
{
pen_fillcolor=event.srcElement._background;
document.all.color_fill.style.backgroundColor=pen_fillcolor;
}
document.all.colorpanel.innerHTML="";
return event.srcElement._background;
}
}
转载于:https://www.cnblogs.com/Andmm/archive/2009/12/04/1616994.html
vml的简易画板_2相关推荐
- qt制作一个画板_Qt 一个简易画板实现(Graphics View).pdf
Qt ⼀个简易画板的实现(Graphics View) Qt 学习之路(32): ⼀个简易画板的实现(Graphics View) 这⼀次将介绍如何使⽤ Graphics View 来实现前⾯所说的画 ...
- 基于QGraphicsView的简易画板EasyCanvas -- 第一版
最近使用 QGraphicsView 做了个简易的画板 EasyCanvas ,界面效果如下: 具有如下功能: 画布设置 图元添加和修改 保存为图片 第二版已更新 基于QGraphicsView的简易 ...
- Qt Creator实现简易画板代码解析【工具栏】【画板】
演示效果 工具栏通常位于菜单栏的下方,上面存放着一些小按钮,如下图所示. 以下所有功能都是直接通过代码实现,而不是在设计模式下ui界面通过拖拽实现.当然,它是可以用拖拽实现的. 引入图片资源 图片资源 ...
- react实现简易画板程序
react实现简易画板程序 文章同时发布于:https://pengfeixc.com/blog/60d073bce97367196dce3efc. 在这之前,我写过一个vue版本的画板程序.最近因为 ...
- Java图形化设计 简易画板
简易画板 UI界面设置 监听器类 图形保存 github源代码下载: 画图工具源代码. UI界面设置 根据我们想实现的画板要求,可以分步骤进行解决.在创建画板之前,首先创建窗体框架,利用java提供的 ...
- java 2d划线 刷子_简易画板的JAVA实现
要实现一个画图板,首先我们要掌握的是图形界面开发和事件监听机制.在Java中,图形界面开发有三套组件: 1.AWT组件:这是JDK1.0推出的图形组件类,位于java.awt这个包下.AWT组件被称为 ...
- java画板铅笔_简易画板的JAVA实现
要实现一个画图板,首先我们要掌握的是图形界面开发和事件监听机制.在Java中,图形界面开发有三套组件: 1.AWT组件:这是JDK1.0推出的图形组件类,位于java.awt这个包下.AWT组件被称为 ...
- Android 简易画板
用到的方法 画布Canvas 画笔Paint 路径Path 文件 File 位图 Bitmap 菜单 menu 创建一个Android项目,实现手绘功能的简易画板,并可以储存. activity_ma ...
- JavaScript 简易画板
html 5 canvas只是一个容器,想要画出东西全部依赖于JavaScript.感觉什么都离不开这个JavaScript脚本. 简易画板核心代码: <script>var start ...
最新文章
- [UI自动化]:控制浏览器操作
- Zookeeper详细参数解析zoo.cfg文件
- PCB 零件尺寸图：Arduino Mega 2560 尺寸
- 新浪微博开放平台之OAuth2.0认证
- html5 页面 参数传递,详解html中页面跳转传递参数的问题
- WebHelper类
- 网站流量和金钱的关系
- win7登录密码破解工具
- Rational Rose ：从用例图开始
- 物联网嵌入式学习路线
- Locality-Aware NMS 局部感知NMS(LNMS)学习
- 大小写字母转换(java大小写字母转换)
- 使用DoraCloud在Proxmox虚拟化平台搭建桌面云
- 《安富莱嵌入式周报》第221期：2021.07.12--2021.07.18
- 可编程逻辑器件之按键消抖实验
- 如何解决因涉及不良信息导致QQ互联审核不通过？
- php面试-职业规划
- win10最简单定时关机命令
- 优秀的WEB应用程序
- 使用少量数据去除神经网络中的水印 -- WILD