Related
I've created a bunch of cubic bezier curves in 1 svg path and now trying to fill the path from top to bottom with dasharray and offset, but the animation keeps starting at every cubic bezier curve start point, so at every C in the path. how can I combine the lines, so the animation goes from the very top to the very bottom?
Here's my svg animation:
https://codepen.io/mj2023/pen/wvEMwyB
<style>
svg {
width: 600px;
overflow:visible;
}
#lined-svg path {
stroke-dasharray: 7867.43;
stroke-dashoffset: 7867.43;
animation: dash 5s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 7867.43;
}
to {
stroke-dashoffset: 0;
}
}
</style>
<svg id="lined-svg" viewBox="0 0 600 4088">
<path stroke="red" fill="none" stroke-width="6" d="M 300, 0 C 300, 114, 600, 76, 600, 190 C 600, 304, 300, 266, 300, 380 M 300, 380, C 300, 542.6, 600, 488.4, 600, 651 C 600, 813.6, 300, 759.4, 300, 922 M 300, 922, C 300, 1003.6, 600, 976.4, 600, 1058 C 600, 1139.6, 300, 1112.4, 300, 1194 M 300, 1194, C 300, 1308, 600, 1270, 600, 1384 C 600, 1498, 300, 1460, 300, 1574 M 300, 1574, C 300, 1655.6, 600, 1628.4, 600, 1710 C 600, 1791.6, 300, 1764.4, 300, 1846 M 300, 1846, C 300, 2008.6, 600, 1954.4, 600, 2117 C 600, 2279.6, 300, 2225.4, 300, 2388 M 300, 2388, C 300, 2604.6, 600, 2532.4, 600, 2749 C 600, 2965.6, 300, 2893.4, 300, 3110 M 300, 3110, C 300, 3224, 600, 3186, 600, 3300 C 600, 3414, 300, 3376, 300, 3490 M 300, 3490, C 300, 3555.4, 600, 3533.6, 600, 3599 C 600, 3664.4, 300, 3642.6, 300, 3708 M 300, 3708, C 300, 3822, 600, 3784, 600, 3898 C 600, 4012, 300, 3974, 300, 4088"></path>
</svg>
I am trying to draw a shadow for a ModalView using the Canvas Line vertex instructions. I.e. the ModalView bottom and left sides should have a slight shadowy overlay when open. I have tried calling the ModalView property overlay_color with no effect and Canvas Line vertex instructions do not create the right effect. But I cannot seem to only draw a bottom and left border that gives the shadowy effect.
<PopScrollModal>
on_open: app.root._is_modal_open = True
on_dismiss: app.root._is_modal_open = False
id: popscroll
auto_dismiss: True
orientation: 'vertical'
size_hint: (0.94, 0.41)
border: [50, 50, 16, 16]
overlay_color: [0.1, 0.1, 0.1, 0.4]
pos_hint: {'top': 0.72}
background_normal: ''
background_color: (1, 1, 1, 0)
background: 'white.png'
canvas:
Color:
rgba: app.theme_cls.bg_dark
RoundedRectangle:
size: self.size
pos: self.pos
radius: [7,]
canvas.after:
Color:
rgba: (0.2, 0.2, 0.2, 0.4)
Line:
width: 1.
rounded_rectangle: (self.x, self.y, self.width, self.height, 7)
RecycleView:
id: view_popscroll
viewclass: 'PopScrollBut'
pos_hint: {'top': 1}
size_hint: [1, 0.99]
do_scroll_y: True
RecycleGridLayout:
cols: 1
spacing: 1
default_size: None, 70
default_size_hint: 1, None
size_hint: 1, None
size: self.minimum_size
This line instruction draws on the bottom but does not adhere to the radius of the canvas:
canvas.after:
Color:
rgba: (0.2, 0.2, 0.2, 0.4)
Line:
width: 1.
close: False
points: self.pos[0], self.pos[1], self.pos[0] + self.size[0], self.pos[1]]
The Line instruction only draws a line around the ModalView.
Can somebody help to understand how to set the Points so they only appear left and bottom or set the overlay_color in the same way?
You can do that using BorderImage. It is not well documented and difficult to understand how it is actually intended to work. But here is an example that mostly does what you want:
class MyPop(Popup):
pass
kv = '''
<MyPop>:
canvas.before:
BorderImage:
source: 'shadow32.png'
border: 30, 0, 0, 30
pos: self.x - 30, self.y - 30
size: self.width + 60, self.height + 60
'''
And here is the shadow32.png that is used above:
I defined a function that changes list (basically moves the last item to the start of list) and then i tried to make a 2d list with this fuction.
Here's some code:
prevRow = ["blue", "yellow", "red", "black", "white"]
def nextRow():
prevRow.insert((0, prevRow.pop()))
print(prevRow)
return prevRow
tablePreset = [["blue", "yellow", "red", "black", "white"], nextRow(), nextRow(), nextRow(), nextRow()]
print(tablePreset)
prevRow = ["blue", "yellow", "red", "black", "white"]
tablePreset = [["blue", "yellow", "red", "black", "white"]]
def nextRow():
prevRow.insert((0, prevRow.pop()))
print(prevRow)
return prevRow
for _ in range(4):
tablePreset.append(nextRow())
print(tablePreset)
in both cases i got the
['white', 'blue', 'yellow', 'red', 'black']
['black', 'white', 'blue', 'yellow', 'red']
['red', 'black', 'white', 'blue', 'yellow']
['yellow', 'red', 'black', 'white', 'blue']
[['blue', 'yellow', 'red', 'black', 'white'], ['yellow', 'red', 'black', 'white', 'blue'], ['yellow', 'red', 'black', 'white', 'blue'], ['yellow', 'red', 'black', 'white', 'blue'], ['yellow', 'red', 'black', 'white', 'blue']]
I don't know why but even though i called function 4 times, every return in the list is the same as the last value (print inside the function is for debugging purposes).
I'll be very greatfull if someone helps me :)
You need to make a copy of the list every time it's passed to the function nextRow (see code below). Some more information here (related topic).
prevRow = ["blue", "yellow", "red", "black", "white"]
tablePreset = [["blue", "yellow", "red", "black", "white"]]
def nextRow(prevRow):
prevRow_copy = prevRow.copy()
prevRow_copy.insert(0, prevRow_copy.pop())
return prevRow_copy
for _ in range(4):
prevRow = nextRow(prevRow)
tablePreset.append(prevRow)
print(tablePreset)
# >> out:
# [['blue', 'yellow', 'red', 'black', 'white'],
# ['white', 'blue', 'yellow', 'red', 'black'],
# ['black', 'white', 'blue', 'yellow', 'red'],
# ['red', 'black', 'white', 'blue', 'yellow'],
# ['yellow', 'red', 'black', 'white', 'blue']]
Another small example illustrating the importance of the copy:
a = []
b = [1,2,3]
a.append(b)
b.pop()
a.append(b)
b.pop()
a.append(b)
print(a)
# >> out:
# [[1], [1], [1]]
a = []
b = [1,2,3]
a.append(b.copy())
b.pop()
a.append(b.copy())
b.pop()
a.append(b.copy())
print(a)
# >> out:
# [[1, 2, 3], [1, 2], [1]]
I have two squares: red with color (255, 0, 0) 50% opacity, blue with color (0, 0, 255) 50% opacity
and black opaque background.
At the intersection of these colors, Photoshop shows the color (128, 0, 64) (
photoshp screenshot
).
And I agree whith that. Blue color first blends with black background:
(0, 0, 255) * 0.5 + (0, 0, 0) * ( 1 - 0.5) = (0, 0, 127.5)
alpha = 0.5 + 1 * (1 - 0.5) = 1
Then the result is mixed with red:
(255, 0, 0) * 0.5 + (0, 0, 127.5) * (1 - 0.5) = (127.5, 0, 63.75)
alpha = 0.5 + 1 * (1 - 0.5) = 1
But if background is transparent photoshop gives color (170, 0, 85) with 75% opacity (
photoshp screenshot
).
How does it get that color? I expected (127.5, 0, 127.5) with 75% opacity, because there is nothing in background to blend with.
Following the math described in this article, alpha blending blue square with 50% opacity onto the black background with 0% opacity results in this:
alpha_bg = 0
alpha_fg = 0.5
alpha_blended = alpha_fg + alpha_bg * (1 - alpha_fg) = 0.5
color_blended = ({0, 0, 255} * alpha_fg + {0, 0, 0} * (alpha_bg * (1 - alpha_fg))) / alpha_blended =
({0, 0, 255} * 0.5 + {0, 0, 0} * 0) / 0.5 = {0, 0, 255}
Then, repeating these calculations for blending the red square with 50% opacity on top of the color we calculated above:
alpha_bg = 0.5
alpha_fg = 0.5
alpha_blended = alpha_fg + alpha_bg * (1 - alpha_fg) = 0.5 + 0.5 * (1 - 0.5) = 0.75
color_blended = ({255, 0, 0} * alpha_fg + {0, 0, 255} * (alpha_bg * (1 - alpha_fg))) / alpha_blended =
({255, 0, 0} * 0.5 + {0, 0, 255} * (0.5 * (1 - 0.5))) / 0.75 = {170, 0, 85}
http://www.mediafire.com/view/z8ad4pedqr7twbl/donut.png
I want to draw this donut like that image. I have use raphaeljs for draw it. But I can't find the solution to make these borders with red and blue. Can someone help me? Is it possible or not?
My code below:
Raphael.fn.donutChart = function (cx, cy, r, rin, values, labels, stroke) {
var paper = this,
rad = Math.PI / 180,
chart = this.set();
function sector(cx, cy, r, startAngle, endAngle, params) {
//console.log(params.fill);
var x1 = cx + r * Math.cos(-startAngle * rad),
x2 = cx + r * Math.cos(-endAngle * rad),
y1 = cy + r * Math.sin(-startAngle * rad),
y2 = cy + r * Math.sin(-endAngle * rad),
xx1 = cx + rin * Math.cos(-startAngle * rad),
xx2 = cx + rin * Math.cos(-endAngle * rad),
yy1 = cy + rin * Math.sin(-startAngle * rad),
yy2 = cy + rin * Math.sin(-endAngle * rad);
return paper.path(["M", xx1, yy1,
"L", x1, y1,
"A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2,
"L", xx2, yy2,
"A", rin, rin, 0, +(endAngle - startAngle > 180), 1, xx1, yy1, "z"]
).attr(params);
}
var angle = 0,
total = 0,
start = 0,
process = function (j) {
var value = values[j],
angleplus = 360 * value / total,
popangle = angle + (angleplus / 2),
color = Raphael.hsb(start, .75, 1),
ms = 500,
delta = 30,
bcolor = "#ccc",
p = sector(cx, cy, r, angle, angle + angleplus, {fill:"#dfdfdf", "stroke-width":3, stroke:"red"}),
txt = paper.text(cx + (r + delta + 155) * Math.cos(-popangle * rad), cy + (r + delta + 150) * Math.sin(-popangle * rad), labels[j]).attr({fill:"#000", stroke: "none", opacity: 0, "font-size": 20});
p.mouseover(function () {
p.stop().animate({transform: "s1.25 1.25 " + cx + " " + cy}, ms, "elastic");
txt.stop().animate({opacity: 1}, ms, "elastic");
}).mouseout(function () {
p.stop().animate({transform: ""}, ms, "elastic");
txt.stop().animate({opacity: 0}, ms);
});
angle += angleplus;
chart.push(p);
chart.push(txt);
start += .1;
};
for (var i = 0, ii = values.length; i < ii; i++) {
total += values[i];
}
for (i = 0; i < ii; i++) {
process(i);
}
return chart;
};
var values = [],
labels = [];
$("tr").each(function () {
values.push(parseInt($("td", this).text(), 10));
labels.push($("th", this).text());
});
$("table").hide();
Raphael("holder", 700, 700).donutChart(350, 350, 80, 150, values, labels, "#fff");
You have to create separate paths if you want to stroke them differently:
var p = paper.path(["M", xx1, yy1,
"L", x1, y1,
"A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2,
"L", xx2, yy2,
"A", rin, rin, 0, +(endAngle - startAngle > 180), 1, xx1, yy1, "z"]
).attr(params);
paper.path(["M", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2]).attr({stroke: 'blue', 'stroke-width': 3});
paper.path(["M", xx2, yy2, "A", rin, rin, 0, +(endAngle - startAngle > 180), 1, xx1, yy1]).attr({stroke: 'red', 'stroke-width': 3});
return p;