2020 年 3月 12 日随笔档案 - dawn888

Vue + d3.js实现在地图上选点

摘要：需求：用户在地图上单击选点，页面获取到具体坐标并返回。首先比较重要的是Vue中的$nextTick，因为vue是异步更新的，如果是想打开Dialog或者是其他操作dom后才加载地图，使用nextTick可以保证在dom加载之后进行加载。 this.$nextTick(() => { this.lo 阅读全文

posted @ 2020-03-12 23:23 dawn888 阅读(1548) 评论(0) 推荐(0) 编辑

vue中使用SVG实现鼠标点击绘图提示鼠标移动位置显示绘制坐标位置

摘要： <div class="div1"> <svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="500px"> </svg> </div> methods:{ svgLoad(){ var ming = 'http: 阅读全文

posted @ 2020-03-12 23:11 dawn888 阅读(1837) 评论(0) 推荐(0) 编辑

D3平移和缩放后的点击坐标(D3 click coordinates after pan and zoom)

摘要：我使用D3库来创建绘图应用程序。我需要在用户单击的坐标上绘制对象（为了简单起见）。问题是当用户使用平移&缩放和移动视口。然后对象是错误的位置的地方（我想问题是事件坐标是相对于svg元素而不是g，所以他们是计算没有适当的转换）。 < pre> $（'svg'）。on（'click'，function 阅读全文

posted @ 2020-03-12 22:48 dawn888 阅读(662) 评论(0) 推荐(0) 编辑

svg如何设置中心点进行缩放

摘要：中心点设置：x = x+width/2 y=y+height/2缩放开始前后需要变换对应的位置，直接举例：<rect x="110" y="100" width="120" height="90" data-svg="gltransform_tcwanimate" transform="transl 阅读全文

posted @ 2020-03-12 22:36 dawn888 阅读(1993) 评论(0) 推荐(0) 编辑

SVG案例：动态去创建元素createElementNS

摘要：案例一： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ background:#000; } #demo1{ width:780px; height 阅读全文

posted @ 2020-03-12 22:20 dawn888 阅读(2698) 评论(0) 推荐(1) 编辑

SVG 案例：动态去创建分支节点，当鼠标经过某个节点时，分支线会高亮

摘要： css: <style> #div1{ width:780px; height:400px; background:#fff; margin:20px auto; overflow:hidden;} body{ background:black;} </style> html: <div id="d 阅读全文

posted @ 2020-03-12 22:12 dawn888 阅读(364) 评论(0) 推荐(0) 编辑

理解SVG坐标系和变换：视窗,viewBox和preserveAspectRatio

摘要： SVG元素不像HTML元素一样由CSS盒模型管理。这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观。然而，一旦你理解了SVG坐标系和变换，操纵SVG会非常简单并且很有意义。本篇文章中我们将讨论控制SVG坐标系的最重要的三个属性：viewport， viewBox，和 preserv 阅读全文

posted @ 2020-03-12 21:35 dawn888 阅读(629) 评论(0) 推荐(0) 编辑

理解SVG坐标系统和变换：建立新视窗

摘要：在SVG绘制的任何一个时刻，你可以通过嵌套<svg>或者使用例如<symbol>的元素来建立新的viewport和用户坐标系。在这篇文章中，我们将看一下我们如何这样做，以及这样做如何帮助我们控制SVG元素并让它们变得更加灵活（或流动）。这是SVG坐标系和变换系列的第三篇也是最后一篇文章。在第一篇中阅读全文

posted @ 2020-03-12 21:34 dawn888 阅读(319) 评论(0) 推荐(0) 编辑

理解SVG坐标系统和变换： transform属性

摘要： SVG元素可以通过缩放，移动，倾斜和旋转来变换-类似HTML元素使用CSS transform来变换。然而，当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性，包括如何使用，以及你必须知道的关于SVG坐标系变换的知识。这是我写的SVG 阅读全文

posted @ 2020-03-12 21:32 dawn888 阅读(810) 评论(0) 推荐(0) 编辑

在svg文间画图过程中放大缩小图片后，坐标偏移问题

摘要： //鼠标坐标：在SVG经过缩放、偏移、ViewBox转换后，鼠标坐标值 var mouseCoord = { x : 0., y : 0. }; //用户坐标：相对于原始SVG,坐标位置 var userCoord = { x : 0., y : 0. }; var cRadius = 4.; // 阅读全文

posted @ 2020-03-12 21:29 dawn888 阅读(1349) 评论(0) 推荐(0) 编辑

理解SVG的缩放偏移的计算公式

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

posted @ 2020-03-12 21:23 dawn888 阅读(997) 评论(0) 推荐(0) 编辑

svg 实践之屏幕坐标与svg元素坐标转换

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

posted @ 2020-03-12 21:19 dawn888 阅读(1557) 评论(0) 推荐(0) 编辑

使用SVG内置API计算图形或点经过transform之后的新坐标

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

posted @ 2020-03-12 21:17 dawn888 阅读(806) 评论(0) 推荐(0) 编辑

D3js怎么获得SVG及其子元素在屏幕中的坐标

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

posted @ 2020-03-12 21:13 dawn888 阅读(1125) 评论(0) 推荐(0) 编辑

获取SVG中g标签的宽度高度及位置坐标

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

posted @ 2020-03-12 21:09 dawn888 阅读(1501) 评论(0) 推荐(0) 编辑

Threejs从入门到入门

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

posted @ 2020-03-12 08:55 dawn888 阅读(3214) 评论(1) 推荐(0) 编辑

dawn888