14

こんにちは RaphaelJS ユーザー =) 、

私はおそらく愚かな質問をしていますが、答えを見つけることができないようです。問題は、Raphael でイメージをロード/作成しようとしているということです。

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

しかし、ご覧のとおり、常に「幅」と「高さ」のプロパティを指定する必要があるようです。ドキュメントを確認しましたが、常に短く、詳細ではなく、null パラメーターまたは空のパラメーターを指定しようとしましたが、うまくいかない...

それで、ラファエルにこれを行うための直接的な方法が実際にあるかどうか疑問に思っています....前に常にそれらの値を取得する必要がありますか???

つまり、このようなものですか?:

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

そして、そのようにして元のサイズの画像をロードすると、それで問題は少し解決しますが、....ラファエルの中にこれを行う方法はありませんか???

4

4 に答える 4

15

今のところ...私は自分の答えで自分の質問に答える必要があると思います.私が見つけた、または誰かが私に言った他の方法はないようです= 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);
于 2012-06-22T01:18:21.843 に答える
9

@drzaus の素晴らしい回答から構築すると、Raphael に読み込んでいた画像がまだキャッシュにない場合、高さと幅が 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);

これにより、幅/高さを照会する前に画像を読み込むことができます。また、画像が既にキャッシュにあり、onload イベントが発生しないインスタンスもサポートされます。これを使用するには、次のようにします。

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
});
于 2013-08-14T00:11:28.167 に答える
3

同じ問題がありました。ヒントをありがとうございます。既存の画像関数を寸法を尊重する関数に置き換えるプラグインは次のとおりです。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');
};
于 2013-01-12T15:42:05.663 に答える
0

エドワードのコメントは私にとってはうまくいきましたが、それを間隔関数に配置し、幅と高さが定義されるまで待ってから画像を追加する必要がありました（そうしないと、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()
于 2014-12-18T09:49:49.870 に答える