摘要： SVG中DOM元素的偏移与缩放都是基于SVG元素的左上角，所以如何理解与计算SVG中元素的真实位置就比较难，下面的例子都以圆(circle)为例。 1.缩放假定缩放的比例为s，执行缩放后，圆的圆心坐标由(cx, cy)变为(cx * s, cy * s) 2. 偏移假定偏移的距离为(x1, y1), 阅读全文

摘要： 近期在做svg相关项目，很好用的东西要记下来： 1、基础知识就是根据 矩阵进行坐标转换，如下： ： 屏幕坐标 = 矩阵* svg对象坐标 2、javascript有个方法用于获取 svg对象 的转换矩阵CTM ：svgObj.getScreenCTM(); 该矩阵将svg坐标转换为屏幕坐标 3、所以 阅读全文

摘要： 一个应用场景是，点击一条路径，显示该路径的控制点。因为有transform变形( 平移、缩放、倾斜、旋转等变换)，所以获取变形后的新坐标需要计算。 纯数学的方法，就是用2D变换矩阵的一些公式去运算，过程稍微有点复杂。 不过好在SVG已经提供了丰富的API将一些矩阵运算封装了，非常实用，下面是Demo 阅读全文

摘要： var clientRects = svg.select("image").node().getBoundingClientRect(); var coordinates = [ [clientRects.left, clientRects.top], [clientRects.top, clien 阅读全文

摘要： 1. 问题的出现 对于普通的HTML元素，有很多获得其宽度width、高度height、距左left、距顶top等属性的方法： 类似offsetWidth，clientWidth,width之类的，通过查看DOM元素的属性可以一探究竟： 然而当遇到SVG的g标签的时候，却碰到问题了：明明在开发者工具 阅读全文

摘要： 前言threejs官网：https://threejs.org/ github各个版本：https://github.com/mrdoob/three.js/tags 版本更迭很快，我用的时候还是r90秒秒钟r91出来了 刚入门的时候可以看看这个教程：http://www.hewebgl.com/a 阅读全文

摘要： 红色代表需要改写的代码 1.添加定义图像大小和容器的大小及坐标 d3.behavior.zoom = function () { var moveCanvas={ width: 0, height: 0, cx:0,cy:0,cwidth:0,cheight:0 }; var view = { x: 阅读全文

摘要： 当我们使用鼠标操作three.js渲染出的对象时，不仅仅只是仅限用鼠标对场景的放大、缩小、旋转而已，还有鼠标左键、右键的点击以及键盘各种按键等等的事件。我们需要捕获这些事件，并在这些事件的方法里进行相关的操作。 接下来是干货 在【three.js第六课】的基础上，对代码进行整理后。得到本次试验的源码 阅读全文

摘要： 1.在【three.js第五课】的基础上引入AnaglyphEffect.js文件。 文件路径： three源码包中进入【examples】文件夹； 进入【js】文件夹； 进入【effects】文件夹中即可看到AnaglyphEffect.js文件 我的引入如下： <script src="../e 阅读全文

摘要： 材料分类： MeshBasicMaterial：基础网孔材料，一个以简单着色（平面或线框）方式来绘制几何形状的材料。MeshLambertMaterial：兰伯特网孔材料，一种非发光材料（兰伯特）的表面MeshPhongMaterial：网孔材料，用于表面有光泽的材料，计算每个像素。 光线分类 注意 阅读全文