In VML drawings, when drawing Shap, there is a general idea on the Internet that by adjusting the coordorig of the coordinate system, you can adjust the origin of the coordinates and there will be no response after many attempts, when this value is adjusted.
And found that the default state, V:shape has no coordorig attribute (null), and finally found that the coordinate system is actually adjusted by changing the coordsize and Shap itself style.left/style.top to adjust.
A shape-type dom with a width and height of 400 can still be displayed when the content is out of range, without any effect.
So, in fact, the origin is always in the upper-left corner of the DOM, and the difference is that our drawing area can exceed the upper-left corner of the DOM!!
When coordsize= "400,-400", the lower-right corner of the DOM is (400,-400), and the upper-left corner of the DOM is always (0,0)
So, to get the right after the x-axis and positive y-axis, then the drawing, is the DOM's upper-left corner of the original point of a regular mathematical coordinate system. Here is a small application of line. Improved words can be made into a simple game like snake. Use the keyboard's left and right keys to adjust the direction, the key to adjust speed
<html xmlns= "http://www.w3.org/1999/xhtml"
xmlns:v= "URN:SCHEMAS-MICROSOFT-COM:VML"
xmlns:o= "Urn:schemas-microsoft-com:office:office" lang= "en" >
<head>
<title> draw Slash </title>
<!--[if!mso]>
<style>
v\:* {behavior:url (#default #vml)}
</style>
<! [endif]-->
<style type= "Text/css" >
body{padding:0px;margin:0px;}
#line {Position:absolute;left:0;top:0;z-index:3}
</style>
</head>
<body>
<v:line id= "line" ></v:line>
<v:polyline id= "Pline" filled= "false" points= "0,0 0,100" ></v:PolyLine>
<v:shape coordorig= "100,100" coordsize= "200,200" >
</v:shape>
<script language= "JavaScript" >
var Line=document.getelementbyid ("line");
line.to= "0,0";
line.from= "0,0";
with (Line.stroke)
{
color= "#FF0000";
weight= "1px";
endarrow= "Classic";
dashstyle= "Longdashdot";
}
Line=document.getelementbyid ("Pline");
line.style.position= "Absolute";
with (Line.stroke)
{
color= "#000";
weight= "1px";
endarrow= "Classic";
dashstyle= "Solid";
}
line. Points.value= "10,10 100,100 200,300 400,500";
var html= "10,10";
var direction=0;
var prepoint=[10,10];
var step=5;
function Move ()
{
var x=step*math.cos (direction);
var y=step*math.sin (direction);
var p=prepoint;
p[0]+=x;
p[1]-=y;
P[0]=math.round (p[0]);
P[1]=math.round (p[1]);
if (p[0]>=0&&p[1]>=0&&step>0)
{
prepoint=p;
html+= "" +prepoint[0]+ "," +prepoint[1 ";
line. points.value=html;
}
}
Window.setinterval (move,50);
function Document_keydown (e)
{
var e=window.event;
if (e.keycode==37)
direction+=0.1;
else if (e.keycode==39)
direction-=0.1;
else if (e.keycode==38)
step=math.min (Math.max (step+1,1), 15);
else if (e.keycode==40)
Step=math.max (step-1,0);
}
Document.onkeydown=document_keydown;
Document.body.focus ();
</script>
</body>
</html>
From the Besteast technology sharing, JavaScript's fantastic thinking, the hope can arouse again which good idea.
VML is extremely handy in some graphic applications, but today's increasingly powerful non-ie browsers are making it almost out of the historical arena.
In the logic of drawing, in fact, SVG and VML have a lot in common, if a cow who can develop a compatible VML and SVG client JS drawing components ...
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
