Raphael.js - 帶有原始寬度和高度尺寸的圖像？

Question

嗨RaphaelJS users =），

我也許有一個愚蠢的問題，但我似乎無法找到答案，事情是，我試圖加載/創建一個圖像與拉斐爾，這是細，像這樣：

var image_1 = paper.image('/img/img1.jpg', 0, 0, 100, 100); 

但正如你所看到的，它總是好像你必須給「寬度」和「高度」的屬性，我已經選中的文件，但它總是短暫的，而不是那詳細，我試圖給零參數或空參數，但它不工作...

所以我想知道如果有實際上有直接的方式在拉斐爾做這個，或.... 我必須在以前總是得到這些值嗎？

我的意思是，這樣的事情？：

var imgURL = "../img/img1.jpg" 

var myImg = new Image(); 
myImg.src = imgURL; 

var width = myImg.width; 
var height = myImg.height; 

    //create the image with the obtained width and height: 
    var image_1 = paper.image('/img/img1.jpg', 0, 0, width, height); 

所以這種方式，我與圖像的原始大小加載和這有點兒解決我的問題，但是....是不是有辦法裏面Raphael做到這一點？

Answer 1

現在......我想我得回答我的問題，我自己的答案，導致似乎是我發現沒有其他的方法或者有人告訴我= P

var imgURL = "../img/img1.jpg" 

var myImg = new Image(); 
myImg.src = imgURL; 

var width = myImg.width; 
var height = myImg.height; 

    //create the image with the obtained width and height: 
    var image_1 = paper.image('/img/img1.jpg', 0, 0, width, height); 

Answer 2

曾有同樣的問題，謝謝你的提示 - 在這裏是一個插件，一個尊重的尺寸，以取代現有的圖像功能：http://jsfiddle.net/drzaus/dhkh7/

更安全，可能不應該覆蓋原始圖像功能，以防萬一它曾經變化，但你明白了。

;(function(Raphael){ 
/// Plugin - replaces original RaphaelJS .image constructor 
/// with one that respects original dimensions. 
/// Optional overrides for each dimension. 
/// @drzaus @zaus 
/// based on http://stackoverflow.com/questions/10802702/raphael-js-image-with-its-original-width-and-height-size 

var originalRaphaelImageFn = Raphael.fn.image; 
Raphael.fn.image = function(url, x, y, w, h) { 
    // fix the image dimensions to match original scale unless otherwise provided 
    if(!w || !h) { 
     var img = new Image(); 
     img.src = url; 
     if(!w) w = img.width; 
     if(!h) h = img.height; 
    } 
    return originalRaphaelImageFn.call(this, url, x, y, w, h); 
}; 
})(Raphael); 

與用法：

window.onload = function() { 
    var paper = new Raphael('canvas', '100%', '100%'); 

    // specify dimensions as before 
    paper.image('http://www.stockfreeimages.com/Swiss-panorama-thumb6499792.jpg', 10, 10, 100, 50).attr('stroke', '#000'); 

    // original ratio 
    paper.image('http://www.stockfreeimages.com/Swiss-panorama-thumb6499792.jpg', 10, 100).attr('stroke', '#f00'); 

    // specify width, height taken from original 
    paper.image('http://www.stockfreeimages.com/Swiss-panorama-thumb6499792.jpg', 10, 200, 100).attr('stroke', '#0f0'); 

    // specify height, width taken from original 
    paper.image('http://www.stockfreeimages.com/Swiss-panorama-thumb6499792.jpg', 10, 300, false, 100).attr('stroke', '#00f'); 
}; 

Answer 3

大廈關閉@ drzaus的真棒答案，我遇到了一些問題，在那裏，如果我被加載到拉斐爾的形象是不是已經在緩存中，高度和寬度會被設置爲0。爲了解決這個問題：

(function(Raphael){ 
/// Plugin - replaces original RaphaelJS .image constructor 
/// with one that respects original dimensions. 
/// Optional overrides for each dimension. 
/// @drzaus @zaus 
/// based on http://stackoverflow.com/questions/10802702/raphael-js-image-with-its-original-width-and-height-size 
/// modified 13/08/2013 by @Huniku to support asynchronous loads 

var originalRaphaelImageFn = Raphael.fn.image; 

Raphael.fn.imageAsync = function(url, x, y, w, h) { 
    var dfd = new jQuery.Deferred(); 
    var done = false; 
    var paper = this; 
    // fix the image dimensions to match original scale unless otherwise provided 
    if(!w || !h) { 
     //Create the new image and set the onload event to call 
     //the original paper.image function with the desired dimensions 
     var img = new Image(); 
     img.onload = function() { 
      if(done) 
       return; 
      if(!w) w = img.width; 
      if(!h) h = img.height; 
      dfd.resolve(originalRaphaelImageFn.call(paper, url, x, y, w, h)); 
     }; 
     //Begin loading of the image 
     img.src = url; 

     //If the images is already loaded (i.e. it was in the local cache) 
     //img.onload will not fire, so call paper.image here. 
     //Set done to ensure img.onload does not fire. 
     if(img.width != 0) { 
      if(!w) w = img.width; 
      if(!h) h = img.height; 
      done = true; 
      dfd.resolve(originalRaphaelImageFn.call(paper, url, x, y, w, h)); 
     } 
    } 
    else 
     dfd.resolve(originalRaphaelImageFn.call(paper, url, x, y, w, h)); 
    return dfd.promise(); 
}; 
})(Raphael); 

這允許圖像查詢它的寬度/高度之前加載之前，也支持該實例，其中圖像是已經在高速緩存和ONL oad事件未被解僱。要使用此功能，簡單地說：

var dfd = paper.imageAsync("images/hello.png",0,0,false,false); 
dfd.done(function(result) { //result is a Raphael element 
    console.log('done'); 
    //do something with result 
}); 

Answer 4

愛德華的評論爲我工作，但我不得不把它放在一個區間功能，等待的寬度和高度都增加了圖像之前定義的（否則我得到了一個爲0x0圖像）。這裏是我使用的代碼：

var imgURL = "/img/img1.jpg" 
var myImg = new Image(); 
myImg.src = imgURL; 

function loadImagAfterWidthAndHeightAreDefined(){ 
    width = myImg.width; 
    height = myImg.height; 

    if(myImg.width > 0 && myImg.height > 0){ 
    image_1 = paper.image(imgURL, 0, 0, width, height); 
    } 
    else{ 
    setTimeout(function(){ 
     loadImagAfterWidthAndHeightAreDefined(); 
    },250); 
    } 
} 
loadImagAfterWidthAndHeightAreDefined()