skala
skala's Achievements
2
Reputation
-
Thanks a lot Sahil ! This is exactly what I was looking for.
- 30 replies
-
- 1
-
-
- timelinemax
- draggable
- (and 1 more)
-
Hi guys, Can anyone help me implement this approach?
-
Anyway, I agree this would be the best approach unlike the above workaround that I have posted.
-
Hi, I have found a way to make it work for my requirement. I am using the closest point on the path approach and returning bestDistance from the closestPoint function and then I am checking two conditions : 1. bestDistance < some threshold value(for example 10). 2. distance between draggable circle and pointer < some other threshold value(for example 20). (the second condition prevents from jumping) If both the above conditions are satisfied, then I am returning 'p.point' from the pointModifier function, otherwise I am returning {x : draggable.x, y : draggable.y} so that the draggable does not move. This is kind of a workaround which will work for many cases if not all.
-
I am looking at the problem from another angle now. Can we stop the draggable knob from being dragged if the mouse pointer is away from the SVG path(the path on which the knob has to be dragged). If I can allow the drag to work only if the mouse is close to the SVG path(let's say mouse pointer is within some threshold value of 5-10 px from the knob), otherwise the drag should not work, then in that case it will solve the problem of sudden jumping of the draggable knob too. Please suggest me how can I achieve that ?
-
Hi Blake! In this demo too, the drag is not continous. For example, when traversing an outer arc, if we move the cursor closer to the inner arc, it jumps to the inner arc. This will break continuity of the drag and correspondingly the fill. I am looking for a workaround so that the draggable knob does not jump around like that from outer to inner arc and vice-versa. If there is going to be a sudden change like that mentioned above, then instead of that jump I want the draggable knob to not move at all from the current position.(the knob should instead be at the current position itself) How can I achieve that ?
-
Hi Blake, By making use of the 'bestLength' , I am able to fill the SVG upto the current position of the draggable circle. But there is one issue, since the best Length is evaluated as the length upto the closest point on the path, there occurs sometimes a sudden shift(sudden jump) in the filling of SVG path. Thus, the 'continuity' is not maintained. Can there be a workaround for this, so that the drag is smooth and there is no sudden jump in the draggable knob and correspondingly in the stroke. Please advise.
-
Hi Blake! I went through that demo in which you are using the 'closest point on the path' approach. Using the same approach, how to fill the svg path upto the current position of the draggable circle ? I have 2 paths. One is the dash-array one and the other is the path which has to be filled upto current position of the circle. I am initially setting the stroke-opacity of path2 as zero.
-
Hi , It was really helpful. The documentation of BezierPlugin was exactly what I was looking for in my other answer. Now for this one, I would read more and try to make use of 'closest point on the path' approach so that the dragging is along the curve just like actual tracing as pointed out by Blake. Thanks!
-
Hi Carl! Apologies for being impatient and tagging users after a brief duration of time. I got the answer that I was looking for in the other thread as rightly pointed out by Dipscom! Thanks.
-
@Sahil, @Dipscom, @Carl Your help is needed guys.
-
Hi! I am taking Diaco's SVG path range slider as a reference and implementing it for some other types of SVG paths like curve and smooth curve. In Diaco's case, he has given the value 'bezier' and the type as 'quadratic' for the SVG path type quadratic bezier curve. What value should be given for a curve and for a smooth curve?
-
Hi Dipscom! By 'continuity' I meant that the fill of the svg path should be continous and there should not be any gaps. I have created this pen for tracing the number '1' : In the below example, the mouse pointer is 'in sync' with the draggable knob which is possible by using bounds and calling the '.progress' function and passing appropriate value. This was straightforward as for a particular path for example 'path3', the value of y was increasing always(The mouse pointer for tracing moved only in downward direction in y). I want to implement the tracing for the number '2' in a similar way as above. I need help with the tracing of number '2' so that it works in a similar fashion as the tracing of number '1' as shown in the above example. In this case having a curved path, the mouse pointer for tracing will move in both directions in y(first the pointer will go up and then it will go down while tracing). So for this case I need help with implementing similar tracing. Let me know if I was still unable to convey my requirement.
-
Any help is appreciated.
-
Hi, Since the approach followed here is based on the closest point on the path, the continuity of the drag(and correspondingly the fill) will not be maintained always. I am looking for something which will maintain the continuity as well. I am using this as a reference:
- 30 replies
-
- 1
-
-
- timelinemax
- draggable
- (and 1 more)