Создание тени для каждой строки моего скрипта

1

Я хотел создать тень/курс по моему сценарию на основе данных каждой строки.

Я нашел полезный скрипт в Stackoverflow для создания тени/курса.

вот мой полный код:

const svg = document.getElementById('root')
let dom = []

const data = []
data.push([1000,2500,5000,10000,150,350,0]) // row 1
data.push([2,0,0,1,8,6,5]) // row 2
data.push([9,10,5,2,0,3,8]) // row 3
data.push([1,2,3,3,2,1,0]) // row 4
data.push([0,1,3,3,7,0,0]) // row 5
data.push([0,1,0,1,0,1,0]) // row 6
data.push([1,10,20,30,10,20,4]) // row 7
data.push([1,5,10,25,20,0,1]) // row 8
data.push([15,8,51,1,2,5,9]) // row 9
data.push([2,8,2,5,7,5,1]) // row 10

const seedColor = '#00cc00'
const rows = data.length
const cols = 7
const margin = 2
const height = 10
const width = 30
const svgHeight = (rows * height) + (rows * margin)

// @see http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
_shadeColor2 = (color, percent) => {
  let f = parseInt('${color}'.slice(1),16),
      t   = percent < 0 ? 0 : 255,
      p   = percent < 0 ? percent * -1 : percent,
      R   = f>>16,
      G   = f>>8&0x00FF,
      B   = f&0x0000FF;
  return "#" + (0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1);
}

for(let r = 0; r < rows; r++) {
    const max = Math.max(...data[r])
  const faktor = 1 / max

  for(let c = 0; c < cols; c++) {
    let shadeBy = data[r][c] * faktor

    let colorRx = /(#(?:[0-9a-f]{2}){2,4}|#[0-9a-f]{3}|(?:rgba?|hsla?)\((?:\d+%?(?:deg|rad|grad|turn)?(?:,|\s)+){2,3}[\s/]*[\d.]+%?\))/i
    color = _shadeColor2(seedColor, shadeBy)

        dom.push('<rect x="'+((width*c)+margin*c)+'" y="'+((height*r)+margin*r)+'" width="30" height="10" fill="'+color+'" ></rect>')
  } 
}

svg.style.height = svgHeight
svg.innerHTML = dom.join('')

и приведенный пример: https://jsfiddle.net/0zLotkhu/33/

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

  • 0
    Почему вы думаете, что результат не то, что вы хотели? Для каждой строки самое высокое значение отображается на #ffffff, 0 отображается на # 00cc00, а каждое другое значение между ними. Опишите, какие цвета вы хотели достичь.
  • 0
    И что вы подразумеваете под "настоящим исчезновением"?
Показать ещё 3 комментария
Теги:
ecmascript-6
svg
babeljs

1 ответ

1

Вы ищете разные оттенки зеленого цвета, чтобы быть дальше друг от друга? Я не могу сказать, что я понимаю формулу, которую вы используете, чтобы достичь ваших процентов, но мне кажется, что прямоугольники окрашиваются точно так, как вам нужно, но проценты слишком близки друг к другу. Посмотрите на этот пример, где я добавил ваши проценты (я ограничил десятичное число до двух), и вы поймете, что я имею в виду.

const svg = document.getElementById('root')
let dom = []

const data = []
data.push([1000,2500,5000,10000,150,350,0]) // row 1
data.push([2,0,0,1,8,6,5]) // row 2
data.push([9,10,5,2,0,3,8]) // row 3
data.push([1,2,3,3,2,1,0]) // row 4
data.push([0,1,3,3,7,0,0]) // row 5
data.push([0,1,0,1,0,1,0]) // row 6
data.push([1,10,20,30,10,20,4]) // row 7
data.push([1,5,10,25,20,0,1]) // row 8
data.push([15,8,51,1,2,5,9]) // row 9
data.push([2,8,2,5,7,5,1]) // row 10

const seedColor = '#00cc00'
const rows = data.length
const cols = 7
const margin = 2
const height = 10
const width = 30
const svgHeight = (rows * height) + (rows * margin)

// @see http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
_shadeColor2 = (color, percent) => {
percent = percent.toFixed(2)
console.log('shading '+color+ ' percent '+percent)
 var f=parseInt(color.slice(1),16),t=percent<0?0:255,p=percent<0?percent*-1:percent,R=f>>16,G=f>>8&0x00FF,B=f&0x0000FF;
    return "#"+(0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1);
}

for(let r = 0; r < rows; r++) {
	const max = Math.max(...data[r])
  const faktor = 1 / max

  for(let c = 0; c < cols; c++) {
    let shadeBy = data[r][c] * faktor
    
    let colorRx = /(#(?:[0-9a-f]{2}){2,4}|#[0-9a-f]{3}|(?:rgba?|hsla?)\((?:\d+%?(?:deg|rad|grad|turn)?(?:,|\s)+){2,3}[\s/]*[\d.]+%?\))/i
    color = _shadeColor2(seedColor, shadeBy)

		dom.push('<rect x="'+((width*c)+margin*c)+'" y="'+((height*r)+margin*r)+'" width="30" height="10" fill="'+color+'" ></rect><text x="'+((width*c)+margin*c)+'" y="'+((height*r)+7+margin*r)+'" fill="#000000" font-family="arial" font-size="8" >'+shadeBy.toFixed(2)+'</text>')
  }	
}

svg.style.height = svgHeight
svg.innerHTML = dom.join('')
<svg id="root"></svg>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню