问题描述

在图片上画框标注数字,旋转画布后,数字随之旋转,可读性不强,要求修改成无论画布怎么旋转,数字都是正向显示~ 原交互图示:

解决方案

先看下 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 的 transformrotate的属性就实现了~

2、看上面的代码是不是感觉跟我们熟悉的CSS中的rotate有所不同呢?是的,SVG的rotate(angle [x y])比CSS 的rotate(angle)多了2个可选参数[x, y],这是实现本交互的关键点,它们主要是用来偏移 transform 变化中心点的, SVG的旋转不是按自身旋转的,而是以画布的左上角为中心的。

具体的基础属性的理解我觉得这篇文章写的比较透彻,可以看看 理解SVG transform坐标变换

使用 SVG transform rotate 解决画框中的数字跟随旋转的问题的更多相关文章

  1. transform:rotate()将元素进行不同角度的旋转

    通过设置transform:rotate()可以将元素进行不同角度的旋转: 下面是一些测试代码: <!DOCTYPE html> <html> <head> < ...

  2. 解决java中按照数字大小来排序文件

    我们想要输出(1.jpg.2.jpg.3.jpg.10.jpg.11.jpg.20.jpg.21.jpg.31.jpg) 突然看到网上一些写法 总结:既然自己按照定义的文件名规则来处理,也可以进行使用 ...

  3. transform:rotate在手机上显示有锯齿的解决方案大全

    先来个兼容性说明,洗洗脑: div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate ...

  4. transform:rotate在手机上显示有锯齿的解决方案

    transform:rotate 属于简单好用的效果,但在手机上显示时,会有比较明显锯齿. 解决方案也很简单, 利用外层容器的overflow:hidden 加上图片margin:-1px 就可以解决 ...

  5. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

  6. 元素transform: rotate()之后,元素宽高该怎么计算?

    通常,利用transform: rotate()元素之后,我们并不会去在意元素大小的变化,因为看上去并没有什么变化.虽然看上去没有变化,其实是有变化的.下面用一个例子来说明一下. html: < ...

  7. 在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理

    CSS3中的变形处理(transform)属 transform的功能分类 1.旋转 transform:rotate(45deg); 该语句使div元素顺时针旋转45度.deg是CSS 3的“Val ...

  8. Unity使用transform.Rotate进行三维旋转角度出现偏差

    Unity使用transform.Rotate进行三维旋转角度出现偏差 情形 最开始遇到该问题的情况比较复杂,另写了一个例子.情形如下: 一个立方体上挂载脚本: transform.Rotate(25 ...

  9. iOS 解决LaunchScreen中图片加载黑屏问题

    iOS 解决LaunchScreen中图片加载黑屏问题 原文: http://blog.csdn.net/chengkaizone/article/details/50478045 iOS 解决Lau ...

随机推荐

  1. 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 ...

  2. Codeforces Round #646 (Div. 2) E. Tree Shuffling dfs

    题意: 给你n个节点,这n个节点构成了一颗以1为树根的树.每一个节点有一个初始值bi,从任意节点 i 的子树中选择任意k个节点,并按他的意愿随机排列这些节点中的数字,从而产生k⋅ai 的成本.对于一个 ...

  3. Atcoder ABC155_C中有关c++ STL map的用法

    题目:https://atcoder.jp/contests/abc155/tasks/abc155_c 这道题的题意是给我们n个string,让我们统计每个string出现的次数,并输出次数最多的一 ...

  4. xml——dom&sax解析、DTD&schema约束

    dom解析实例: 优点:增删改查一些元素等东西方便 缺点:内存消耗太大,如果文档太大,可能会导致内存溢出 sax解析: 优点:内存压力小 缺点:增删改比较复杂 当我们运行的java程序需要的内存比较大 ...

  5. Codeforces Round #671 (Div. 2) B. Stairs (递推)

    题意:一个台阶由一些单元格组成,如果一个高度为\(n\)的台阶中有\(n\)个不相邻的正方形(如图中的样例),就称这个台阶是"好台阶",现给你\(x\)个单元格,问最多能组成多少个 ...

  6. win10 远程桌面 ubuntu

    一.获取本机ip 通过ip查询网址来查询本机外网地址 二.下载远程链接软件 下载向日葵,注册账号 三.远程链接 将连接端与被连接端分别绑定账号,输入相应ip地址,即可连接.

  7. k8s-0-集群

    Docker回顾 docker容器封装应用程序好处 内核在3.8以上,才能完整使用docker隔离功能(所有centos6不推荐用) Docker容器化封装应用程序缺点 容器编排工具有哪些 一: K8 ...

  8. 牛客网多校第4场 A.Ternary String 【欧拉降幂】

    题目:戳这里 学习博客:戳这里 欧拉函数的性质: ① N是不为0的整数.φ(1)=1(唯一和1互质的数就是1本身) ② 除了N=2,φ(N)都是偶数. ③ 小于N且与N互质的所有数的和是φ(n)*n/ ...

  9. css position sticky All In One

    css position sticky All In One css sticky & 吸顶效果 demo https://codepen.io/xgqfrms/pen/PoqyVYz ref ...

  10. ESLint error level

    ESLint error level https://eslint.org/docs/user-guide/getting-started#configuration .eslintrc { &quo ...