9 影子丝汀

尚未进行身份认证

暂无相关描述

等级
博文 54
排名 5w+

cesium中定位方法使用

cesium中定位到位置在cesium中viewer.flyTo和Camera.flyTo的区别挺大,我们通常会用camera来定位,但当需要加上一个倾斜角的时候,可能定位的结果就和预想的区别很大需求:矩形的中心点位置(110.0,35.8)为想要定位的中心点位置,相机倾斜25度,相机距离中心点的位置为5000定位到点viewer.flyTo定位结果function...

2018-07-25 18:44:47

cesium 地形未加载完成前地形下钻问题解决

cesium地形未加载完成前地形下钻问题解决问题描述在设置了scene.screenSpaceCameraController.minimumZoomDistance=100;之后,在地形还在加载的过程中旋转地球,依然会出现上述问题。解决方案监控相机的pitch值pitch>0的时候就禁止地球旋转事件监控鼠标滚轮按下的鼠标移动事件当鼠标朝下移的时候就...

2018-07-02 14:56:32

cesium原理篇(三)--地形(1)

转自:http://www.cnblogs.com/fuckgiser/p/5824743.html简述前面我们从宏观上分析了Cesium的整体调度以及网格方面的内容,通过前两篇,读者应该可以比较清楚的明白一个Tile是怎么来的吧(如果还不明白全是我的错)。接下来,在前两篇的基础上,我们着重讨论一下地形相关的内容。Cesium提供了TerrainProvider基类,该Provider负责每一个T

2016-10-25 16:30:05

cesium原理篇(二)--网格划分

转自:http://www.cnblogs.com/fuckgiser/p/5772077.html上一篇我们从宏观上介绍了Cesium的渲染过程,本章延续上一章的内容,详细介绍一下Cesium网格划分的一些细节,包括如下几个方面:流程Tile四叉树的构建LOD流程首先,通过上篇的类关系描述,我们可以看到,整个调度主要是update和endFrame两个函数中,前者分工,后者干活。另外

2016-10-25 16:00:06

cesuim原理篇(一)--渲染调度

转自:http://www.cnblogs.com/fuckgiser/p/5744509.html原计划开始着手地形系列,但发现如果想要从逻辑上彻底了解地形相关的细节,那还是需要了解Cesium的数据调度过程,这样才能更好的理解,因此,打算先整体介绍一下Cesium的渲染过程,然后在过渡到其中的两个主要模块:地形数据和影像数据。简述设想一下,印度洋的暖流,穿过喜马拉雅山,形成了滴一滴水,落在了青

2016-10-25 15:18:50

HTML5之Canvas 2D入门5 - 事件与动画

Canvas&SVG&DOM  Canvas与SVG都是2D绘图的利器,除此之外,使用CSS、DOM也可以实现某些性状的绘制,而且在动画中,也都可以使用这些技术实现动画效果。这里就简单比较一下这些技术。•canvas:canvas是以画像素的形式画出图形,它没有shape和vector的概念。所以就没有对象去接受事件,它只是去绘制像素点。这是缺点,也是优点。•SVG:SVG是基于v

2016-08-31 15:39:42

HTML5之Canvas 2D入门4 - 直接操作像素

前面的例子都是使用图片或者图形来绘图,这是相对高级的API,而且所有的操作和变换都是针对“网格坐标系”的。除此之外,canvas还支持直接操作每个像素(全部的,或者部分的);毋庸置疑,这些操作是针对“像素坐标系”中的像素的,这些操作完全不受变换矩阵、阴影效果、全局透明度设置、裁剪路径、组合效果的影响,因为这些所有的效果都是针对“网格坐标系”的。操作完以后再放回canvas中,可以实现一些有趣的效果。

2016-08-31 14:52:10

HTML5之Canvas 2D入门3 - 变换与组合

知识准备-坐标系  在真正开始总结变换之前,我们需要先了解一下canvas的相关坐标系知识。“像素坐标系”:在HTML中,我们会设置canvas的属性:width和height,它们是以像素为单位的,它们描述了canvas最终的呈现区域,我形象称之为“像素坐标”(自创,不是很贴切,行家别见笑),这个坐标系原点在canvas的左上角,这个坐标系当canvas创建完成以后,就不会变了(当然了,修改w

2016-08-31 14:46:09

HTML5之Canvas 2D入门2 - Canvas绘制图形

canvas只支持一种基本形状——矩形,所有其它形状都是通过一个或多个路径组合而成,甚至是基本的矩形也可以通过路径组合成。一、设置画笔属性  设想我们生活中画图的样子,我们首先是选取合适的颜料和笔,一样的道理,在canvas中画图同样也是根据需要,不断的去设置当前使用的颜色和线条类型。设置当前使用的颜色  任何封闭的图形都是有轮廓部分和填充部分组成。设置当前的颜色也是分两部分设置:

2016-08-31 14:18:50

HTML5之Canvas 2D入门1 - Canvas绘制文本和图像

Canvas历史  canvas是一个新的HTML元素,这个元素可以被脚本语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做动画。canvas最先在苹果公司(Apple)的MacOSXDashboard上被引入,而后被应用于Safari。后面被采用成为HTML5标准规范的一部分。这个元素的引入带来了非同凡响的影响:从此,浏览器原生支持图形绘制与动画了。can

2016-08-31 11:44:38

HTML5之SVG 2D入门13 - svg对决canvas

到目前为止,SVG与Canvas的主要特性均已经总结完毕了。它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形。现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景。首先分析一下两种技术的显著特点,看下面的表格:CanvasSVG基于像素(动态.png)基于形状单个HTML元素多个图形元素,这些元素成为DOM的一部分仅通过

2016-08-31 10:51:41

HTML5之SVG 2D入门12 - SVG DOM

使用脚本可以很方便的完成各种复杂的任务,也是完成动画和交互的一种主流方式。由于SVG是html的元素,所以支持普通的DOM操作,又由于SVG本质上是xml文档,所以也有一种特殊的DOM操作,大多称之为SVGDOM。当然了,由于目前IE不支持SVG,开发基于IE的SVG页面需要采用不同的方式。这部分的知识大家其实都很熟悉,下面只是简单的看一下。HTML页面中的DOM操作DOM大家应该

2016-08-31 10:32:48

HTML5之SVG 2D入门11 - 动画

交互性SVG拥有良好的用户交互性,例如:SVG能响应大部分的DOM2事件。SVG能通过cursor良好的捕捉用户鼠标的移动。用户可以很方便的通过设置svg元素的zoomAndPan属性的值来实现缩放等效果。用户可以很方便的把动画和事件结合起来,完成一些复杂的效果。通过给SVG元素挂接事件,我们可以使用脚本语言方便的完成一些交互任务。SVG支持大部分的DOM2事件,例如:onfocusi

2016-08-31 10:06:02

HTML5之SVG 2D入门10 - 滤镜

滤镜称得上是SVG最强大的功能了,它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效。这样你就很容易在客户端生成和修改图像了。而且滤镜并没有破坏原有文档的结构,所以维护性也很好。滤镜用filter元素定义;需要使用的时候,在需要滤镜效果的图形或容器上添加filter属性,引用相关滤镜即可。滤镜元素包含很多的滤镜原子操作;每个原子操作在传入的对象上执行

2016-08-31 09:48:56

HTML5之SVG 2D入门9 - 蒙板

SVG支持的蒙板SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果。至于中文中把mask叫做”蒙板”还是”遮罩”就不去区分了,这里都叫做蒙板吧。SVG支持的蒙板类型:裁剪路径(clipingpath)裁剪路径是由path,text或者基本图形组成的图形。所有在裁剪路径内的图形都可见,所有在裁剪路径外的图形都不可见。遮罩/蒙板(mask)蒙板是一种容器,它定义了一组图形并将它们作

2016-08-30 18:44:21

HTML5之SVG 2D入门8 - 文档结构

前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性。SVG文档的元素基本可以分为以下几类:•动画元素:animate,animateColor,animateMotion,animateTransform,set;•解释元素:desc,metadata,title;•图形元素:circle

2016-08-30 18:20:26

HTML5之SVG 2D入门7 - 重用与引用

前面介绍了很多的图形元素,如果很多图形本身是一样的,需要每次都去定义一个新的么?我们能否共用一些图形呢?这是这节的重点-SVG元素的重用。组合-g元素g元素是一种容器,它组合一组相关的图形元素成为一个整体;这样,我们就可以对这个整体进行操作。这个元素通常可以和desc和title元素配合使用,提供文档的结构信息。结构良好的文档通常可读性和渲染效率都不错。看一个小例子:<svgxmlns=

2016-08-30 17:07:12

HTML5之SVG 2D入门6 - 坐标与变换

坐标系统  SVG存在两套坐标系统:视窗坐标系与用户坐标系。默认情况下,用户坐标系与视窗坐标系的点是一一对应的,都为原点在视窗的左上角,x轴水平向右,y轴竖直向下;如下图所示:SVG的视窗位置一般是由CSS指定,尺寸由SVG元素的属性width和height设置,但是如果SVG是存储在embedded对象中(例如object元素,或者其他SVG元素),而且包含SVG的文档是用CSS或者XSL

2016-08-30 16:36:49

HTML5之SVG 2D入门5 - 颜色的表示

SVG和canvas中是一样的,都是使用标准的HTML/CSS中的颜色表示方法,这些颜色都可以用于fill和stroke属性。基本有下面这些定义颜色的方式:1.颜色名字:直接使用颜色名字red,blue,black…2.rgba/rgb值:这个也很好理解,例如#ff0000,rgba(255,100,100,0.5)。3.十六进制值:用十六进制定义的颜色,例如#fff

2016-08-30 15:17:22

HTML5之SVG 2D入门4 - 笔画与填充

前面我们重点都在总结各类形状,文本和图片,接下来,我们还是和讨论canvas一样,总结一下颜色处理,也就是填充和边框效果;你会发现这里的内容与canvas基本上是一致的。这些属性既可以以属性的形式写在元素中,也可以以CSS的形式保存(这是与canvas不一样的地方)。填充色-fill属性  这个属性使用设置的颜色填充图形内部,使用很简单,直接把颜色值赋给这个属性就可以了。看例子:<rect

2016-08-30 11:59:27
奖章
    暂无奖章