The forum is finally opened, ask questions about VML
VML default origin in the upper left corner, how to turn into the lower left; how to display the coordinate value in the plot area?
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<% @ Page ContentType = "Text / HTML; Charset = GB2312"%> <% @ include file = "/ dataini / data"%> <% @ include file = "/ scriptlib / init.jsp"%> < HTML XMLns: V = "URN: Schemas-Microsoft-COM: VML">
</ title> <link rel = "stylesheet" type = "text / css" href = "/ stylelib / default_style_sheet.css"> </ head></p>
<p><body οnlοad = "DrawlinesX (4500); Drawlinesy (13);> <% @ include file =" / templatelib / head.jsp "%> <script> function drawlinesx (iMaxx) {iCount = 0; // Coordinate var ITextPoint = 1; for (var IIndex = 1; IIndex <= 10; IIndex ) {var ipositiony = 2750-{var ipositiony = 2750-iindex * 245; var stratchy; var newline = document.createElement ("<v: Line from = '200 " ipositiony "' to = '" strto "' style = 'Position: absolute; z-index: 8'> </ v: line> "); groupid.insertbefore (newline); if ( ICOUNT% 2! = 0) {var newstroke = document.createElement ("<v: stroke color = '# c0c0c0'>); newline.insertbefore (newstroke); var newshape = document.createElement (" <v: Shape Style = 'POSITION: ABSOLUTE; LEFT: -350; TOP: " (ipositiony-50) "; width: 1000px; Height: 200px; Z-Index: 8' Coordsize = '21600, 21600' FillColor = 'White'> </ v: shape> "); groupid.insertbefore (newshape); var newtext = document.createElement (" <v: textbox id = 't " itxtpoint "' INSET = '3pt, 0pt, 3pt, 0pt' Style = 'font-size: 10pt; v-text-anchor: bottom-right-baseline'> </ v: textbox> "); newshape.insertbefore (newtext); ne wText.innerText = iTextPoint; iTextPoint ;} else {var newStroke = document.createElement ( "<v: stroke dashstyle = 'dot' color = '# 000000' />"); newLine.insertBefore (newStroke);} iCount ;} } Function Drawlinesy {VAR ITEXTPOINT = 1; for (var IIndex = 1; IIndex <= iMaxy; IIndex </p>
<p>) {Var ipositiony = 170 IINDEX * 300; var newline = document.createElement ("<v: line from = '" ipositiony "2700' to = '" ipositiony "2750' style = 'position: absolute; z- INDEX: 8 '> </ v: line> "); groupid.insertbefore (newline); var newstroke = document.createElement (" <v: stroke color =' black "); newline.insertbefore (newstroke); var Newshape = document.createElement ("<v: shape style = 'Position: absolute; left:" "Top: 2750; width: 200px; Height: 150px; z-index: 8' coordsize = '21600, 21600' FillColor = 'White'> </ v: shape> "); groupid.insertbefore (newshape); var newtext = document.createElement (" <v: textbox id = 'type " itxtpoint "' INSet = '3PT, 0PT, 3PT, 0pt' Style = 'font-size: 9pt; v-text-anchor: bottom-right-baseline'> </ v: textbox> "); newshape.insertbefore (newText); NewText.innerHTML = iTextPoint; iTextPoint ;}} function drawBar (iUnit, iIndex) {var iHeight = iUnit * 245-50; var iPositionX = 2750-iUnit * 245; var iPositionY = 170 iIndex * 300; var newShape = document.createElement ( " <v: Rect Style = 'Position: Absolute; Left: " ipositio NY "; TOP:" ipositionX "; width: 190px; height:" Iheight "px; z-index: 9 'coordsize =' 21600, 21600 'FillColor =' # eeeeee '> </ v: Rect>") Groupid.insertbefore (newshape);} function drawbars () {for (IINDEX = 1; IIndex <13; IIndex ) {Drawbar (Math.random () * 10, IIndex);}} </ script> <v: group ID = "GroupID" style = "</p>
<p>Width: 700px; Height: 500px "Coordsize =" 4900, 3500 "> <v: line from =" 200,100 "to =" 200, 2700 "style =" z-index: 1; position: absolute "strokeweight =" 1pt " > <v: stroke startARROW = "classic" Dashstyle = "SINGLE" /> </ v: line> <v: line from = "200, 2700" to = "4500, 2700" style = "z-index: 1; Position: absolute "strokeweweight =" 1pt "> <v: stroke endarrow =" classic "dashstyle =" single "/> </ v: line> <v: rect style =" width: 4600px; height: 2900px "Coordsize =" 21600, 21600 "FillColor =" # ffffff "strokecolor =" # 000000 "> <v: shadow on =" true "type =" single "color =" Silver "Offset =" 4pt, 3pt "> </ v: shadow> </ v: Rect> <v: shape style; left: -350; top: 2650; width: 1000px; Height: 200px; z-index: 8 "Coordsize =" 21600, 21600 "FillColor =" #Ffffff> <v: textbox id = "text =" 3pt, 0pt, 3pt, 0pt "align =" style = "font-size: 9pt; v-text-anchor: bottom-center-baseline" > 0 </ v: TextBox> </ v: shape> </ v: group> <br> <input type = "οnclick =" drawbars () "οnclick =" Drawbars ();> <% @ @ @ @ ο = Include file = "/ templatelib / chart.jsp"%> <% @ include file = "/ templatelib / tail.jsp"%> <% @ include file = " /Dataini/dataraclose.jsp "%> </ body> </ html></p>
<p>-------------------------------------------------- ------------</p>
<p>Shape object and VML coordinate system Shape is the most basic object of VML, which can draw all the graphs you want. In VML, the coordinates used are not Document coordinates, which have their own coordinate system, so that dynamically change its coordinates, enlargement, reduction, rotation and other functions. Shape's CoordSize property is used to define coordinates, it has two parameters, <v: shape coordsize = "2800, 2800" />, where the 2800, 2800 is divided into 2800 points, not HTML The default pixel is inside. If the dot is not set, the VML default is 0,0 (left corner), of course, you can also use the Coordorig property to set the VML polka coordinates. <v: shape coordorig = "- 1400, -1400" Coordsize = "2800, 2800" style = "Width: 500; Height: 500" /></p>
<p>Note: The defined coordinates are only relative, and the real display of the graphics requires style = "Width: 500; Height: 500" to define!</p>
<p>After the above definition, the coordinates you can use are X (-1400 to 1400) Y (-1400 to 1400), such coordinates are like coordinates in mathematics, dividing the painting into four blocks.</p>
<p>When solving practical problems, I found that IE will automatically put the visible VML image in a relative (0, 0) position, means that the above two pictures If there is no two auxiliary coordinates, in IE The two squares are shown in parallel. The most important attribute in Shape is PATH. It is a powerful brush. It is very simple in grammar. It is described in detail by several letters. Draw a line from the current point to (x, y); you can give a few points, VML will draw up continuously until the X command is encountered. X: Close ends a line; E: END End Draws Some common properties: FillColor: Fill color, use the color specified in HTML; for example: FillColor = RedFilled: Do you want to fill the graphic, if the graph is not closed, will automatically Closed graphs are filled. When Filled = "True", FillColor has an effect; strokecolor: line color; strokeweweight: width of the line; Title: When the mouse moves to the graph, the text, and the Alt, Tilte inside HTML The same; TYPE: Specifies that the graphic belongs to that Shapertype, ShapetyPE can set the template for VML, will be described later; the previous attributes, FillColor, Filled can be used in <v: Fill />, strokeColor, strokewewe can be in <v : Stroke />. It is also possible to use it in Shape or inheritance of Shape. In the following sections, some specific objects extending out in detail, such as RECT, ROUNDRECT, OVAL, LINE, and other objects.</p>
<p>-------------------------------------------------- ---------</p>
<p>Don't post the coupon of the American Leopard</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-15506.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="15506" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.042</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'OFI6P4KmFsrJZRc8a8kxKcLHEogSKEbni3W4fHa19PLbzxYqX05YbLUPmO9t4AtJtokcNfDNwQ0ww1_2BjGU81FA_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
