I have a <canvas> tag in edge animate. I need to convert this in a symbol to import in other projects, but I don't know how to do that.
This is the tag:
<canvas id="myCanvas" width="640" height="350" ></canvas>
Hi you got a file html where store you tag html canvas
< canvas id="myCanvas" width="640" height="350" >
In CC animate (abobe) import model (your html file).
Related
Using paperjs if I rotate p.view.rotate(update.deg); it is working fine with out issue.
If I refresh the page and call the above function p.view.rotate(update.deg); onload then the view is different. it is displaying a slight zoom.
default image rotation
After reloading the page I am rotating p.view with the previous value. then it is displaying as
Here is my js file
https://github.com/muralibobby35/annotateJs/blob/master/opentok-whiteboardnew.js
I was not able to run your code but I would suggest, for an easier project state preservation, that you use transformations (scale, rotation, ...) through layer rather than through view.
That would allow you to easily export/import your project whithout having to manually restore state by calling view.rotate() like methods on window reload.
Here is a fiddle demonstrating the solution.
It simulates window reload by exporting/importing a project from one canvas to another empty one.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debug Paper.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js"></script>
<style>
html,
body {
margin : 0;
overflow : hidden;
height : 100%;
}
main {
display : flex;
height : 100vh;
}
canvas {
flex : 1;
border : 1px solid;
}
</style>
</head>
<body>
<main>
<canvas id="canvas1" resize></canvas>
<canvas id="canvas2" resize></canvas>
</main>
<script type="text/paperscript" canvas="canvas1">
// draw a square
var rectangle = new Path.Rectangle({
from: view.center - 50,
to: view.center + 50,
fillColor: 'orange'
});
// rotate layer rather than view so transformations are persisted when exporting
project.activeLayer.rotate(30);
// export datas and store them in global variable just for the demo, to simulate a page reload
window.exportedDatas = project.exportJSON();
</script>
<script type="text/paperscript" canvas="canvas2">
// import the exported datas
project.importJSON(window.exportedDatas);
// see that rotation is preserved
</script>
</body>
</html>
I'm creating some basic animations using d3.js, such as bar chart animations that show a transition between two sets of data. Ultimately, I want to bring this animation into Adobe AfterEffects to include as part of a larger video. I want to export the web animation as a series of vector frames (ai or svg, or png if necessary) to import into After Effects or Illustrator. How can I do this?
Thanks!
This actually may be quite simple with the way d3.js does transitions! Since d3.js directly changes the DOM elements for doing transitions, you can simply save the DOM elements at each 1/30th of a second. Here's a complete example:
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
svg { border:1px solid black; }
</style>
</head>
<body>
<svg id="svg" width="480" height="240" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg><br/>
<button id="b1" type="button">Animate</button>
<script type="text/javascript">
var svg = d3.select("svg");
var b1 = d3.select("#b1");
var duration = 1000;
var nTimes = 30;
var x = new XMLSerializer();
var n = 0;
function outputToConsole() {
console.log(x.serializeToString(document.getElementById("svg")));
if(n++ >= 30)
return;
setTimeout(outputToConsole, 33); // 33 milliseconds is close to 1/30th of a second
}
b1.on("click", function() {
svg.select("circle").transition().duration(duration).attr("cx",150);
outputToConsole();
});
</script>
</body>
</html>
The last step would be to save each of those outputted svg elements into individual .svg files on disk (instead of just outputting them to the console like in the above example). I haven't tried it yet, but probably one could use something like FileSaver.js. Then optionally the .svg files could be converted into .png files using something like ImageMagick.
Does anyone know the best way to anti-alias svg text that will work in Firefox?
I tried text-antialias:true but this has no effect, and also I tried using a stroke paint but this just thickens up the font and is not what I like.
Example:
<!DOCTYPE html>
<html>
<body>
<svg height="100" width="500">
<text y="50" x="250" text-anchor="middle" style="font-size: 40px" >Hello</text>
</svg>
</body>
</html>
I have uploaded this to http://jsfiddle.net/KJhrY/
This example appears antialiased in IE9 on my PC (Windows)
Firefox 25 will have support for the mox-osx-font-smoothing attribute!
So for firefox 25 you can use:
.yourclass{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Firefox 25 will probably be released somewhere at the end of Oktober was released on 2013-10-29.
Nightly builds can be found at http://nightly.mozilla.org/
Try "text-rendering" attribute.
text-rendering = "optimizeLegibility"
I' try to drawing canvas using example2 taken from http://dev.opera.com/articles/view/html5-canvas-painting/. It works on Firefox 8.0.1 and Opera 11.52.
Then I modified the code put the canvas into a table cell and stop working.
I tried to put canvas outside the table and absolute positioned the canvas on a cell table still doesn't work.
The above problem happened only on Firefox, running well on Opera.
Here's the code
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Sign-In</title>
<style type="text/css"><!--
#imageView { border: 1px solid #000; }
--></style>
</head>
<body>
<p>Please fill in name and id card no. Then sign-in on provided box</p>
<table>
<tr><td>Full Name</td><td><input name="name"><td> </tr>
<tr><td>ID Card No</td><td><input name="idcard"><td> </tr>
<tr><td>Signature</td><td>
<div id="container">
<canvas id="imageView" width="200" height="100"> </canvas>
</div>
</td> </tr>
</table>
<script type="text/javascript" src="http://dev.opera.com/articles/view/html5-canvas-painting/example2.js"></script>
</body></html>
Any idea?
Well, here is your code in jsfiddle: http://jsfiddle.net/7PRDq/
The problem is almost certainly the mouse handling code giving a bad X,Y in Firefox. If you try to draw a signature in the upper-left corner of the box you'll see that it is drawing with an incorrect offset.
If you make the canvas 2000x1000 instead of 200x100 you'll see the problem much more clearly!
You'll need to find more modern mouse code for FireFox.
Noticed a problem with a simple splash page using jquery.cycle.
http://www.rynicdesign.com/
With firefox (firebug installed), the rotating images will not display the first time the page is accessed (without cache - ctrl-f5) yet will load properly on subsequent requests.
Not seeing this condition with other browsers (ie, chrome, safari).
Any ideas why?
(page is small - but here is relevant info)
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css&2.8.0r4/build/base/base-min.css" />
<link rel="stylesheet" type="text/css" href="/templates/splash/css/splash.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.73.js"></script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
$(document).ready(function() {
$('.middle').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
autostop: 1,
timeout: 2500 // milliseconds between slide transitions (0 to disable auto advance)
});
});
//--><!]]></script>
</head>
<body id="page">
<div id="doc4" class="main-frame">
<div class="top"></div>
<div class="middle" align="center">
<img src="/templates/splash/images/rynic-design.gif" alt="Welcome to RYNiC Designs" />
<img src="/templates/splash/images/enter.gif" alt="click to enter website" />
</div>
<div class="bottom"></div>
</div>
</body>
</html>
And here is splash.css
html, body, #page, #doc4 {height:100%;margin:auto;}
.top, .middle, .bottom {clear:both;overflow:auto;display:block;}
.middle {background-color:#ffffff;overflow:hidden;}
.top, .bottom {height:35%;}
.top {background: #ffffff url(/templates/splash/images/left-bg.gif) repeat-y scroll top left;}
.bottom {background: transparent url(/templates/splash/images/right-bg.gif) repeat-y scroll top right;}
#doc4 {background:transparent url(/templates/splash/images/right-bg.gif) repeat-y scroll right bottom;}
I've seen this problem before (this is an excerpt of my earlier answer to Jquery Cycle + Firefox Squishing Images).
The problem is that Firefox fixes the img element's size once and for all at the point the display style is set to none (when you start cycle). So if the image hasn't finished loading (which it probably hasn't on an initial GET request), its height and width style attributes are small (I'm not sure exactly what they correspond to - perhaps the size of Firefox's image placeholder, though in your case it comes up 164 X 16 pixels).
On subsequent requests, Firefox knows their dimensions since they're in the cache (I'm guessing a bit here: maybe it just loads them before cycle can set display: none).
You can solve this by specifying your middle div's size in advance:
#middle {
width: 974px;
height: 110px;
}
(That is, as long as you're not doing anything complicated with your images - my web site is dynamically loading images of varying size so I had to perform additional footwork.)