Raphael.js - इसकी मूल चौड़ाई और ऊंचाई आकार के साथ छवि?

Question

हाय RaphaelJS उपयोगकर्ताओं =),

मैं शायद एक गूंगा-ish सवाल है, लेकिन मैं, बात यह है, मैं लोड/राफेल के साथ एक छवि बनाने के लिए कोशिश कर रहा हूँ जवाब खोजने के लिए प्रतीत नहीं कर सकते हैं, कि है ठीक, इस तरह:

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); 

और इसलिए कि जिस तरह से मैं छवि के मूल आकार के साथ लोड और है कि थोड़े मेरी समस्या का हल है, लेकिन .... वहाँ रास्ता नहीं है राफेल के अंदर ऐसा करने के लिए ???

Answer 1

अभी के लिए ... मैं मैं अपने खुद के जवाब के साथ अपने ही सवाल का जवाब करना होगा लगता है, कारण वहाँ कोई दूसरा रास्ता नहीं है कि मैं मिल गया है प्रतीत हो रहा है या किसी ने मुझसे कहा है कि = पी

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 में पहले से ही है का समर्थन करता है ओड घटना नहीं निकाल दी गई है। बस इस का उपयोग करने के लिए,:

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()