Цветовой градиент (ColdFusion) - PullRequest
Новая
       11

Цветовой градиент (ColdFusion)

0 голосов
/ 02 апреля 2012

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

<cfset BoxNumber = RandRange(100,1000) >

<cfset Start_Red = 255 >
<cfset Start_Green = 0 >
<cfset Start_Blue = 0 >

<cfset End_Red = 0 >
<cfset End_Green = 0 >
<cfset End_Blue = 255 >

<div id="color-band">

<cfloop index = "i" from = 0 to = #BoxNumber# >

<cfset Percent = i \ (BoxNumber - 1) >

<cfset Red = int(((End_Red - Start_Red) * Percent) + Start_Red) >
<cfset Green = int(((End_Green - Start_Green) * Percent) + Start_Green) >
<cfset Blue = int(((End_Blue - Start_Blue) * Percent) + Start_Blue) >

<div style="background-color:rgb(<cfoutput>#Red#</cfoutput>, <cfoutput>#Green#  </cfoutput>, <cfoutput>#Blue#</cfoutput>)">&nbsp;</div>

</cfloop>

</div>

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

Ответы [ 3 ]

2 голосов
/ 03 апреля 2012

Приношу свои извинения, если это не то направление, в котором вам нужно двигаться, но есть ли какая-то причина, по которой вы не просто создали бы один DIV с градиентным фоном (в отличие от числа "x" div с сплошным фоном)?Я понимаю, если это так, но подумал, что я бы предложил альтернативу с точки зрения градиентов CSS3.В противном случае кажется, что предложение Ли сработает.

В этом примере я использовал ваш код, поскольку похоже, что вам нужен градиент от красного (255,0,0) до синего (0,0,255).Я настроил код и запустил его в Safari (5.1.5), Chrome (19.x) и FireFox (12): 

<cfset Start_Red = 255 >
<cfset End_Blue = 255 >
<html>
    <cfoutput>
    <head>
        <title>Color Gradient Test</title>
        <style type="text/css">
            .my_gradient{
                background: ##ff0000;
                background: -moz-linear-gradient(top, rgb(#Start_Red#, 0, 0) 0%, rgb(0,0,#End_Blue#) 100%); 
                background: -webkit-gradient(linear, left top, left bottom, from(rgb(#Start_Red#, 0, 0)), to(rgb(0,0, #End_Blue#)) );"
            }
        </style>
    </head>
    <body>
        <div id="color-band">       
        <div class="my_gradient">&nbsp;</div>       
        </div>
    </body>
    </cfoutput>
</html>

Выше только создает красный (255,0,0) длясиний (0,0,255) градиент в вышеупомянутых браузерах, но ColorZilla.com имеет приятный генератор градиентов CSS, который генерирует CSS, который вам понадобится для получения эффектов градиента в браузерах.

0 голосов
/ 02 апреля 2012 
<cfset Percent = i \ (BoxNumber - 1) >
...
<cfset Red = int(((End_Red - Start_Red) * Percent) + Start_Red) >

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

Если это не учебное упражнение, вы, возможно, захотите поискать существующую функцию или метод, а не изобретать велосипед. (Изменить: Например, взгляните на предложение Крейга). В противном случае, вы можете взглянуть на cflib.org для вдохновения. Функция fadeList показывает основную концепцию генерации градиента (хотя и с шестнадцатеричным). Это не совсем верно, но что-то в этом роде 

...    
<cfset RedOffset = (Start_Red - End_Red) / BoxNumber>
<cfset GreenOffset = (Start_Green - End_Green) / BoxNumber>
<cfset BlueOffset = (Start_Blue - End_Blue) / BoxNumber>

<div id="color-band">
<cfloop index="i" from="0" to ="#BoxNumber#">
    <cfset Red = int(Start_Red - (RedOffset * i))>
    <cfset Green = int(Start_Green - (GreenOffset * i))>
    <cfset Blue = int(Start_Blue - (BlueOffset * i))>
    <cfoutput>
    <div style="height: 5px; background-color:rgb(#Red#, #Green#, #Blue#)">&nbsp;</div>
    </cfoutput>
</cfloop>
</div>
0 голосов
/ 02 апреля 2012

У меня нет вашего ответа, но у меня есть два небольших предложения.

1) Поместите ваши CFOUTPUT вокруг большего блока, чтобы сделать его более читабельным: 

<cfoutput>
    <div style="background-color:rgb(#Red#, #Green#, #Blue#)">&nbsp;</div>
</cfoutput>

2) Я использую Hostek.com для хостинга ColdFusion. У них есть отличные счета всего за 5 долларов в месяц. Вы можете получить CF8 / 9/10. Это отличный способ дешево протестировать материал ColdFusion.

...