Cant find a fix for this anywhere! I want to produce a single character and then rotate it (inside a mouseover event). Since I need to use cufon for the custom font, print
must be used to summon the text. This works fine. But when in any way
trying to transform the single character weird things happen. It seems
to reset itself in size and placement, making it impossible to use.
Just applying a rotation with transform : "r0" makes the character huge and displaced in the middle of the screen.
Any thoughts on how to animate a printed "set" such as this??
var paper = new Raphael(document.getElementById('elementDiv'), 1350,
900);
var custom = paper.print(5, 25, "A", paper.getFont("Web"),
30).attr({fill: "#000"});
custom[0].stop().animate({fill: "#4d3416", transform: "r20, s2"}, 300,
"<>");
Thanks a bunch!
This problem has been solved by newer Raphael libraries, animations on objects created by print is now behaving correctly
Related
n00b here so please excuse my lack of terminology,
How do I make an irregular polygon with this style of code?
this.matter.add.rectangle(100, 300, 30, 400);
this.matter.add.circle(125, 200, 40);
this.matter.add.polygon(150, 10, 5, 30);
Those are examples of some working closed shapes in my page.
I tried adding pairs of x,y coordinates but the page fails, I’m not even sure if .polygon is the element name I need, I tried .points but I’m such a n00b, I could have gotten the element type, bracket types, or commas wrong etc? Here is my page so far:
https://www.rhgrafix.com/SlicePhysics.htm which has these externals:
https://www.rhgrafix.com/js/game.js
https://www.rhgrafix.com/js/phaser.js
https://www.rhgrafix.com/js/polyk.js
I see that the elements get set up in phaser.js, but the code syntax is confusing, all the tutorials have a different syntax style than what I have.
My page based on this demo by Emanuele Feronato https://www.emanueleferonato.com/wp-content/uploads/2019/03/slice/
My goal is to draw a simple outline of an anvil and slice it up, and hopefully learn how to color each shape outline a different color and fill them with color and hope it still slices up .I have a feeling that it may have to be made from primitive shapes in a group, as long as it doesn’t fall apart and can be sliced with polyk.js I’m happy. Thanks much!
R.L. Hamm
I have a group of elements that are masked by a rect in SnapSVG and I want to translate the elements, bringing new ones into view (and hiding ones that are currently in view). The code is really simple - here's a codepen: http://codepen.io/austinclemens/pen/ZbpVmX
As you can see from the pen, box1, which starts outside the mask element (clip) should cross through it when animated, but it never appears. Moreover, box2, which should move out of the clipping area, remains visible.
This example seems to do a similar thing and has no problems: http://svg.dabbles.info/snaptut-masks2
Here's the code from codepen:
var t = Snap('#target')
var clip=t.rect(200,200,200,200).attr({fill:'#fff'})
var box1=t.rect(300,100,50,50).attr({fill:'#000'})
var box2=t.rect(300,300,50,50).attr({fill:'#000'})
var boxgroup=t.group(box1,box2)
boxgroup.attr({mask:clip})
boxgroup.animate({transform:'t100,300'},2000)
I notice that the svg.dabbles examples translates the clip region by 0,0 at one point, but adding something like that doesn't seem to get me anywhere.
Ok, I figured this out thanks in part to this really great article about SVG transforms: http://sarasoueidan.com/blog/svg-transformations/
The upshot is that when I translate the box group, it takes the mask with it. This is a little confusing to me still - I guess the mask attribute is causing this somehow? Anyways, the solution is to apply an opposite translation to the mask to keep it in place. Check the pen to see it in action but basically I just had to add:
clip.animate({transform:'t-100,-300'},2000)
The tricky part of this is that you now need to synchronize the movement of the mask and the movement of the box group.
edit - I now demonstrate how synchronization can be achieved using snap's set.animate method on the codepen.
Hi everyone I cant figure out how to move a Raphael set . For the docs I've read you can use transform to resize and reposition the element. But regardless of what string arguments I put into the function it doesnt seem to change even a slight bit. Can anyone help me reposition and rescale this beatiful chair.
seat.push(shapeA,shapeB);
seat.transform("t100,100r45t-100,0");;
jsfiddle
thanks
You haven't defined the 'seat' variable, and initialised it as a set (should this be set?). eg
var seat = paper.set();
jsfiddle
This is not a: "Do all the work for me!" kind of question. I just wanna know which approach you think would be suitable for this challenge.
I have this map:
As you can see by the blue marker, I've roughly drawned some selections/areas of the map. Theese areas I want to serve as links.
But I don't quite know how to grasp this challenge, since all of the areas have quite odd shapes.
I have looked at cords, but it seems like a huge job with all of the twists and turns that I would need to do.
I would be awesome if I could just slice up the areas in Photoshop and save each of them as .png and just tell my page to ignore the transparent area! But that's just wishfull thinking I suppose.
I hope that one of you have a suggestion that I've overlooked.
Give a try to these -
http://polymaps.org/
http://www.amcharts.com/javascript-maps/
Raphael JS
You can try making an SVG version of your map and then implement it's clickiness with one of these libraries depending on which one you choose.
Here's one tutorial to do this with Raphael JS - http://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map
Make an image for each clickeable zone, like this:
Register to the click event of the img element from the page, this way:
var getAreaFromXY = function(x,y) {
// for each section colored map
// get pixel color on x,y (see http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image)
// if the color is red, that is the zone
};
$(".post-text img").click(function(e) {
var area = getAreaFromXY(e.offsetX, e.offsetY);
});
When animating one layer in canvas the graphics become choppy if there are other layers present, see fiddle (click RUN to see animation): http://jsfiddle.net/Q97Wn/
If i change this line:
opts.percentageIndicator.clearRect(0, 0, opts.percentageIndicator.width, opts.percentageIndicator.height);
To:
opts.percentageIndicator.clearRect(0, 0, opts.canvas.width, opts.canvas.height);
Then everything goes smoothly, except that this will remove the other layer completely.
I could solve this issue by having both in one canvas each, but i was hoping for structure-purposes that i could avoid that. Any suggestions?
First of all, canvas.getContext() not generating new context, it returning already existing instance, so the lines:
opts.centerCircle = opts.canvas.getContext('2d');
// ...
opts.percentageIndicator = opts.canvas.getContext('2d');
Would mean the same thing.
So I advice you to do like this:
http://jsfiddle.net/Volter9/Q97Wn/2/
What I did I just changed both contexts to one property and after rendering base added:
opts.ctx.strokeStyle = opts.indicatorColor;
Good luck!