- 浏览: 140280 次
- 性别:
- 来自: 未来
-
文章分类
- 全部博客 (174)
- Eclispe (3)
- javaScript (33)
- SVG学习 (22)
- Java (21)
- 网站 (12)
- learn English (1)
- 文档 (25)
- 常用网站收录 (11)
- struts (6)
- 常用API (1)
- html (2)
- jsp (2)
- spring (2)
- IDE (1)
- 数据结构 (1)
- JDBC (2)
- html + css (1)
- xml (3)
- 心声 (1)
- Axis2 (1)
- svg (4)
- webService (2)
- unix (2)
- c/c++ (3)
- html5 (1)
- Android (2)
- Jet标签 (1)
- oracle (2)
- 工具 (1)
- ideas (0)
- lean plan (1)
- java技术网站,信息收集综合及分类 (0)
最新评论
-
calosteward:
感谢博主对svg convert to PDF资源的分享。我也 ...
How to Convert a SVG File to PDF Format -
long316:
fhhhh
WinArchiver 2.7 -
long316:
ddddd
WinArchiver 2.7
http://blog.csdn.net/qingcai20071141/article/details/6257184
//鼠标坐标:在SVG经过缩放、偏移、ViewBox转换后,鼠标坐标值
var mouseCoord = {
x : 0.,
y : 0.
};
//用户坐标:相对于原始SVG,坐标位置
var userCoord = {
x : 0.,
y : 0.
};
var cRadius = 4.; //半径
var svgDocument = null;
var svgRoot = null;
//获取鼠标事件相关的SVG Document
function getSVGDocument(evt)
{
var target = evt.target;
var parent = target.parentNode;
svgDocument = parent.getOwnerDocument();
svgRoot = svgDocument.documentElement;
}
//计算坐标位置:包括用户坐标、鼠标坐标
function getCoords(evt)
{
var x_trans = 0.; //X偏移
var y_trans = 0.; //Y偏移
var x_scale = 1.; //ViewBox导致的X缩放比例
var y_scale = 1.; //ViewBox导致的Y缩放比例
var scale = 1.; //缩放比例
var trans = null;
var viewbox = null;
getSVGDocument(evt);
scale = svgRoot.currentScale; //获取当前缩放比例
trans = svgRoot.currentTranslate; //获取当前偏移
//获取SVG的当前viewBox
viewbox = svgRoot.getAttributeNS(null, "viewBox"); //获取ViewBox属性
//获取用户坐标:原始SVG的坐标位置
userCoord.x = evt.getClientX();
userCoord.y = evt.getClientY();
//计算偏移、缩放等
x_trans = ( 0.0 - trans.x ) / scale;
y_trans = ( 0.0 - trans.y ) / scale;
// Now that we have moved the rectangle's corner to the
// upper-left position, let's scale the rectangle to fit
// the current view. X and Y scales are maintained seperately
// to handle possible anamorphic scaling from the viewBox
zoom = scale;
x_scale = 1.0 / scale;
y_scale = 1.0 / scale;
if ( viewbox ) {
// We have a viewBox so, update our translation and scale
// to take the viewBox into account
// Break the viewBox parameters into an array to make life easier
var params = viewbox.split(//s+/);
// Determine the scaling from the viewBox
// Note that these calculations assume that the outermost
// SVG element has height and width attributes set to 100%.
var h_scale = 1.0 / parseFloat(params[2]) * window.innerWidth;
var v_scale = 1.0 / parseFloat(params[3]) * window.innerHeight;
// Update our previously calculated transform
x_trans = x_trans / h_scale + parseFloat(params[0]);
y_trans = y_trans / v_scale + parseFloat(params[1]);
x_scale = x_scale / h_scale;
y_scale = y_scale / v_scale;
}
//根据用户坐标、偏移量、缩放等计算鼠标坐标
mouseCoord.x = userCoord.x * x_scale + x_trans;
mouseCoord.y = userCoord.y * y_scale + y_trans;
发表评论
-
使用脚本动态操作 SVG 文档
2012-08-20 23:25 747http://www.ibm.com/developerwor ... -
SVG脚本编程的一些技巧 .
2012-08-20 23:24 860http://blog.csdn.net/mtfsoft/ar ... -
有鼠标位置获取元素
2012-12-23 23:36 647document.elementFromPoint(x,y) ... -
getCTM
2012-08-19 17:22 760<svg xmlns="http://www. ... -
Svg事件响应:获取鼠标即时屏幕坐标
2012-08-19 17:04 4410http://ribbonchen.blog.163.com/ ... -
svg_example
2012-04-26 00:54 816http://srufaculty.sru.edu/david ... -
textPath element | SVGTextPathElement object
2012-02-13 22:51 908http://msdn.microsoft.com/ZH-CN ... -
path element | SVGPathElement object
2012-02-13 22:49 1296http://msdn.microsoft.com/ZH-CN ... -
svg text参考
2012-02-13 14:20 741http://www.w3.org/TR/SVG11/text ... -
How to Convert a SVG File to PDF Format
2012-02-05 22:40 1177http://xmlgraphics.apache.org/b ... -
创建随内容动态缩放的SVG图形
2012-01-01 16:47 1957创建随内容动态缩放的S ... -
svg矩阵变换
2012-01-01 16:16 952svg矩阵变换 -
svg变换参考
2012-01-01 16:14 941<?xml version="1.0" ... -
svg网站 参考信息
2011-12-31 10:53 946http://blog.csdn.net/xuezhimeng ... -
用CorelDRAW制作SVG手机主题界面图片
2011-10-25 23:57 2312用CorelDRAW制作SVG手机主题界面图片 Ljmsto ... -
动态创建 svg
2011-10-20 17:34 649http://riso.iteye.com/blog/3934 ... -
参考网站收录
2011-10-12 15:22 801PDM中文网运维(http://www.pdmcn.com/b ... -
svg网站
2011-10-08 15:03 1128http://smartblack.iteye.com/blo ... -
svg学习
2011-09-26 00:11 514<?xml version="1.0" ... -
svg的
2011-09-24 00:47 871http://xinsheng.huawei.com/cn/b ...
相关推荐
实现SVG图片的Pan and Zoom 功能
在移动端,SVG的优势在于文件小、加载速度快,且支持交互性,这正是"svg在移动端的应用-手势图片拖动,手势放大缩小"这个主题的核心内容。 1. SVG的基础知识: - SVG是一种开放标准的图形格式,用于描绘2D图形,它...
支持 图片 svg div 等的拖动,放大 ,缩小,代码都写好了,直接可以跑
整理Qt例程中的svg图片显示,将显示图片放在label控件上(重写事件过滤器方法,参照料此方法可放在其他控件上),环境为ubuntu16.04 + Qt5.6.1,在win+Qt环境下程序工程也可打开编译(亲测)。
利用软件Inkscape Portable可以很容易将svg放大或是缩小 当然它还可以将其他格式的图片转为svg 一:打开svg图标 二:按住鼠标左键,拖着鼠标将图标完全框住,就会出现下图界面 此时通过箭头就可以调整图标大小了 三...
SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,它允许在网页上创建和展示复杂的图形,包括线条、形状、渐变、透明度等元素,而且这些图形可以无限放大而不会失真。SVG在Web画图中扮演着重要角色,...
1. **SVG基础**:SVG是一种开放标准的矢量图形语言,可以在网页上创建清晰、可缩放的图形,无论放大多少倍都不会失真。Snap.svg利用SVG的优势,为开发者提供了丰富的API来操作SVG元素。 2. **Snap.svg对象模型**:...
根据提供的文件信息,本文将详细解释如何使用Java进行图片放大与缩小的相关知识点,包括关键类库的导入、图片...需要注意的是,在实际开发过程中,还需要考虑到错误处理、性能优化等问题,以确保程序的稳定性和效率。
滚轮实现多个svg的放大缩小,根据鼠标位置来判断对哪个svg进行操作
在"loading-svg图片"这个主题中,我们将探讨如何使用SVG实现一个动态的加载指示器,并将其应用到图片懒加载技术中。首先,我们需要创建一个SVG元素,定义其形状、路径或符号,并利用CSS或者JavaScript来控制其动画...
svg画图,用画图工具画的svg格式的汽车,供大家参考
SVG画图工具是一种创新性的在线解决方案,它允许用户在网页浏览器中直接进行可缩放矢量图形(SVG)的设计和编辑。SVG作为一种矢量图像格式,具有无损放大、清晰度不变、文件小巧等优点,因此在网页设计、图标制作、...
在IT行业中,实现类似地图放大缩小图片的功能是常见的图像处理技术,主要应用于地图应用、图像查看器、设计软件等。这种技术的核心在于图像的平移、缩放以及平滑处理,确保用户在查看高分辨率图像时能有良好的交互...
针对上一篇文章,进行对svg文件里面的元素进行赋值和放大缩小的补充笔记 svg元素赋值 1. 先看看svg文件的代码 思路:我的想法就是循环拿到里面的id,然后跟后台的数据匹配,然后赋值。因为后台返回的数据id是没有...
然而,在实现SVG局部放大的过程中,可能会遇到一些问题,如描述中提到的“空隙”问题以及在缩小过程中不正确缩放的问题。 **SVG的基本结构与属性** SVG文件由一系列的图形元素组成,如路径(`<path>`)、矩形(`...
路径是SVG中最基础的构造块,通过线段、曲线等几何形状定义出复杂的图形。形状如矩形、圆形、椭圆、线和多边形可以直接使用SVG元素来绘制。文本元素支持文本的排版和样式控制,可以与图形元素结合,实现图文并茂的...
在SVG中,图像由一系列的元素构成,如矩形、圆形、椭圆、线条和文本等。以下是对这些基本元素的详细解释: 1. **矩形 `<rect>`**:矩形可以通过`<rect>`元素创建,通过设置`x`, `y`, `width`, `height`属性来定义其...