我是靠谱客的博主 奋斗便当,最近开发中收集的这篇文章主要介绍Svg.js 图片加载,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

一.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 文本绘制整理

SVG.js 基础图形绘制整理(二)

SVG.js 基础图形绘制整理(一)

最后

以上就是奋斗便当为你收集整理的Svg.js 图片加载的全部内容,希望文章能够帮你解决Svg.js 图片加载所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(53)

评论列表共有 0 条评论

立即
投稿
返回
顶部