2

たくさんの座標を持っているscrollmap上にを描きたいです。canvasY

そうするのに最も効率的なのは何ですか？いくつかの平均点を持つグラデーションが最良の方法だと思いますが、その方法がわかりません。

私が今考えているのは、キャンバスを塗りつぶしてから、上から各座標まで長方形をred描くことです。長方形にある程度の透明度がある場合、かなり見栄えの良いスクロール ヒートマップになります。greenY

他のアイデアはありますか？または、誰かがグラデーションを実装する方法を知っていれば、素晴らしいでしょう。

わからない場合は、スクロールマップは次のようになります。

ここに画像の説明を入力

4

1 に答える 1

4

コメントからの追加情報に基づいて、ビニング アプローチを使用することをお勧めします。ページをXの高さの領域 (各領域の高さは pageheight の1/X倍) にスライスすると、ユーザーの最終的なスクロールの高さがどの「ビン」に収まるかに基づいて単純に集計を実行できます。JSesque 疑似コードでは:

var X = 5, bins = [], idx;
userScrollHeights.forEach(function(Y) {
  idx = Math.floor(map(Y, 0, pageHeight, 0, X));
  bins[id] = bins[idx] ? bins[idx]++ : 1;
});

マッピング関数は、不思議なことに標準の JS API にはありませんが、次のように簡単に実装できます。

function map(value, istart, istop, ostart, ostop) {
  return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
}

bins 配列には、各ビンの「強度」が含まれるようになりました。選択するビンが多いほど、スクロールマップはより正確になります。

もちろん、基本的なスクロールマップは色付けされていません。これは単に強度であるため、より自然に白から黒へのオーバーレイになります。「最も強い」マッピングを赤に、「最も弱い」マッピングを紫に設定したカラー マップが本当に必要な場合は、255 ビンの設定を使用し、最大値を見つけた後、各強度レベルを単純にカラー値にマッピングできます。強度：

var bin_max = 0;
bins.forEach(function(value) {
  if(value > bin_max) bin_max= value;
});

「虹」グラデーションの 5 つのスライスに基づくカラー マッピングが続きます。

function mapIntensityToColor(intensity, min, max) {
  var cint = map(intensity,min,max,0,255);
  var step = (max - min) / 5;
  if(cint > 204) 
    return [255, map(intensity, max-step,max, 255,0), 0];
  if(cint > 153) 
    return [map(intensity, max-2*step,max-step, 0,255), 255, 0];
  if(cint > 102) 
    return [0, 255, map(intensity, max-3*step,max-2*step, 255,0)];
  if(cint > 51)
    return [0, map(intensity, max-4*step,max-3*step, 0,255), 255];
  return [map(intensity, min,max-4*step, 255,0), 0, 255];
}

キャンバス (または div) を 255 のステップに分割し、それに基づいて各ステップに色mapIntensityToColor(bin[step_number], 0, bin_max)を付けると、正確なスクロール マップが得られるはずです。

于 2013-10-14T05:05:18.160 に答える