使用 SVG transform rotate 解决画框中的数字跟随旋转的问题
问题描述
在图片上画框标注数字,旋转画布后,数字随之旋转,可读性不强,要求修改成无论画布怎么旋转,数字都是正向显示~ 原交互图示:
解决方案
先看下 dom 的结构
然后看下下面简单的代码
// 获取画框的
let rectNode = SVG.get(id) ? SVG.get(id) : null;
// 获取文本的节点
let textNode = SVG.get(id + '-text') ? SVG.get(id + '-text') : null;
if (rectNode && textNode) {
let rectWidth = rectNode.width()
let rectHeight = rectNode.height();
let textX = textNode.x();
let textY = textNode.y();
let transform = '';
// 我这里是顺时针旋转的
switch (rotateDeg) {
case '90':
transform = `rotate(270, ${rectHeight / 2 + textX}, ${rectHeight / 2 + textY})`;
break;
case '180':
transform = `rotate(180, ${rectWidth / 2 + textX}, ${rectHeight / 2 + textY})`;
break;
case '270':
transform = `rotate(90, ${rectWidth / 2 + textX}, ${rectWidth / 2 + textY})`;
break;
default:
break
}
textNode.attr('transform', transform);
}
交互结果:
完美~
知识点
1、直接使用了SVG 的 transform
的 rotate
的属性就实现了~
2、看上面的代码是不是感觉跟我们熟悉的CSS中的rotate有所不同呢?是的,SVG的rotate(angle [x y])
比CSS 的rotate(angle)
多了2个可选参数[x, y]
,这是实现本交互的关键点,它们主要是用来偏移 transform
变化中心点的, SVG的旋转不是按自身旋转的,而是以画布的左上角为中心的。
具体的基础属性的理解我觉得这篇文章写的比较透彻,可以看看 理解SVG transform坐标变换
使用 SVG transform rotate 解决画框中的数字跟随旋转的问题的更多相关文章
- transform:rotate()将元素进行不同角度的旋转
通过设置transform:rotate()可以将元素进行不同角度的旋转: 下面是一些测试代码: <!DOCTYPE html> <html> <head> < ...
- 解决java中按照数字大小来排序文件
我们想要输出(1.jpg.2.jpg.3.jpg.10.jpg.11.jpg.20.jpg.21.jpg.31.jpg) 突然看到网上一些写法 总结:既然自己按照定义的文件名规则来处理,也可以进行使用 ...
- transform:rotate在手机上显示有锯齿的解决方案大全
先来个兼容性说明,洗洗脑: div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate ...
- transform:rotate在手机上显示有锯齿的解决方案
transform:rotate 属于简单好用的效果,但在手机上显示时,会有比较明显锯齿. 解决方案也很简单, 利用外层容器的overflow:hidden 加上图片margin:-1px 就可以解决 ...
- 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的
这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...
- 元素transform: rotate()之后,元素宽高该怎么计算?
通常,利用transform: rotate()元素之后,我们并不会去在意元素大小的变化,因为看上去并没有什么变化.虽然看上去没有变化,其实是有变化的.下面用一个例子来说明一下. html: < ...
- 在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理
CSS3中的变形处理(transform)属 transform的功能分类 1.旋转 transform:rotate(45deg); 该语句使div元素顺时针旋转45度.deg是CSS 3的“Val ...
- Unity使用transform.Rotate进行三维旋转角度出现偏差
Unity使用transform.Rotate进行三维旋转角度出现偏差 情形 最开始遇到该问题的情况比较复杂,另写了一个例子.情形如下: 一个立方体上挂载脚本: transform.Rotate(25 ...
- iOS 解决LaunchScreen中图片加载黑屏问题
iOS 解决LaunchScreen中图片加载黑屏问题 原文: http://blog.csdn.net/chengkaizone/article/details/50478045 iOS 解决Lau ...
随机推荐
- Codeforces Round #345 (Div. 1) C. Table Compression (并查集)
Little Petya is now fond of data compression algorithms. He has already studied gz, bz, zip algorith ...
- Codeforces Round #646 (Div. 2) E. Tree Shuffling dfs
题意: 给你n个节点,这n个节点构成了一颗以1为树根的树.每一个节点有一个初始值bi,从任意节点 i 的子树中选择任意k个节点,并按他的意愿随机排列这些节点中的数字,从而产生k⋅ai 的成本.对于一个 ...
- Atcoder ABC155_C中有关c++ STL map的用法
题目:https://atcoder.jp/contests/abc155/tasks/abc155_c 这道题的题意是给我们n个string,让我们统计每个string出现的次数,并输出次数最多的一 ...
- xml——dom&sax解析、DTD&schema约束
dom解析实例: 优点:增删改查一些元素等东西方便 缺点:内存消耗太大,如果文档太大,可能会导致内存溢出 sax解析: 优点:内存压力小 缺点:增删改比较复杂 当我们运行的java程序需要的内存比较大 ...
- Codeforces Round #671 (Div. 2) B. Stairs (递推)
题意:一个台阶由一些单元格组成,如果一个高度为\(n\)的台阶中有\(n\)个不相邻的正方形(如图中的样例),就称这个台阶是"好台阶",现给你\(x\)个单元格,问最多能组成多少个 ...
- win10 远程桌面 ubuntu
一.获取本机ip 通过ip查询网址来查询本机外网地址 二.下载远程链接软件 下载向日葵,注册账号 三.远程链接 将连接端与被连接端分别绑定账号,输入相应ip地址,即可连接.
- k8s-0-集群
Docker回顾 docker容器封装应用程序好处 内核在3.8以上,才能完整使用docker隔离功能(所有centos6不推荐用) Docker容器化封装应用程序缺点 容器编排工具有哪些 一: K8 ...
- 牛客网多校第4场 A.Ternary String 【欧拉降幂】
题目:戳这里 学习博客:戳这里 欧拉函数的性质: ① N是不为0的整数.φ(1)=1(唯一和1互质的数就是1本身) ② 除了N=2,φ(N)都是偶数. ③ 小于N且与N互质的所有数的和是φ(n)*n/ ...
- css position sticky All In One
css position sticky All In One css sticky & 吸顶效果 demo https://codepen.io/xgqfrms/pen/PoqyVYz ref ...
- ESLint error level
ESLint error level https://eslint.org/docs/user-guide/getting-started#configuration .eslintrc { &quo ...