Fork me on Bolg '◡'
摘要: 最近在实现一个需求,需要改造echarts的折线图,在其基础上实现点的拖拽及点击操作,效果如下: 实现方案 拖拽点 这个方法网上有说,原理:就是在折线的点位置上新增对应的拖拽点,并把拖拽点覆盖在原点上面,设置其visible为false,做到以假乱真的效果。 // 初始化echarts let si 阅读全文
posted @ 2022-07-29 17:14 webhmy 阅读(75) 评论(0) 推荐(0) 编辑
摘要: 最近新写一个项目,记录下新建项目过程及坑处理。供新人查看~ 1 搭建脚手架 cnpm install @vue/cli -g vue create test 2 加入eslint 在package.json中加入rules,具体的rules配置从这里找(https://www.cnblogs.com 阅读全文
posted @ 2022-07-11 19:50 webhmy 阅读(21) 评论(0) 推荐(0) 编辑
摘要: css中带了很多浏览器已经支持的鼠标样式,很多时候需要换成自己定义的图片。 最好使用32*32图片,ico格式,当前也有其他格式,最好设置支持跨平台的格式,不同浏览器支持的格式不统一,png等其他的格式是可以转为ico格式 设置对齐点 cursor: url("../lib/leaflet/imag 阅读全文
posted @ 2022-07-08 19:16 webhmy 阅读(29) 评论(0) 推荐(0) 编辑
摘要: 最近接到一拖拽交互操作,开始的时候就想着传统的mouseUp,mouseDown,mouseMove之类的方法。但是偶然看到H5的draggable属性,觉得更香啊!先看下实现的效果。 如图所示的场景就很适合使用该API,拖拽的过程中鼠标还带着对应的元素样式。 draggable="true" 设置 阅读全文
posted @ 2022-04-18 15:48 webhmy 阅读(88) 评论(0) 推荐(0) 编辑
摘要: 3月在部门组织了一场关于SVG的培训,把没有分享到博客的资料放到博文上吧,因为PPT写过了,就截图放上了,比较懒,懒得再打字了,嘿嘿~ 1. 线性变换属性 2. dom转SVG的坐标点 核心代码 document.addEventListener('click', (e) => { let x = 阅读全文
posted @ 2022-04-06 10:20 webhmy 阅读(32) 评论(0) 推荐(1) 编辑
摘要: 我们在写vue组件的时候,如果在一个组件里引入多个组件,一般的写法是这样的 完全没毛病,但是这样的写法就有点累赘,每次新增一个组件又要添加多处,原来现在已经有更方便的写法了,实践了一下,非常nice const routes = {}; const contexts = require.contex 阅读全文
posted @ 2022-03-04 18:35 webhmy 阅读(96) 评论(1) 推荐(0) 编辑
摘要: 本周更新的需求是物体上显示文字信息,效果图如下: 加载字体 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'; const loader = new FontLoader(); loader.load('/en 阅读全文
posted @ 2022-03-03 14:43 webhmy 阅读(737) 评论(0) 推荐(0) 编辑
摘要: 在项目中使用scale的时候遇到一个场景:需要对一个指定的元素进行缩放,但同时又要保持其的相对的位置不变,这个时候就需要使用到CSS中的scale跟translate了。 比如,我有一个300*400的元素(并且该元素不支持使用width跟height) 此时我需要对其进行放大,比如我们需要对其放大 阅读全文
posted @ 2022-02-19 13:30 webhmy 阅读(362) 评论(0) 推荐(0) 编辑
摘要: 本文主要记录使用Three.js过程中使用的常用方法: 1. 修改颜色 setStyle 找到物体对应的material,调用方法: material.color.setStyle('#ca14cb'); // 设置成紫色,支持css颜色值 2. 空值物体的可见 visible material.v 阅读全文
posted @ 2022-01-18 20:09 webhmy 阅读(480) 评论(0) 推荐(0) 编辑
摘要: 使用Three.js绘制立方体是最基本的功能,我们可以使用new THREE.BoxGeometry(width, height, depth)根据长、宽、高等信息直接绘制,也可以根据点的信息进行绘制。而根据点的信息进行绘制这个功能,由于Three.js版本的升级,以及给其中的面设置不同的颜色,我发 阅读全文
posted @ 2022-01-18 20:00 webhmy 阅读(262) 评论(0) 推荐(0) 编辑