23

私がやりたいこと？

この質問の更新：2012年7月10日-「gradientTransformは完全ではありません」Duopixelに触発されました2012年7月11日-「例からのSVGコード」2012年7月16日-「@dignifiedquireはこの問題に取り組みます」

ユーザーがポリゴンのサイズを動的に変更できるツールを作成しようとしています。ほとんどのポリゴンはグラデーションで塗りつぶされていfill="url(#top_surface_1_gradient)"ます。私がこれを行う方法は、次のような単純なJavaScriptスクリプトです。

  1. 特定のポリゴン上でmousemove＆clickイベントを探します
  2. 動きの量を測定します
  3. このアルゴリズムを使用してポリゴンの座標の半分を（ストレッチの効果を得るために）変更し、新しい座標を定義します。x = x_movement、y = x_movement * Math.tan( 31 * (Math.PI/180) )
  4. 単色で塗りつぶされたポリゴンはOKです
  5. グラデーションで塗りつぶされたポリゴンはそうではありません。

視覚的に

ステップ1

つまり、これはステップ1であり、ユーザーによるストレッチは行われていません。

ステップ2

ここで問題が発生します。x1, y1グラデーションの座標と座標をどのように変更すればよいかわからないx2, y2ため、ポリゴンが引き伸ばされている間、グラデーションは古い位置にぶら下がったままになります。その結果、奥行きの錯覚を維持できない形状になります。

step_3

私が探している最終結果。そして、グラデーションは最初から完全にランダムな角度を持っているかもしれないことを心に留めておいてください。この最終結果では、私が探しているのは、グラデーションの座標x1, y1と座標の両方が変更されていることです。これらの位置を計算するには、どのアルゴリズムを使用する必要がありますか？勾配の角度を完全に知らない解決策を探しています。x2, y2

以下は、これらの例を生成するために使用されたすべての適切な座標を持つSVGです。

SVGコードの使用

ステップ1：

<!-- Step 1 -->
<linearGradient id="top_surface_1_gradient" gradientUnits="userSpaceOnUse" x1="165.3425" y1="39.7002" x2="-49.991" y2="43.0337">
    <stop  offset="0" style="stop-color:#FFFFFF"/>
    <stop  offset="0.6687" style="stop-color:#CCCCCC"/>
    <stop  offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<polygon id="top_surface_1" fill="url(#top_surface_1_gradient)" points="137.145,41.204 68.572,0 0,41.204 68.572,82.396"/>

ステップ2

<!-- Step 2 --> 
<linearGradient id="top_surface_2_gradient" gradientUnits="userSpaceOnUse" x1="250.0491" y1="233.8115" x2="23.7637" y2="237.3146">
    <stop  offset="0" style="stop-color:#FFFFFF"/>
    <stop  offset="0.6687" style="stop-color:#CCCCCC"/>
    <stop  offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<polygon id="top_surface_2" fill="url(#top_surface_2_gradient)" points="205.788,215.557 137.215,174.354 0.078,256.629 68.649,297.823"/>

ステップ3

<!-- Step 3 --> 
<linearGradient id="top_surface_3_gradient" gradientUnits="userSpaceOnUse" x1="248.4543" y1="454.5225" x2="-75.535" y2="459.5381">
    <stop  offset="0" style="stop-color:#FFFFFF"/>
    <stop  offset="0.6687" style="stop-color:#CCCCCC"/>
    <stop  offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<polygon id="top_surface_3" fill="url(#top_surface_3_gradient)" points="205.788,415.557 137.215,374.354 0.078,456.629 68.649,497.823"/>

私はこの問題の解決策を開発するのに数え切れないほどの時間を費やしてきましたが、頭を悩ませることはできませんでした。どんな助けでも大歓迎です。

更新：gradientTransformは完全ではありません

gradientTransform属性を使用し、x1、y1は使用しません。グラデーションのx2、y2座標を使用すると、ほぼ必要な方法でポリゴンを塗りつぶす結果が得られます（このソリューションはhttp://jsfiddle.net/hqXx2/にあります）。解が崩れる唯一の場所は、ポリゴンがポリゴンの外側から始まり、外側/内側のどこかで終わるグラデーションで塗りつぶされている場合です。説明させてください：

これは、Duopixelが提案しているソリューションで達成されることです。 step_4

これは、上記のソリューションでは実現できない使用例です。角度とグラデーションの停止を視覚的に増幅するために、色を変更しました。 step_5

例のSVGコード

正しく展開されたポリゴンのより大きなグループのコードは次のとおりです。

<g>
    <linearGradient id="surface_center_inside_bottom_1_" gradientUnits="userSpaceOnUse" x1="167.7629" y1="634.5986" x2="-72.9039" y2="599.2647">
        <stop  offset="0" style="stop-color:#FFFFFF"/>
        <stop  offset="0.8528" style="stop-color:#CCCCCC"/>
        <stop  offset="0.9954" style="stop-color:#CCCCCC"/>
    </linearGradient>
    <polygon id="surface_center_inside_bottom_9_" fill="url(#surface_center_inside_bottom_1_)" points="137.145,620.04 68.572,578.837 0,620.04 68.572,661.233"/>

    <linearGradient id="surface_right_inside_side_1_" gradientUnits="userSpaceOnUse" x1="178.8889" y1="600.1787" x2="33.103" y2="517.9229">
        <stop  offset="0" style="stop-color:#FFFFFF"/>
        <stop  offset="0.9816" style="stop-color:#A3A5A8"/>
    </linearGradient>
    <polygon id="surface_right_inside_side_3_" fill="url(#surface_right_inside_side_1_)" points="136.526,620.374 68.359,578.501 68.572,493.837 137.358,535.37"/>

    <linearGradient id="surface_right_inside_side_2_" gradientUnits="userSpaceOnUse" x1="126.2664" y1="563.249" x2="-28.4" y2="621.916">
        <stop  offset="0" style="stop-color:#FF0000"/>
        <stop  offset="0.6698" style="stop-color:#00FFFF"/>
        <stop  offset="1" style="stop-color:#FF0000"/>
    </linearGradient>
    <polygon id="surface_right_inside_side_5_" fill="url(#surface_right_inside_side_2_)" points="68.573,661.239 0,620.036 0,535.036 68.573,576.231"/>

    <linearGradient id="surface_center_outside_top_1_" gradientUnits="userSpaceOnUse" x1="167.3728" y1="533.5059" x2="-47.9608" y2="536.8394">
        <stop  offset="0.0016" style="stop-color:#FF0000"/>
        <stop  offset="0.6735" style="stop-color:#00FFFF"/>
        <stop  offset="1" style="stop-color:#FF0000"/>
    </linearGradient>
    <polygon id="surface_center_outside_top_3_" fill="url(#surface_center_outside_top_1_)" points="137.145,535.041 68.572,493.837 0,535.041 68.572,576.233"/>
</g>

そして、これが私が拡張する必要がある小さいもののSVGコードです：

<g>
    <linearGradient id="surface_right_inside_side_4_" gradientUnits="userSpaceOnUse" x1="273.4377" y1="319.251" x2="78.0696" y2="209.0197">
        <stop  offset="0" style="stop-color:#FFFFFF"/>
        <stop  offset="0.9816" style="stop-color:#A3A5A8"/>
    </linearGradient>
    <polygon id="surface_right_inside_side_9_" fill="url(#surface_right_inside_side_4_)" points="205.112,366.797 136.945,324.924 137.157,156.261 205.731,197.464"/>

    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="247.2952" y1="408.1992" x2="-103.1108" y2="356.7538">
        <stop  offset="0" style="stop-color:#FFFFFF"/>
        <stop  offset="0.8528" style="stop-color:#CCCCCC"/>
        <stop  offset="0.9954" style="stop-color:#CCCCCC"/>
    </linearGradient>
    <polygon fill="url(#SVGID_1_)" points="205.731,366.465 137.157,325.262 0.021,407.536 68.592,448.729"/>

    <linearGradient id="surface_right_inside_side_7_" gradientUnits="userSpaceOnUse" x1="160.3313" y1="296.623" x2="-52.0119" y2="377.1676">
        <stop  offset="0" style="stop-color:#FF0000"/>
        <stop  offset="0.6698" style="stop-color:#00FFFF"/>
        <stop  offset="1" style="stop-color:#FF0000"/>
    </linearGradient>
    <polygon id="surface_right_inside_side_6_" fill="url(#surface_right_inside_side_7_)" points="68.532,448.767 0,407.497 0.021,238.536 68.592,279.729"/>

    <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="248.4749" y1="215.7417" x2="-75.5139" y2="220.7572">
        <stop  offset="0.0016" style="stop-color:#FF0000"/>
        <stop  offset="0.6735" style="stop-color:#00FFFF"/>
        <stop  offset="1" style="stop-color:#FF0000"/>
    </linearGradient>
    <polygon fill="url(#SVGID_2_)" points="205.731,197.464 137.157,156.261 68.592,197.333 0.021,238.536 68.592,279.729"/>
</g>

@dignifiedquireはこの問題に取り組みます

私はテストサイトに@dignifiedquireの提案されたアルゴリズムを実装しました：これがテストリンクです。絶対から相対への変換を自分で行いましたが、通常は同じポリゴンxとyの変更値をグラデーションxとyに追加した場合と同じ結果が表示されます。これが主な問題です。これらの値を、上記の例のようにグラデーションを変換するような値に変換する方法はありますか？

さらに助けが必要です。

4

2 に答える 2

7

3つの代替案を更新

別の解決策は、勾配の2つの端点に基づいてパーセンテージ値を計算することです。
この画像では、元のポリゴンabcd、その境界ボックスa'b'c'd'、およびグラデーションが表示されていg1g2ます。ここでの目的は、最初に2つのポイントg1をg2絶対値で計算し、次にこれら2つの相対値を計算することです。

バウンディングボックス

説明したことのほとんどを実行するアルゴリズムを導出しましたが、グラデーションとバウンディングボックスの交点を計算するには失敗します。私はこの問題を解決する方法について考えていますが、今はそれを実装する時期ではないので、そのための手順をリストします。基本的な考え方は、グラデーションがバウンディングボックスのコーナー（ 、、、、 ）を
通る線の1つと交差するかどうかをテストしてから、交差が問題のエッジにあるかどうかをテストすることです。現在、処理が必要な2つの特殊なケースがあります。1.勾配が垂直である、これはその勾配が無限大であることを意味します2.問題の側が垂直であり、これもまたその勾配が無限大であることを意味します）。a'b'b'c'c'd'd'a'

私のアルゴリズム

_ = require('underscore')    

function intersectGradientWithPolygon(polygon, gradient){
  var sides = [
    ["a", "b"],
    ["b", "c"],
    ["c", "d"],
    ["d", "a"]
  ];

  var boundingBox = calculateBoundingBox(polygon);

  // intersect each side of the bounding box with the gradient
  var intersections = _.map(sides, function(side){
    var intersection = intersect(boundingBox[side[0]], boundingBox[side[1]], gradient.a, gradient.b);
    if(intersection){
      // calculate the percentages
      console.log(JSON.stringify(intersection));
      return calcPercentage(intersection, boundingBox);
    }
  });

  return intersections;

}


function Point(x,y){
  this.x = x;
  this.y = y;
}

function calcPercentage(intersection, boundingBox){
  var lengthX = (boundingBox.max.x - boundingBox.min.x),
      lengthY = (boundingBox.max.y - boundingBox.min.y),
      x = (intersection.x / lengthX) * 100,
      y = (intersection.y / lengthY) * 100;
}

function calculateBoundingBox(polygon){
  var xValues = _.pluck(polygon, 'x'),
      yValues = _.pluck(polygon, 'y'),
      maxX = _.max(xValues),
      maxY = _.max(yValues),
      minX = _.min(xValues),
      minY = _.min(yValues);


  return {
    "a": new Point(minX, maxY),
    "b": new Point(maxX, maxY),
    "c": new Point(maxX, minY),
    "d": new Point(minX, minY),
    "max": new Point(maxX, maxY),
    "min": new Point(minX, minY)
  };
}
// tests if the two lines a1, b1 and a2, b2 intersect and 
// returns the point of intersection if the do so
function intersect(a1, b1, a2, b2){

  var s = new Point( );

  // TODO
  // This is the part that is missing
  // one needs to implement what I described above at this point
  //

  if (isInIntervall(s.x, a1.x, b1.x) && isInIntervall(s.y, a2.y, b2.y)){
    return s;
  }
  else {
    return false;
  }
}

// test if a point is in the intervall [a,b]
function isInIntervall(point, a, b){
  return (point >= a) && (point <=b);
}

アップデート2

質問：ポリゴンが空間全体で移動され、引き伸ばされていない場合、グラデーション座標はどのように変化する必要がありますか？

回答：ポリゴンの1つのポイントをxとyで移動する量を計算し、グラデーションのポイントをまったく同じ量だけ移動します。

アルゴリズムを変更して、ポリゴンの片側を絶対単位でスケーリングするようにしました。また、アルゴリズムの機能を説明する画像を作成しました

  1. 元のポリゴン
  2. 入力によって決定されるスケール係数によってスケーリングされたポリゴン
  3. ポリゴンを元の場所に戻します

説明

2012年1月5日更新 変換に変換行列を使用して提案したアイデアに基づいてアルゴリズムを導出しました。テストする時間はありませんでしたが、コードはnode.jsで実行されており、ドキュメントにunderscore.jsとsylvester（行列操作）を含めると、ブラウザーで実行されるはずです。

セットアップ

/* underscore for some helper methods
 * http:*http:*underscorejs.org
 */
_ = require("underscore");  

/* matrix operations
 * http:*sylvester.jcoglan.com
 */
require("sylvester");

入力

var gradient = {
  "a":{
    "x": 165.3425,
    "y": 39.7002
  },
  "b":{
    "x": -49.991,
    "y": 43.0337 
  }
};

var polygon = {
  "a": {
    "x": 137.145,
    "y": 41.204
  },
  "b": {
    "x": 68.572,
    "y": 0
  },
  "c": {
    "x": 0,
    "y": 41.204
  },
  "d": {
    "x": 68.572,
    "y": 82.396
  }
};
// the scales are now absolute values in the same units as the coordinates
var scaleAbsX = 100;
var scaleAbsY = 100 * Math.tan( 62/2 * (Math.PI/180) );

// this describes the side that is scaled
var side = ["a", "b"];

アルゴリズム

scalePolyWithGradient = function(polygon, gradient, scaleAbsX, scaleAbsY, side){
  // 1. Scale by factor: derive factor from input scaling and then translate into scaling matrix
  // 2. Apply scale to the gradient
  // 3. Translate both back 

  // create a scaling matrix based of the input scales

  // get the two points of the scaled side
  var point1 = polygon[side[0]],
      point2 = polygon[side[1]];
  // scale these points
  var scaledPoint1 = { "x": point1.x + scaleAbsX,
                       "y": point1.y + scaleAbsY },
      scaledPoint2 = { "x": point2.x + scaleAbsX,
                       "y": point2.y + scaleAbsY };

  // calculate the relative scales
  var scaleRelX = scaledPoint1.x / point1.x,
      scaleRelY = scaledPoint1.y / point1.y;

  // create the scale matrix
  var scaleMatrix = $M([ [scaleRelX, 0],
                     [0, scaleRelY] ]);


  // scale both the polygon and the gradient
  // we iterate so that the translation is done on every point
  var scale = function(point){
    // convert the point into a matrix
    point = $M([[point.x], 
                [point.y]]);

    // scale
    var newPoint = scaleMatrix.multiply(point);

    return { "x": newPoint.elements[0][0],
             "y": newPoint.elements[1][0]};
  };

  var newPolygon  = {},
      newGradient = {};

  _.each(polygon, function(point, key){
    newPolygon[key] = scale(point);
  });
  _.each(gradient, function(point, key){
    newGradient[key] = scale(point);
  });

  // calculate the translation to move them to the original position
  // and move them back

  // we know that the points to move to their original position are the
  // ones not in the scale side
  var sides = _.keys(polygon),                   // all possible sides
      movePoints = _.difference(sides, side),    // the points not used in the scale
      point = movePoints[0];                     // the first of these points

  // we use these points to create the translation
  var oldPoint = polygon[point],
      newPoint = newPolygon[point];
  var translateMatrix = $M([ [newPoint.x - oldPoint.x],
                             [newPoint.y - oldPoint.y] ]);

  var translate = function(point){
    // convert the point into a matrix
    point = $M([[point.x], 
                [point.y]]);

    // translate
    var newPoint = point.add(translateMatrix);

    return { "x": newPoint.elements[0][0],
             "y": newPoint.elements[1][0]};
  };
  // apply the translation
  _.each(newPolygon, function(point, key){
     newPolygon[key] = translate(point);
   });
   _.each(newGradient, function(point, key){
     newGradient[key] = translate(point);
   });

  // return the new coordinates
  return [newPolygon, newGradient];
};
// apply the algorithm
var newPolygon, newGradient = null;
var result = scalePolyWithGradient(polygon, gradient, scaleAbsX, scaleAbsY, side);
newPolygon = result[0];
newGradient = result[1];

結果

 newPolygon = { "a": {
                   "x": 178.2885,
                   "y":82.405 
                 },
                 "b": {
                   "x": 96.00089999999999,
                   "y": 20.598999999999997
                 },
                 "c": {
                   "x": 13.714500000000001,
                   "y": 82.405
                 },
                 "d": { 
                   "x": 96.00089999999999,
                   "y":144.19299999999998
                 }
               }
 newGradient = { "a": {
                   "x": 212.12550000000005,
                   "y":80.14930000000001
                 },
                 "b": {
                     "x": -46.274699999999996,
                     "y": 85.14955
                 }
               }

古い答え

スタックオーバーフローに画像をアップロードできないため、画像はここにあります（評判が低いです）

ポリゴンの側面を抽象化して、それに集中できるようにしました。左の写真はスケーリング前です。これで、「全体」のグラデーションを描画して、何をスケーリングする必要があるかを示しました。必要な座標を把握するには、ポリゴンの辺と同じ比率でグラデーションの2乗をスケーリングします。

この画像には回転がないことはわかっていますが、この方法を拡張してこれを組み込むこともできます。

私はこのようなもののアルゴリズムを導き出すことができますが、そうする時間がありませんでした。それで、これがあなたが望むものであるならば、私に知らせてください、そして、私は明日それに着きます。

于 2012-07-14T19:14:52.723 に答える
4

グラデーションに変換を適用できます。つまり、などの操作を実行できますgradientTransform="rotate(45)。これにより、回転の問題が解決します。

相対単位を使用し、との値がポリゴンの寸法に対応するobjectBoundingBoxようにユーザースペースをに設定する必要があります。あなたのsvgはこのようになります。xy

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <linearGradient id="top_surface_2_gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="100%" gradientTransform="rotate(0 0.5 0.5)">
    <stop  offset="0" style="stop-color:#000"/>
    <stop  offset="1" style="stop-color:#fff"/>
  </linearGradient>
  <polygon id="top_surface_2" fill="url(#top_surface_2_gradient)" points="205.788,215.557 137.215,174.354 0.078,256.629 68.649,297.823"/>
</svg>​

ここで、さまざまなサイズのポリゴンでどのように機能するかをテストできます：http: //jsfiddle.net/hqXx2/

于 2012-07-09T18:13:02.547 に答える