raphael js,计算setViewBox宽度高度来修复窗口

2024-01-07

我的 div 内容画布的第一宽度:1300, 高度 =500

然后我将 div 大小调整为 width =800, 高度 =500

我将画布大小调整为宽度=800, 高度 =500修复窗户

但画布中的某些元素被隐藏(因为我的画布宽度现在是 800px)

所以我使用 set ViewBox 来缩放它以修复我的新宽度、高度

结果:当我拖动元素时,鼠标未与元素固定(我认为我为 setViewBox 计算了错误的宽度高度)

其他问题:有什么办法让画布高度在向下拖动元素时自动扩展?

感谢帮助 :)


尝试这个代码(你必须包含 jquery + raphael js 2.x):

var original_width = 777;
var original_height = 667;
var zoom_width = map_width*100/original_width/100;
var zoom_height = map_height*100/original_height/100;
if(zoom_width<=zoom_height)
   zoom = zoom_width;
else
   zoom = zoom_height;
rsr.setViewBox($("#"+map_name).offset().left, $("#"+map_name).offset().top, (map_width/zoom), (map_height/zoom));
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

raphael js,计算setViewBox宽度高度来修复窗口 的相关文章

  • Safari 滚动条和 SVG

    问题 Safari 无法正常工作 而是使用滚动条渲染我的 SVG 图像 问题的改进版本 如何填充设定的宽度并根据 Safari 中的宽高比计算高度 感谢普罗格兹 相关代码 SVG File viewBox 0 0 800 800 未指定高度
  • 如何在CSS中制作一个带有边框的可调整大小的心形

    我想要制作一个心形 用户可以将其大小调整为任意宽度和高度 并且边框为 1 像素 我尝试了用纯 CSS 制作的心形 https stackoverflow com a 17386187 1404447 https stackoverflow
  • 如何在 React Native 上显示 SVG 文件?

    我想显示 svg 文件 我有一堆 svg 图像 但我找不到显示的方式 我尝试使用Image and Use的组成部分反应本机 svg https github com magicismight react native svg但他们不这样做
  • 在 d3.js 中操纵鼠标悬停在“点击区域”

    我想show and hideSVG 中的一个节点 当鼠标移到 mouseout 问题是我的节点内部的形状是一条宽度只有1 5px的路径 因此在鼠标悬停事件中不容易击中该区域 这对用户体验肯定不方便 我想知道是否有办法做到这一点打击范围更广
  • SVG 转 JPG / PNG

    有没有工作模块可以convert a SVG image into像素格式如JPEG or PNG 看看蜡染工具包 具体来说是光栅化器 http xmlgraphics apache org batik tools rasterizer h
  • 更改 RaphaelJS 中的文本

    如何更改 RaphaelJS 创建的文本节点中的文本 首先 我使用 Raphael 创建一个带有文本字符串的新元素 稍后我想更改此文本 如果我这样做的话对我来说会更容易not必须重新初始化该元素 因为将附加大量属性 重新创建会很痛苦 有没有
  • 带有图像的 Svg 在 Safari 中不显示

    在我的网站中 我嵌入了一些 svgs 它们在 Chrome Firefox IE 9 和 Safari 中似乎都工作得很好 然而 一旦 svg 中包含图像 safari 就不会渲染该图像 基于之前的类似主题 我尝试了以下内容 SVG 元素在
  • 使用 Google Maps API 旋转 SVG 符号以匹配飞机航向

    我一直在尝试旋转 Google Maps API SVG 飞机符号 以便每次符号移动时都能显示飞机的正确航向 它最初加载时显示正确的标题 我似乎不知道如何将其更新为新标题 我花了两天的时间尝试 但非常失败 我想我可以通过添加来简单地改变它r
  • 简单 – 按顺序对多个 SVG 进行动画处理(如循环 GIF)

    我正在尝试做最基本的SVG动画 我发现的一切都试图教我关键帧和类似的高级东西 我在 After Effects 中了解关键帧 但这根本不是我需要的 我想做的就是按顺序为相同的 8 个 svg 路径设置动画 就像翻书一样 我可以在其中轻松编辑
  • SVG - 可以在一侧添加笔画破折号渐变或透明形式

    我创建了一个 SVG 动画 在其中允许中风虚线阵列移动 我是否可以在中风破折号数组的尾部添加渐变并保持一侧透明 如示例中所示 svg main width 700px margin 30px auto position relative s
  • SVG 内部跨度与文本不在同一行

    我在一个跨度内有一个 SVG 文件 同时包含文本 文本和 SVG 的高度相同 但是 SVG 与文本不在同一行 相关jsfiddle https jsfiddle net tcrnjd53 https jsfiddle net tcrnjd5
  • 使 D3 响应式:viewBox 与 resize()?

    我必须构建在平板电脑 桌面显示器以及某些情况下非常大的 4k 高分辨率影院尺寸显示器上都能正常运行的 d3 可视化效果 因此 我试图找出使用 SVG 的 viewBox 属性和 preserveaspectratio 与调用调整大小函数以在
  • D3js 从数组而不是文件中获取数据

    我发现了这个优秀的 d3js 图表here http bl ocks org Caged 6476579 但就我而言 我希望此图表从数组而不是 tsv 文件中获取值 我想让它从表 中获取值 我怎样才能做到这一点 因为它使用一个函数来实现这一
  • React - 能够通过 props 控制 SVG 的填充颜色

    我有一个 SVG 这里称为 example svg 它作为组件被调用和创建 如下所示 import ReactComponent as Example from example svg import styles from index mo
  • Blazor / SVG 实时更新

    我正处于使用 Blazor 开发实时 Web 应用程序的早期阶段 目的是在网页上显示与某些设备的状态有关的实时状态更新 它是机器的 HMI 可以将其视为具有实时数据更新的仪表板 机器的图形模型将使用 SVG 完成并托管在应用程序中 我正在尝
  • SVG 过滤器在 Firefox 中不显示,在 Chrome 中工作正常

    我想要深色背景上的一段深色文本外面有白色的光芒 虽然默认阴影滤镜 https developer mozilla org en US docs Web CSS filter drop shadow 2在 CSS 中 比如filter dro
  • 使用样式组件更改 SVG 描边的颜色

    我有一个 SVG 用作 img 标签 使用样式组件 我试图达到在悬停时更改描边颜色的程度 我导入了 SVG import BurgerOpenSvg from images burger open svg 我为它创建了一个样式组件 cons
  • 使用 Javascript 动态添加时,SVG 元素无法正确缩放

    我正在尝试使用 Javascript 在 Bootstrap Grid 中添加 SVG 控件 我可以使用 Javascript 添加 SVG 但页面的缩放 调整大小的行为并不像使用静态 HTML 构建的那样 单击 添加页面 按钮时 一组新的
  • 当 SVG 是编码的 CSS 背景图像时,如何更改 SVG 颜色?

    我的 CSS 文件中编码了一个 SVG 图标 如何在悬停时更改其颜色而不具有不同颜色的重复图标 在我的 CSS 文件中 我有 background image url data image svg xml 3Csvg xmlns http
  • SVG 沿圆弧添加文本

    我正在尝试绘制 SVG 径向饼图 如下所述 色卡 https stackoverflow com a 18210763 1395178 现在我尝试将文本与圆弧一起添加到每个切片 我试图展示Text 1具有与 M 和 A 值完全相同的 x y

随机推荐

  • JavaFX CSS 动态样式

    在提问之前 我在网上搜索并搜索了我的问题的答案 但找不到类似的内容 我希望我的应用程序用户能够从 JavaFX ColorPicker 中选择颜色 并根据他们的选择更新整个应用程序窗口颜色 按钮颜色 字体等 我的应用程序中有很多屏幕 我真的
  • 如何打印 TensorFlow 和 Keras 损失函数中的中间变量?

    我正在编写一个自定义目标来训练 Keras 带有 TensorFlow 后端 模型 但我需要调试一些中间计算 为了简单起见 假设我有 def custom loss y pred y true diff y pred y true retu
  • 如何使用 HttpClient 改善缓慢的 DNS?

    我有一个针对特定域的请求 需要很长时间才能完成 平均 22 秒 请求本身不会返回大量数据 var httpClient new HttpClient instantiated at app start and reused var requ
  • WooCommerce 3.0 结帐期间出现“不应直接访问属性”问题

    我的日志显示了很多以下消息 order total 被错误调用 不应直接访问订单属性 此消息是在 3 0 版本中添加的 它会为订单上的每个属性重复该消息 这些消息的原因是什么 我应该采取什么措施来纠正它们 WooCommerce 3 0 修
  • C++:新手初始化列表问题

    这里是新手 我正在查看公司代码 看起来类 A 中没有成员变量 但在 A 的构造函数中它初始化了对象 B 即使类 A 不包含任何 B 类型的成员变量 或根本不包含任何成员变量 我想我还不太明白 甚至无法提出问题 所以这是怎么回事 我的直觉是
  • ASP.Net MVC - 捕获某些 URL 进行 301 重定向

    我正在从旧的网站设计转向具有新 URL 的新设计 以前的所有页面名称都是名为 PageXX html PageX html Index html 的静态文件 其中 X 是数字 我的网站现在是动态的 但我想捕获这 3 个传入 url 然后尝试
  • Java - 如何根据元素的属性分隔列表

    我有一个要对其执行操作的对象列表 然而 我首先需要将列表分成单独的列表 以便具有相同parentID的所有项目都在同一个列表中 然后分别对每个列表执行操作 原因是该操作将对象的parentID作为范围 根据此处的要求 根据元素的给定属性分隔
  • 文件上传以及 Jersey Restful Web 服务中的其他对象

    我想通过上传图像和员工数据来在系统中创建员工信息 我可以使用球衣通过不同的休息时间来做到这一点 但我想在一次休息中实现这一目标 我在下面提供了结构 请帮助我在这方面该怎么做 POST Path upload2 Consumes MediaT
  • Firebase 无法将检索到的数据保存到 ArrayList

    检索数据有效 但我无法将检索到的数据保存到 ArrayList 中 在 onDataChanged 方法之后 ArrayList profile 似乎有 2 个值 但在 return 语句中它有 0 static List
  • MVC 网格的 Kendo UI 如何隐藏 ID 列

    我想隐藏 Kendo 网格的 ID 列 但仍然能够引用它来执行其他操作 我尝试将 Width 设置为 0 但这只会使其变得非常宽 Html Kendo Grid Model Name LineItems Columns columns gt
  • 使用 jQuery 的 AJAX 单选按钮

    我需要帮助来提交带有单选按钮的 RSVP 如下所示 Attending
  • 嵌套方法调用和委托有什么区别?

    考虑以下 第一种方法 public void f3 f2 f1 和这个 第二种方法 class Sample public delegate void MyDelegate string s MyDelegate obj public Sa
  • 如何在 JSON 中使用 read.schema 仅指定特定字段:SPARK Scala

    我正在尝试以编程方式在看起来像 json 的 textFile 上强制执行 schema json 我尝试使用 jsonFile 但问题是从 json 文件列表创建数据帧 spark 必须对数据进行 1 次传递才能为数据帧创建模式 因此它需
  • 获取动态对象中方法调用的通用类型

    我开始使用 Net 中的动态对象 但我不知道如何做某事 我有一个继承自 DynamicObject 的类 并且我重写了 TryInvokeMember 方法 e g class MyCustomDynamicClass DynamicObj
  • Oracle ORA-00902 无效数据类型错误

    我正在尝试创建两个表 这引发了 ORA 00902 错误 无法弄清楚这里出了什么问题 CREATE TABLE VEHICLE STORE MODEL NO VARCHAR2 12 NOT NULL DESCRIPTION VARCHAR2
  • 错误:包 android.hardware.camera2 不存在 OpenCV

    我正在尝试将 OpenCV 模块添加到项目中 但无法解决一些 gradle 问题 这是我的app gradle file apply plugin com android application android compileSdkVers
  • Twitter Bootstrap 手风琴和按钮下拉菜单溢出问题

    我在网站的一部分中使用 Bootstrap 我将手风琴与下拉按钮混合在一起 当按钮位于底部时 问题就出现了 下拉列表被隐藏 因为 accordion body 溢出设置为隐藏 您可以在这里查看 jsfiddle http jsfiddle
  • org.springframework.aop.AopInitationException:建议的空返回值与原始返回类型不匹配:公共抽象字符

    我有一个用列 char 定义的表和我定义的存储库 查询返回该列 现在当db表中的数据为空时 对于特定条件 它给了我错误 org springframework aop AopInvocationException Null return v
  • 空着身体奔跑,永远奔跑

    我构建以下演示代码来测试 java util concurrent CompletableFuture runAsync 函数 import java util ArrayList import java util List public
  • raphael js,计算setViewBox宽度高度来修复窗口

    我的 div 内容画布的第一宽度 1300 高度 500 然后我将 div 大小调整为 width 800 高度 500 我将画布大小调整为宽度 800 高度 500修复窗户 但画布中的某些元素被隐藏 因为我的画布宽度现在是 800px 所