一.SVG.Image
1.创建和修改图片
var draw = SVG('svg1').size(300, 300);
//SVG.Image 加载图片文件
var image = draw.image('../Scripts/36.jpg');
//指定图片的大小
//默认情况下,图片按原比例缩放
var image = draw.image('../Scripts/36.jpg', 200, 300);
image.stroke({
width: 2,
color: 'blue'
}).size(100, 100);
//修改图片内容
image.load('../Scripts/tool.png');
2.图片加载成功事件
var draw = SVG('svg1').size(300, 300);
//SVG.Image 绑定加载成功事件
var image = draw.image('../Scripts/36.jpg').loaded(function (loader) {
console.info(loader);
draw.animate(300).size(loader.width, loader.height);
}); //使用动画
var image = draw.image('../Scripts/tool.png').loaded(function (loader) {
var text = draw.text(loader.url);
text.move(0, loader.height);
text.tspan('宽度:' + loader.width)
.newLine()
.tspan('高度:' + loader.height); image.animate(3000).size(loader.width * 2, loader.height * 2).loop(true, true);
});
loader数据对象如下
更多:
Svg.js 图片加载的更多相关文章
-
js图片加载效果(延迟加载+瀑布流加载)
概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...
-
js 图片加载完后的处理事件
//图片加载完成后再显示页面 document.getElementById('icon').onload=function(){ document.getElementById('wrap').st ...
-
js 图片加载失败处理方法
在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error( ...
-
JS图片加载失败用默认图片代替
1.onerror 事件会在文档或图像加载过程中发生错误时被触发. 当图片不存在时,将触发onerror,onerror 中img为 指定的默认图片. 图片存在则显示正常图片,图片不存在将显示默认. ...
-
JS图片加载失败显示默认图片
代码如下: <div id='photo<%# Container.DataItemIndex+1%>' style="position: absolute; displa ...
-
JS图片加载时获取图片宽高信息
; var img = new Image(); img.src = node.find("img[class='img1_1']").attr("src"); ...
-
css背景图片加载失败,页面部分图标无法显示
1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...
-
js判断图片加载完成后获取图片实际宽高
通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...
-
nginx实现动态分离,解决css和js等图片加载问题
改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...
随机推荐
-
C# .net dotnet属性定义属性,以提供显示明称,默认值
//使用显示名称初始化 System.ComponentModel.DisplayNameAttribute 类的新实例. displayName 显示名称 [DisplayName("we ...
-
【python】lxml查找属性为指定值的节点
假设有如下xml在/home/abc.xml位置 <A> <B id=" name="apple"/> <B id=" name= ...
-
Jquery AJax Post 返回值问题
var msg=0; Validater('abc'); function Validater(Name) { var itemId = 1; $.ajax({ url: 'adminmenu/Val ...
-
JAVA中的时间操作
java中的时间操作不外乎这四种情况: 1.获取当前时间 2.获取某个时间的某种格式 3.设置时间 4.时间的运算 好,下面就针对这四种情况,一个一个搞定. 一.获取当前时间 有两种方式可以获得,第一 ...
-
.NET自动更新
asp.net b/s就是布置在服务器的.你这个是要单机版的更新机制,博客园里面好几篇文章说这事呢. http://www.cnblogs.com/cnsharp/archive/2013/04/11 ...
-
Android一些解决方案内存问题(一)
通常我们遇到内存问题时,,解决方案一般有以下的例子: 1.做一些处理上的内存引用,经常使用软引用.加强引用.弱引用: 2.加载在内存中的照片时,它可以处理直接在内存,例如:压缩边界. 3.内存的动态恢 ...
-
Kemaswill 机器学习 数据挖掘 推荐系统 Ranking SVM 简介
Ranking SVM 简介 排序一直是信息检索的核心问题之一,Learning to Rank(简称LTR)用机器学习的思想来解决排序问题(关于Learning to Rank的简介请见我的博文Le ...
-
第39篇 免费博客github Pages绑定域名
原文地址:http://blog.laofu.online/2017/06/02/how-bind-domain/ 网站已经有了,需要对网站来绑定一个自己的个性域名,本人是买了一个阿里云的域名,也就是 ...
-
idea/eclipse下Maven工程集成web服务(tomcat、jetty)
idea/eclipse下Maven工程集成web服务 转载请注明出处:http://www.cnblogs.com/funnyzpc/p/8093554.html 应用服务器最常用的一般有这哥仨: ...
-
环境判断:区别h5打开还是weixin打开?
var source_platform = '' , pf_source = 2; //系统平台 //区别是否是 微信浏览器 , source_platform 系统平台 2018.12.6新增 va ...