Вычислять новые градиентные позиции после того, как многоугольник заполняет изменения размеров

Ответ 1

Вы можете применить преобразования к градиентам, это означает, что вы можете делать такие вещи, как gradientTransform="rotate(45). Это решает проблему вращения.

Вы должны использовать относительные единицы и установить для пользователя пространство objectBoundingBox, чтобы значения x и y соответствовали размерам вашего многоугольника. Ваш svg будет выглядеть следующим образом.

<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/

Ответ 2

Обновление 3 Альтернативная идея

Альтернативным решением могло бы быть вычисление процентных значений на основе двух конечных точек градиента.
На этом рисунке вы видите исходный многоугольник abcd, его ограничивающий прямоугольник a'b'c'd' и градиент g1g2. Теперь цель состоит в том, чтобы сначала вычислить две точки g1 и g2 в абсолютных величинах, а затем вычислить относительные значения этих двух.

Я вывел алгоритм, который выполняет большую часть того, что я описал, но ему не удается вычислить пересечение градиента и ограничивающего прямоугольника. У меня есть идея о том, как решить эту проблему, но сейчас не время ее реализации, поэтому я перечисляю шаги для этого.
Основная идея состоит в том, чтобы проверить, пересекает ли градиент с одной из линий через углы ограничивающей рамки (a'b', b'c', c'd', d'a'), а затем проверяет, находится ли пересечение на краю обсуждаемый. В настоящее время есть два особых случая, требующих обработки. 1. Градиент вертикальный, это означает, что его наклон бесконечен 2. Сторона, о которой идет речь, является вертикальной, снова это означает, что ее наклон бесконечен Все остальные случаи легко разрешимы с помощью базовой математики (двухточечная форма линии, пересечение двух линий).

Мой алгоритм

_ = 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

Вопрос: Также как меняется координаты градиента, если многоугольник перемещается в пространстве в целом и не растягивается.?

Ответ: Вы вычисляете сумму, которую вы переместите одну точку вашего полигона по x и y и переместите точки градиента на ту же сумму.

Теперь я изменил алгоритм, основанный на масштабировании с одной стороны многоугольника на абсолютное количество единиц. Я также создал изображение, чтобы объяснить, что делает алгоритм

• оригинальный многоугольник
• масштабированный многоугольник с помощью масштабного коэффициента, определяемого входами
• переместите многоугольник обратно в исходное место

Обновлено 15.7.2012 Я вывел алгоритм, основанный на идее, которую я предложил с помощью матриц преобразования для преобразования. У меня не было времени проверить его, но код работает под 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
                 }
               }

Старый ответ

Изображение здесь, потому что я не могу загружать изображения в stackoverflow (репутация низка)

Я отвлек сторону многоугольника, чтобы мы могли сосредоточиться на этом. Левое изображение перед масштабированием. Теперь я нарисовал "весь" градиент, чтобы показать, что нужно масштабировать. Чтобы вычислить нужные координаты, просто масштабируется квадрат градиента в той же пропорции, что и сторона многоугольника.

Я знаю, что это изображение без вращения, но этот метод можно расширить, чтобы включить его.

Я могу выработать алгоритм для этого, но у меня не было времени для этого. Поэтому, если это то, что вы хотите, дайте мне знать, и я доберусь до него завтра.