0

私は本当にクールな WebGL ストーリー球、ソース コード、および css hereを適応させようとしています。大きな問題が 1 つあります。ニュース記事をクリックすると、ポップアップ内の記事のテキストが常に同じになります。記事をクリックすると、正しいテキストがポップアップに表示されるようにコードを変更したいと考えています。

コードで指定した一連の記事テキストから作業していますvar captions = ["good","better","best"]。記事のタイトルと画像はポップアップに正しく表示されますが、そのためのテキストを取得できません。手伝って頂けますか？？これが私が持っているものです：

// function code
var passvar = null; // failed attempt to store texts for later
function initialize() {
  math = tdl.math;
  fast = tdl.fast;
  canvas = document.getElementById("canvas");
  g_fpsTimer = new tdl.fps.FPSTimer();
  hack();

  canvas.addEventListener("mousedown", handleMouseDown, false);
  canvas.addEventListener("mousemove", handleMouseMove, false);
  canvas.addEventListener("mouseup", handleMouseUp, false);

  // Create a canvas 2d for making textures with text.
  g_canvas2d = document.createElement('canvas');

  window.two2w = window.two2h = g_tilesize; 

  g_canvas2d.width = two2w;
  g_canvas2d.height = two2h;
  g_ctx2d = g_canvas2d.getContext("2d");

  window.gl = wu.create3DContext(canvas);
  if (g_debug) {
    gl = wd.makeDebugContext(gl, undefined, LogGLCall);
  }
  //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, gl.TRUE);

  // Here is where I specify article titles, images, captions
  // Titles and images populate the popup correctly, captions don't...

  var titles = ["a","b","c"];
  var captions = ["good","better","best"];
  var images = ['imagesphere/assets/1.jpg', 
                'imagesphere/assets/bp/2.png', 
                'imagesphere/assets/bp/3.png'
                ];

  var headlines = titles.concat( titles);
  var blurbs = captions.concat( captions);

  var tmpImages = [];
  var tmpHeadlines = [];
  var tmpCaptions = [];

  // make a bunch of textures.
  for (var ii = 0; ii < g_imagesDownGrid; ++ii) {
    var textures = [];
    for (var jj = 0; jj < g_imagesAcrossGrid; ++jj) {
      var imgTexture = new ImgTexture();

      textures.push(imgTexture);
      if (tmpImages.length == 0) {
        tmpImages = images.slice();
      }
      if (tmpHeadlines.length == 0) {
        tmpHeadlines = headlines.slice();
      }
      if (tmpCaptions.length == 0) {
          tmpCaptions = blurbs.slice();
      }
      var rando = math.randomInt(tmpImages.length);
      var img = tmpImages.splice(rando, 1)[0];
      var headline = tmpHeadlines.splice(rando, 1)[0];
      var caption = tmpCaptions.splice(rando, 1)[0];
      passvar = caption;

      if (img.indexOf('videoplay.jpg') > -1){
        window.vidtexture = imgTexture;
        images = images.slice(1); // dont use that thumb again.
        headlines = 'WebGL Brings Video To the Party as Well'
      }

      imgTexture.load(img, /* "[" + jj + "/" + ii + "]" + */ headline);
    }
    g_textures.push(textures);
  }

  // And here's where I try to put this in a popup, finally
  // But passvar, the stored article text, never refreshes!!!

 <div id="story" class="prettybox" style="display:none"> 
    <img class="close" src="imagesphere/assets/close.png">
    <div id="storyinner">
        <input id = "mytext">
            <script>document.getElementById("mytext").value = passvar;</script>
    </div>
 </div>

そして、ここに私のクリックハンドラーコードがあります:

   function sphereClick(e){
   window.console && console.log('click!', e, e.timeStamp);

   var selected = g_textures[sel.y][sel.x];
   window.selected = selected;

   animateGL('eyeRadius', glProp('eyeRadius'), 4, 500); 

   var wwidth   = $(window).width(),
       wheight  = $(window).height(),
       story    = $('#story').width( ~~(wwidth / 7 * 4) ).height( ~~(wheight / 6 * 5) ), 
       width    = story.width(),
       height   = story.height(),
       miniwidth = 30;

   story.detach()
    .find('#storyinner').find('h3,img,caption').remove().end().end()
    .show();

   story.css({
     left        :   e.pageX,
     top         :   e.pageY,
     marginLeft  :   - width / 2,
     marginTop   :   - height / 2

   }).appendTo($body); // we remove and put back on the DOM to reset it to the correct position.

   $('style.anim.story').remove();
   $('<style class="anim story">')
      .text( '.storyopen #story { left : ' + (wwidth  / 3 * 2) + 'px !important;  top : ' + wheight / 2 + 'px !important; }' )
      .appendTo($body);
   $(selected.img).prependTo('#storyinner').parent();

   $('<h3>').text(selected.msg.replace(/\(.*/,'')).prependTo('#storyinner');

   $body.addClass('storyopen');


} // eo sphereClick()
4

1 に答える 1

0

ここには多くの間違いがありますが、ここから始めましょう。問題は解決しませんが、このような問題を回避するのに役立ちます。

var passvar = null;グローバル変数です。

ループfor (var ii = 0; ...は、反復ごとにそのグローバル変数を新しい値に設定します。

後で何かをクリックしても、グローバル変数passvarは変更されません。

passvarこのパターンを使用する場合は、クリックされた値が含まれるようにクリック ハンドラーから設定する必要があります。実際にクリック ハンドラを投稿していないため、これ以上アドバイスすることは困難です。

しかし、これも悪いパターンです。関数は正当な理由で引数を取ります。とにかくクリック ハンドラーでクリックされたアイテムを見つける必要があるため、共有グローバル変数をまったく必要としない直接渡してみませんか?

var handleMouseUp = function(event) {
  var story = findClickedThing(event);
  if (obj) {
    showPopup(story.texture, story.caption);
  }
}

これは私にこれをもたらします:

var titles = ["a","b","c"];
var captions = ["good","better","best"];
var images = ['imagesphere/assets/1.jpg', 
              'imagesphere/assets/bp/2.png', 
              'imagesphere/assets/bp/3.png'
              ];

3 つの配列があり、すべて同じ長さで、各配列がオブジェクトの異なるプロパティを記述している場合、それは間違っています。あなたが望むのは、代わりにオブジェクトの1つの配列です。

var stories = [
  {
    title: "a",
    caption: "good",
    image: "imagesphere/assets/1.jpg"
  }, {
    title: "b",
    caption: "better",
    image: "imagesphere/assets/bp/2.jpg"
  }, {
    title: "c",
    caption: "best",
    image: "imagesphere/assets/bp/3.jpg"
  },
];

console.log(stories[1].caption); // "better"

クリックされたオブジェクトを見つけたら、そのキャプションを尋ねることができます。そして、オブジェクト全体をポップアップ メーカーに渡すことができます。フィールドを別の方法で処理したり、別の方法で渡したりすることはありません。オブジェクト全体を渡しています。

于 2012-12-16T00:05:02.210 に答える