svg
yanhappyYY
深自缄默,如云淡薄。
展开
-
网页版本示波器校准
后台数据为STM32/FPGA芯片采集的实时数据,通过webscoket与前端通信,网页已实现示波器功能有幅度/时基调节,FFT、MATH、眼图、星落图等功能。后台传输数据为0-255 表示0-3.3V共4个通道4096条数据,每个通道为1024条数据前端展示为横向/纵向都为1024点数据,d3.scale.linear()函数绘制。1V表示一格,X轴每格为1024/10个点,Y轴每格1024/8个点...原创 2021-08-20 11:22:37 · 604 阅读 · 4 评论 -
从html拖拽到svg区域的实现方案 - 2(鼠标穿透优化)
上一篇从html拖拽到svg区域的实现方案 虽然能实现拖动放入功能,主要因为有一个偏移,即鼠标光标不在被拖动元素的中心。 cursorAt: { left: -2 }, // jquery draggable 属性最终解决方案:拖动元素过程中新增CSS代码,鼠标穿透 .ui-draggable-dragging { pointer-events: none; }pointer-events MDN文档...原创 2021-05-10 09:12:55 · 174 阅读 · 0 评论 -
输入起点和终点,生成贝塞尔曲线
方法如下:var Bezier = function(sx,sy,ex,ey){ return `M${sx} ${sy}Q${sx} ${sy-30},${(sx+ex)/2} ${(sy+ey)/2}T${ex},${ey}`}console.log(Bezier(20,60,120,60));// M20 60Q20 30,70 60T120,60放在svg的path路径中效...原创 2020-03-07 14:31:06 · 948 阅读 · 0 评论 -
svg 组件用法 -- defs标签使用
案例在svg中关于图形的复用,是通过标签defs来解决的。举个例子:在图形中红色圆圈 ● 还有黄色圆圈 ● 都是复用的元素。结构都是一样的,只是颜色和位置的差别。解决方案defs: 被引用元素的容器 – 这很好理解相当于vue中的componentg: group缩写 无实意。相关元素整合的容器 < id作为该的唯一标识 >组件引用use: 使用url引...原创 2019-01-25 15:10:08 · 15724 阅读 · 0 评论 -
获取svg use标签内的元素
先讲结论:我查阅了文档,暂时也没有方法可以获取到&lt;use&gt;标签内的元素。我试图使用$("#useId").find("#contentId").attr(“attr”) – 无效$("#contentId").attr(“attr”) – 未达到预期,选中defs内组件$("#shadow-root"原创 2019-01-25 18:03:34 · 6108 阅读 · 3 评论 -
svg页面自适应以及自适应后鼠标点击偏移量计算 -- viewBox/preserveaspectratio
之前svg页面都是固定宽高的,最近升级自适应svg,遇到了下面的坑。svg页面自适应<svg style="width:150px; height:300px" viewBox="0 0 400 400"> <circle cx="200" cy="200" r="200" fill="#fdd" stroke="none"></circle>&l...原创 2019-04-02 15:11:48 · 1271 阅读 · 0 评论