PageScale:  获取或设置此 Graphics 的世界单位和页单位之间的比例.PageUnit:  获取或设置用于此 Graphics 中的页坐标的度量单位. 话不多说,上代码: private void Form1_Paint(object sender, PaintEventArgs e) { Graphics dc = e.Graphics; dc.PageUnit = GraphicsUnit.Pixel; // 页面坐标 dc.PageScale = 0.5f; // 世界坐标…
关于js鼠标事件综合各大浏览器能获取到坐标的属性 1.page随滚动条变化(pageY会增加滚动条滚动的距离),兼容性:除IE6/7/8不支持外,其余浏览器均支持; 2.clientX/Y获取到的是触发点相对浏览器可视区域左上角距离(不随页面滚动而改变,clienY不会增加),兼容性:所有浏览器均支持; 3.screenX/Y获取到的是触发点相对显示器屏幕左上角的距离,不随页面滚动而改变,兼容性:所有浏览器均支持 //Jquery中的兼容PageX的代码如下 if ( event.pageX =…
itextpdf的确定页面上的具体坐标是通过坐标来确定的. 它们的坐标轴是这样的:以左下角为原点的xy坐标轴. 在itextpdf的方法中中,定义某个点的位置,都是以左下方为原点坐标轴来确定. 如果要定义一个矩形框,如:Rectangle rect = new Rectangle(300, 300, 400, 400); 它的四个值,确定了矩形左下角和右上角的坐标.通过这种方式来确定矩形范围. itextpdf中一些坐标的含义: 1.页面尺寸 System.out.println("页面尺寸&q…
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth    (包括边线的宽);网页可见区域高: document.body.offsetHeight   (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: docum…
一.DOM中各种宽度.高度 二.DOM中的坐标系 JS获取div元素的宽度 offsetWidth=width+padding-left+padding-right+border-left+border-right,即offsetWidth描述的是元素的宽度,是指元素的宽度+内边距(左右两个)+边框(左右两个),不包括外边距和滚动条部分 offsetHeight=height+padding-top+padding-bottom+border-top+border-bottom,即offsetH…
鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆,所以整理在这里,备忘,待查. 1.客户区坐标位置(clientX/clientY) 我们可以通过event事件对象的clientX/clientY属性获得事件发生时鼠标指针在视口中的水平和垂直坐标. 示意图: 2.屏幕坐标位置(screenX/scrennY) 通过event事件对象的screenX…
逻辑坐标:使用GDI绘图时使用的坐标系 设备坐标系:实际设备(显示器.打印机)的坐标系,即我们实际看到的坐标系. 坐标空间 在Windows NT/2000中Win32 API中支持以下四层坐标空间: 世界坐标空间:引入World是为了对图像进行平移.缩放.剪切等操作,最大范围为232个单位高和232个单位宽,初始时X轴正向向右,Y轴正向向上,World坐标空间可以成为逻辑空间. 页面坐标空间(Page坐标空间):当没有World坐标空间时,它就是逻辑空间,最大范围是232高和宽.初始时,X正向…
测试环境是IE8,Chrome38,Firefox40,下面是全局通用脚本打印代码 /** * 打印 */ function write(str) { document.write(str + '<br/>'); } 一.尺寸 在container外面我还套了个container_out,宽度为1000px,方便演示用,HTML代码如下: <div class="container_out"> <div id="container"&g…
1.UI坐标系和GL坐标系 2.本地坐标与世界坐标 本地坐标是一个相对坐标,是相对于父节点或者你指明的某个节点的相对位置来说的,本地坐标的原点在参考节点的左下角 世界坐标是一个绝对的坐标,是以屏幕的左下角为坐标原点,与GL坐标是重合的. 3.Ui坐标与GL坐标和Node坐标 UI坐标是以UI坐标系来计算的,又叫屏幕坐标,y轴向下,在某些游戏中需要使用到屏幕坐标与GL坐标的转换 GL坐标即世界坐标,是一个绝对的坐标,y轴向上 Node坐标即节点坐标,又叫本地坐标,是一个相对的坐标,是以父节点,或者…
要求: 页面包含两个HTML元素:一个按钮,一个小方块 动画要求:点击按钮,小方块从页面坐标300,300,加速移动到0,0 相关知识点: jQuery动画方法animate easing参数的设置 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>实现页面元素加速动画效果</title> <styl…
1.客户区坐标位置  (相对于客户端视口,而无关浏览器缩放) clientX与clientY:表示事件发生时鼠标在视口的坐标,不包括页面滚动距离,因此不代表鼠标在页面上的位置. 2.页面坐标位置 pageX与pageY:包括页面滚动距离,代表鼠标在页面上的位置. 无滚动时,clientX==pageX,clientY==pageY 3.屏幕坐标位置 screenX与screenY:鼠标指针相对于整个屏幕的坐标位置 var div=document.getElementById("div"…
1.客户区坐标位置:clientX,clientY 鼠标相对于在当前页面可视范围左上角的位置 2.页面坐标位置:pageX,pageY 鼠标相对于页面左上角的位置(受滑动等影响,例如pageY=clientY+scrollTop) 3.屏幕坐标位置:screenX,screenY 鼠标相对于电脑左上角的位置(无视浏览器位置) 4.偏移坐标位置:offsetX,offsetY 鼠标相对于当前对象左上角的位置(比如说你用canvas写一个画图板,就要用这个位置)…
一 前言 在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况,但是这些属性和方法众多,全部熟练地记下来并非是一件易事,大多只能现查,耗费不少时间精力,于是便有了整理记录的想法,即加深了印象,又方便随时查阅. 二 window 对象 浏览器里面,window 对象(注意,w为小写)指当前的浏览器窗口. 它也是当前页面的顶层对象,即最高一层的对象,所有其他对象都是它的下属.一个变量如果未声明,那么默认就是顶层对象的属性. 摘自<阮一峰 JavaScript 教程> 位置大小属性 windo…
这段时间一直在苦心研究Flex,今天突然想,我们平时都是把swf放到网页中,怎么才能把网页嵌入到Flex中呢?我查了一些资料,然后经过自己的不懈努力,终于搞定. 为了方便,写了个嵌入HTML页面的代理IFrame组件,该组件封装了所有需要的Flex端代码,后面只要通过标签调用就OK了. IFrame.mxml文件如下: <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="…
经常在开发实际的应用程序中,需要用到图形绘制和打印程序.如何实现完整的精确打印和绘图是需要注意许多细节地方的.最近在遇到打印问题的时候,仔细研究一阵,总结这篇博文,写得有点杂乱,看文要还请费点神. 基本功能:窗体绘图与鼠标交互  打印预览与打印输出 开发平台:VisualStudio 2010 (C#) 1绘图坐标系统 1.1绘图系统坐标转换(屏幕窗口/打印机) 绘图程序涉及到多种坐标系统,总体上可分为三个坐标系:世界坐标系.页面坐标系以及设备坐标系.想要将图形图像会知道最终的设备上,中间需要做…
经常在开发实际的应用程序中,需要用到图形绘制和打印程序.如何实现完整的精确打印和绘图是需要注意许多细节地方的.最近在遇到打印问题的时候,仔细研究一阵,总结这篇博文,写得有点杂乱,看文要还请费点神. 基本功能:窗体绘图与鼠标交互 打印预览与打印输出 开发平台:VisualStudio 2010 (C#) 1绘图坐标系统 1.1绘图系统坐标转换(屏幕窗口/打印机) 绘图程序涉及到多种坐标系统,总体上可分为三个坐标系:世界坐标系.页面坐标系以及设备坐标系.想要将图形图像会知道最终的设备上,中间需要做各…
世界坐标:相对于winform窗体来说的, 页面坐标:相对于控件的 设置坐标:相对于显示器 获得Graphics对象一般有两种方式: 1.控件.CreateGraphics();//通过该方式创建后要调用g.Dispose()方法释放资源. 2.在重写OnPaint()方法中通过参数PaintEventArgs e.Graphics;来获得,一般使用为Paint事件中.//通过这种方式一般不需要手动调用Dispose(); 什么样类型的对象需要使用完成后Dispose()?答:Pen,Brush…
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码随然不难,不过要能想到这个创意,并成功应用却很难! 另外,对于初学者,这也是不错的学习例子.含Jquery插件写法,css3等 英文教程:http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/源码下载:http://tympanus.net…
操作dom 主要是Ext.element,主要是简单的操作 Ext.dom.CompositeElement // 操作dom集合 ps:Extjs 使用字面量{} 形式,不支持链式操作 一.获取元素(Getting Elements) 1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById('myElementId');//会缓存 2. Ext.fly var el = Ext.fly('myEle…
js复习-01---03 一 JS简介 1,文档对象模型 2,浏览器对象模型 二 在HTML中使用JS 1,在html中使用<script></script>标签 2,引入外部JS文件 三,JS基本概念 1,ECMAScript中的一切(变量,函数名,操作符)都区分大小写,函数名不能用关键字 2,ECMAScript变量是松散型的,松散型:可以用来保存任何值 3,全局变量和局部变量(var) 4,数据类型:ECMAScript有5种简单的数据类型(基本数据类型):undefined…
每次用到诸如client,screen,offset等,虽然通常都是能用对的,但是总觉得不是那么的自信没错.所以整理一下可以再需要的时候来查阅. 一:clientX和clientY,screenX和screenY: 可见:正如字面所讲,screen是鼠标相对屏幕坐标,但screenY取不到客户区以外的值,而client是相对于客户区的. 二:页面坐标位置(page):pageX和pageY: 注:此图滚动条没有画出: pageX和pageY是相对于文档流的,包含scroll值,所以,在第一屏下,…
      js的初步了解     1.就是用来修改样式的,修改的是行内样式.任何样式都能够修改.     2.css里面怎么写js就怎么写.     3.任何元素都能加事件:事件都要小写 js的三大组成部分: 1.ECMAScript--核心解释器,把js代码转换成计算机可以读懂的语言 2.DOM--Document  object model 文档对象模型           增删改查文档节点 3.BOM--browser object model 浏览器对象模型           完全不…
有时候,我们需要得到窗口拖动或者鼠标移动的距离,此时可以通过计算鼠标前后在页面中的位置来得到想要的结果,下面介绍几个事件属性: 1.客户区坐标位置 鼠标事件都是在浏览器视口中的特定位置上发生的.这个位置信息保存在事件对象的 clientX 和 clientY 属性中.它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标(不包括页面滚动的距离).如下图所示: var div = document.getElementById("myDiv"); //获取元素 EventUtil.on(…
三个月前曾写过一篇跨终端响应式页面设计入门的博客,上了博客园头条也得到了不少关注,今天想在这篇博客的基础上,继续写一篇进阶的文章. 补充 基于“入门”一文,我想再补充几个基础知识点,主要都是针对iOS的meta标签: ⑴ 允许全屏浏览页面的标签: <meta name="apple-mobile-web-app-capable" content="yes" /> ⑵ safari顶端状态栏样式定义/隐藏: <meta name="appl…
JavaScript事件类型 Web浏览器中可能发生的事件有很多类型.这里我将主要将下面几种常用的事件类型: UI事件 焦点事件 鼠标与滚轮事件 键盘与文本事件 复合事件 变动事件 HTML5事件 设备事件 触摸与手势事件 第一部分:UI事件 UI事件中UI即(User Interface,用户界面),当用户与页面桑拿的元素交互时触发. UI事件中主要包括load,unload,abort,error,select,resize,scroll事件. 1.load事件 此事件为当页面完全加载完之后…
   事件流 事件流描述的是从页面中接收事件的顺序,IE和Netscape提出来差不多完全相反的事件流的概念,IE事件流是事件冒泡流,Netscape事件流是事件捕获流. 事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然后逐级向上(一直到文档):如下代码: <div id = "div"> <span id="span"> <a id="aTag">事件测试&l…
一.事件流 事件流指从页面中接收事件的顺序. 1.事件冒泡(常用) IE中采用的事件流是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素. 2.事件捕获(少用) Netscapte采用事件捕获,先由不具体的元素接收事件,最具体的节点最后才接收到事件. 3.DOM事件流 DOM2级事件包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段. 二.事件处理程序 事件处理程序就是响应某些事件的函数,如onclick等. 1. DOM0级事件处理程序 每个元素都有自己的事件处理程序属性,如o…
一.在线DEMO 界面拖拽交互…
本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本文后的文字引用和图片引用均来自<JavaScript高级程序设计>,引用稍有改变原文,不改变意思. 本文仅作巩固基础之用,如果有不正确的地方,还望指出. 更好的排版可以点这里 事件 个人认为:不论是浏览器自带的事件,还是自定义事件,都是观察者模式的实现.更确切地说:事件流是会流动的,流到哪个节点,…
Write less, do more, I like jQuery. jQuery是最常用的js库,整体来说非常轻量并易于扩展,对于移动应用可以使用其更轻量的孪生兄弟Zepto代替.其是由John Resig于2006创建的开源项目,极大的简化了javascript开发人员遍历HTML文档.操作DOM.处理事件.开发Ajax等操作,最有特色的形式是$(document).ready(function() {});其省略形式为:$(function() {});. 在使用jQuery时,需要注意…