Làm thế nào để tạo ra một gradient cong?

Question

Tôi lập trình rắn với Javascript. Đối với nền của bộ phận cơ thể khác nhau Tôi đang sử dụng hệ dốc sau:

gibGradient: function() { 
    var string = "background: linear-gradient(to right, rgba(243,226,199,1) 15%,rgba(193,158,103,1) "+ snake.data.gradientLinks +"%,rgba(182,141,76,1) "+ snake.data.gradientRechts +"%,rgba(233,212,179,1) 90%);"; 
    if ((snake.data.gradientLinks < 85) && (snake.data.modus == "hochzaehlen")) { 
     snake.data.gradientLinks = snake.data.gradientLinks + 5; 
     snake.data.gradientRechts = snake.data.gradientRechts + 5; 
     if (snake.data.gradientLinks >= 85) { 
      snake.data.modus = "runterZaehlen"; 
     } 
    } 

    if ((snake.data.gradientLinks > 20) && (snake.data.modus == "runterZaehlen")) { 
     snake.data.gradientLinks = snake.data.gradientLinks - 5; 
     snake.data.gradientRechts = snake.data.gradientRechts - 5; 
     if (snake.data.gradientLinks <= 20) { 
      snake.data.modus = "hochzaehlen"; 
     } 
    } 
    return string; 
}, 

Vấn đề của tôi là khi di chuyển con rắn và nó thay đổi hướng, gradient cần được uốn cong để phù hợp với phần cơ thể cuối cùng trước khi các góc kết thúc và cuối cùng theo sau con rắn.

Ví dụ:

Im sử dụng các yếu tố div 10x10 px

Bây giờ tôi cần phải chuyển đổi khi nó di chuyển một góc Bất kỳ ai

có một ý tưởng?

Answer 1

Tôi đã dành thời gian để viết một vài hàm tiện ích javascript mà bạn có thể thấy hữu ích. Tuy nhiên, chúng yêu cầu sử dụng thư viện jQuery. Cách tốt nhất để tạo gradient cong là sử dụng gradient lệch hướng xuyên tâm. Điều này kết hợp với bán kính biên giới làm cho một hiệu ứng thực sự tốt đẹp.

Bây giờ nó là tùy thuộc vào bạn để

• sử dụng chức năng đúng vào đúng thời điểm (quy ước đặt tên của chức năng là sideA_To_sideB nên rightToUp nghĩa đi bên phải sẽ cuối cùng tìm sideA và đi lên cuối cùng sẽ tìm sideB - bên là đầu hoặc đuôi)
• làm cho nó vượt qua trình duyệt (nếu bạn đang ở trong đó loại điều)
• làm tròn đầu và đuôi sẽ là một liên lạc tốt đẹp (lý tưởng này làm tròn sẽ chỉ xảy ra trên phần dọc và ngang)

Hãy thay đổi biến kích thước cho phù hợp với nhu cầu của bạn.

CHỈNH SỬA - dựa trên hình ảnh bạn vừa thêm tôi đã tạo: jsfiddle http://jsfiddle.net/Lbydhhkh/. Điều này được thực hiện bằng cách sử dụng gradient tuyến tính được xoay. Tôi vẫn nghĩ rằng việc sử dụng phương pháp tiếp cận ban đầu của tôi sẽ tốt hơn và có ý nghĩa hơn. Điều này là đủ để gửi cho bạn đi đúng hướng. Mã giả vẫn có thể được sử dụng cho mã mới này.

var size = 40; 
 

 
function aToB(gradient) { 
 
    return $("<div>").css({ 
 
     width: size, 
 
     height: size, 
 
     background: gradient, 
 
     position: "absolute" 
 
    }); 
 
} 
 

 
function radialOut(x, y, corner) { 
 
    var css = {}; 
 
    css["border-" + corner + "-radius"] = size/2; 
 
    return aToB([ 
 
     "radial-gradient(", 
 
    size, 
 
     "px at ", 
 
    x, 
 
     "px ", 
 
    y, 
 
     "px, red, blue)"].join("")).css(css); 
 
} 
 

 
function radialIn(x, y, corner) { 
 
    var css = {}; 
 
    css["border-" + corner + "-radius"] = size/2; 
 
    return aToB([ 
 
     "radial-gradient(", 
 
    size, 
 
     "px at ", 
 
    x, 
 
     "px ", 
 
    y, 
 
     "px, blue, red)"].join("")).css(css); 
 
} 
 

 
function downToUp() { 
 
    return aToB("linear-gradient(to left, red, blue)"); 
 
} 
 

 
function rightToLeft() { 
 
    return aToB("linear-gradient(to bottom, red, blue)"); 
 
} 
 

 
function upToDown() { 
 
    return aToB("linear-gradient(to right, red, blue)"); 
 
} 
 

 
function leftToRight() { 
 
    return aToB("linear-gradient(to top, red, blue)"); 
 
} 
 

 
function upToRight() { 
 
    return radialIn(size, 0, "bottom-left"); 
 
} 
 

 
function leftToUp() { 
 
    return radialIn(0, 0, "bottom-right"); 
 
} 
 

 
function downToLeft() { 
 
    return radialIn(0, size, "top-right"); 
 
} 
 

 
function rightToDown() { 
 
    return radialIn(size, size, "top-left"); 
 
} 
 

 
function rightToUp() { 
 
    return radialOut(size, 0, "bottom-left"); 
 
} 
 

 
function upToLeft() { 
 
    return radialOut(0, 0, "bottom-right"); 
 
} 
 

 
function leftToDown() { 
 
    return radialOut(0, size, "top-right"); 
 
} 
 

 
function downToRight() { 
 
    return radialOut(size, size, "top-left"); 
 
} 
 

 
$(function() { 
 
    //inner 
 
    $("body").append(upToDown().css({ 
 
     top: size, 
 
     left: 0 
 
    })).append(upToRight().css({ 
 
     top: size * 2, 
 
     left: 0 
 
    })).append(leftToRight().css({ 
 
     top: size * 2, 
 
     left: size 
 
    })).append(leftToUp().css({ 
 
     top: size * 2, 
 
     left: size * 2 
 
    })).append(downToUp().css({ 
 
     top: size, 
 
     left: size * 2 
 
    })).append(downToLeft().css({ 
 
     top: 0, 
 
     left: size * 2 
 
    })).append(rightToLeft().css({ 
 
     top: 0, 
 
     left: size 
 
    })).append(rightToDown().css({ 
 
     top: 0, 
 
     left: 0 
 
    })); 
 

 
    //outer 
 
    $("body").append(leftToDown().css({ 
 
     top: 0, 
 
     left: size * 5 
 
    })).append(upToDown().css({ 
 
     top: size, 
 
     left: size * 5 
 
    })).append(upToLeft().css({ 
 
     top: size * 2, 
 
     left: size * 5 
 
    })).append(rightToLeft().css({ 
 
     top: size * 2, 
 
     left: size * 4 
 
    })).append(rightToUp().css({ 
 
     top: size * 2, 
 
     left: size * 3 
 
    })).append(downToUp().css({ 
 
     top: size * 1, 
 
     left: size * 3 
 
    })).append(downToRight().css({ 
 
     top: 0, 
 
     left: size * 3 
 
    })).append(leftToRight().css({ 
 
     top: 0, 
 
     left: size * 4 
 
    })); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ngoài ra đây là một số giả để giúp bạn gọi các chức năng thích hợp

while(nextPart()) { //while there are more parts to process 
    var prev = getPrev(), //returns null or previous part 
     curr = getCurrent(), //returns current part 
     next = getNext(), //returns null or next part 
     a, b, part = []; 

    //get the direction towards the tail 
    if(prev) a = curr.getDirectionTo(prev); //returns "up", "right", "down", or "left" 
    else a = tail.getOppositeDirection(); //returns "up", "right", "down", or "left" 

    //get the direction towards the head 
    if(next) b = curr.getDirectionTo(next); 
    else b = head.getDirection(); //returns "up", "right", "down", or "left" 

    b = upperCaseFirstLetter(b); 

    if(!prev) part.push("tail"); //is this a tail? 
    if(!next) part.push("head"); //is this a head? 

    //the following line of code calls a function with the form "aToB" 
    //the variable part does not do anything yet but it can help the called 
    //function determine if this part is a head, tail, or both for rounding 
    var domElement = window[a + "To" + b](part); 
    domElement.css(curr.position()); //properly position the element 
    $("#container").append(domElement); //add the element to the container 
}