rough-stuff / rough Goto Github PK
View Code? Open in Web Editor NEWCreate graphics with a hand-drawn, sketchy, appearance
Home Page: http://roughjs.com
License: MIT License
Create graphics with a hand-drawn, sketchy, appearance
Home Page: http://roughjs.com
License: MIT License
segment.js
exports a function RoughSegmentRelation
which merely returns an object:
export function RoughSegmentRelation() {
return {
LEFT: 0,
RIGHT: 1,
INTERSECTS: 2,
AHEAD: 3,
BEHIND: 4,
SEPARATE: 5,
UNDEFINED: 6
};
}
In every single place the value is used outside of the segment.js
file, the function is called and a particular key is accessed. For example, in renderer.js
:
if (s1.compare(s2) == RoughSegmentRelation().INTERSECTS) {
Questions:
is the import in canvas.js
necessary? It is not used in the body of canvas.js
.
hachure.js
calls the function twice and accesses the same key:
if (s.compare(this.sLeft) == RoughSegmentRelation().INTERSECTS) {
...
if (s.compare(this.sRight) == RoughSegmentRelation().INTERSECTS) {
Shouldn't that value just be cached? Ideally the entire thing would be cached, in the same way that segment.js
caches the value in RoughSegmentRelationConst
RoughSegmentRelation
outside of segment.js
follows the same pattern:if(segment1.compare(segment2) == RoughSegmentRelation().INTERSECTS)
SEPARATE
and UNDEFINED
are theoretically interesting distinctions, but that is not used outside of the implementation of compare
. Would it make more sense to convert that to an intersects
method that just returned true if the two segments intersected?
Hello @pshihn, thank you for this great contribution ๐ฏ ๐
Since version 2.2.0, which introduce async methods, I'm not being able to build the library inside angular 6 app.
I do not provide OS and versions information because the issue reside on types of RoughCanvasAsync
(promise of...) not matching the implemented class RoughCanvas
.
This would be a great addition I think.
Hi, I modify the demo with D3 version 4 success.
https://died.github.io/us-map.html
But when I change topojson to other country, it give out a error
Uncaught (in promise) DOMException: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The canvas width is 0.
at t.path (https://cdn.jsdelivr.net/gh/pshihn/rough/dist/rough.min.js:1:24757)
I think it should be topojson content issue but it's my first time using topojson, so I have no idea to fix it, any tips ? Thank.
topojson source
https://github.com/jason2506/Taiwan.TopoJSON/blob/master/topojson/counties.json
code different with Taiwan topojson, other same as us-map.html
d3.json("counties.json", async (error, tw) => {
if (error) throw error;
let topo = topojson.feature(tw, tw.objects.map).features;
for (let feature of topo) {
await rc.path(path(feature), {
fill: randomColor(),
fillStyle: randomStyle(),
hachureAngle: randomAngle()
});
}
});
I'd like to use roughjs serverside with jsdom, but rough breaks when the global variable self
isn't present. I saw that there are a couple of areas where self
is used, surrounded by checks, but the checks themselves break because of a referenceerror.
I updated the checks to not throw an error when self doesn't exist in #68.
rc.polygon([[0, 0], [44, 0], [216/2, 185-75], [216-44, 0], [216, 0], [216/2, 185], [0, 0]], { fill: '#41b883', stroke: '#41b883' })
Is this a bug or normal?
Tried to combine and put together rough.js and several basic charts
Hope this link will land on the examples page
https://beta.observablehq.com/@bumbeishvili/trying-out-rough
Can I add text with roughjs?
It seems that there is no function I can use to draw text like drawing a rectangle.
And when I simply use codes like this:
"var ctx=canvas.getContext("2d");
ctx.fillText("Hello World",10,50);"
Nothing appears on the canvas.
Is there anyway that I can put text on the canvas while I'm using rough?
Thanks for adding TypeScript typings!
I just created a circle and wanted to set the stroke
but discovered that the options
parameter requires almost all fields to be supplied. Is this expected behaviour?
This is the interface for SVG Options:
export interface Options {
maxRandomnessOffset: number
roughness: number
bowing: number
stroke: string
strokeWidth: number
curveTightness: number
curveStepCount: number
fill: string | null
fillStyle: string
fillWeight: number
hachureAngle: number
hachureGap: number
simplification?: number
}
For some reason, only simplification
is optional.
I tried to create a little drawing application.
For this I collect shapes in an array which is repainted to a canvas
when something changes or something new is created.
But this results in already drawn shapes to be re-rendered with new randomness each time, which causes these shapes to flicker, even when they are not changing.
(since there is no way to delete a shape, I have to reset the canvas to white every render)
For cases like this there could be an option to pass along to the render-methods to supply a custom seed for randomness for the roughness. Then it would render identically each time.
e. g. roughCanvas.rectangle(10, 10, 200, 200, { randomSeed: 1234567 });
Since Math.random()
does not support seeding, a custom random number generator is needed.
If wanted, I'd happily implement this and supply a pull request if we can think of a suitable random number algorithm.
When using this library in node, rendering a polygon with a transparent
fill fails with Cannot read property 'appendChild' of null
. It originates on this line which was built from this line in svg.ts.
When it tries to run this.defs!.appendChild(pattern);
, this.defs
is null
, so it fails. I'm not familiar with typescript, so I'm not sure what the exclamation mark is for , but skipping this assignment when this.defs === null
fixes the error.
For reproduction, I'm attempting to rendering the following polygon:
// Coordinates
[ [ 50, 160 ],
[ 55, 180 ],
[ 70, 180 ],
[ 60, 190 ],
[ 65, 205 ],
[ 50, 195 ],
[ 35, 205 ],
[ 40, 190 ],
[ 30, 180 ],
[ 45, 180 ] ]
// Options
{ stroke: 'green', fill: 'transparent', strokeWidth: 5 }
Circle, ellipse and rectangle do not have this issue, but path crashes with the same error. Let me know if you need more information.
Perhaps use https://github.com/ipython/xkcd-font
or https://fonts.google.com/specimen/Amatic+SC
Ideally should be able to configure the font, but using one of these two as a default. Will work with Canvas and SVG.
Also, see: https://bl.ocks.org/aaizemberg/76b00a3aa08d7161b980d915db6a85a2
This seems to happen both horizontally and vertically and doesn't look really good. Would be nice if it was one whole pattern: https://jsfiddle.net/g7o74vwr/
By the way, awesome work with this project, I can't wait to use it more <3
this tool looks beautiful i hope someone makes a chart.js using it so i can then use it.
also some sketch font would be cool otherwise the chart could look wierd.
Hi, great job!!! I'm very interested in the algorithm behind this, but a little hard to understand the code, will you give me some resource about the algorithm? thank you ^_^
I'm getting this error when trying to build Semiotic using roughjs 2.1.1
:
Creating an optimized production build...
Failed to compile.
Failed to minify the code from this file:
./node_modules/roughjs/dist/rough.umd.js:19
I am using two.js to render out a hand-drawn path animation in svg, but I would love to give it a rough line texture that your library provides. Is this possible? What's the easiest way to accomplish this?
In the documentation, the default values for fillWeight
, hachureGap
, and simplification
are incorrect.
fillWeight
is listed as strokeWidth
, but the default is -1
hachureGap
is listed as strokeWidth
, but the default is -1
simplification
is listed as 1
, but the default is 0
I would love to see an option for a zig-zag hachure fill pattern like in the handy processing library with setIsAlternating(true)
.
I think it is a more realistic way of filling a shape when drawing quickly to zig-zag it instead of drawing countless paralell lines.
SyntaxError: Unexpected use of reserved word 'let' in strict mode
In iOS 9.x, there are probloms with usage of 'let' or 'const'...
Possible to allow painting of polygons with rounded corners?
https://stackoverflow.com/a/17569586/62255
http://jsfiddle.net/moraes/6ja7Y/4/
If I define a polygon like this, the "filling" ends up outside the polygon: https://jsfiddle.net/mtytutua/
rc.polygon([
[100, 100], [300, 100], [300, 200], [200, 200],
[200, 300], [300, 300], [300, 400], [100, 400], [100, 100]], {
stroke: 'red',
hachureAngle: 65,
fill: 'rgba(0,0,255,0.6)'
});
It looks like part of the "filling" is doubled.
Great library BTW!
Any Plans to bring Animation capability like move, bounce, debounce etc?
Can prevent a polygon stroke by setting stroke: 'transparent'
.
Maybe setting to null can avoid unnecessary paint calls?
roughGenerator.path
will error out when given coordinates that are using scientific notation. Such as:
"M0,14.285714285714334L6.666666666666667,15.645165893991958L13.333333333333334,13.621434467236043L20,13.666889665817564L26.666666666666668,12.023412687602018L33.33333333333333,13.243774216451186L40,16.13238259981665L46.666666666666664,14.213536271906634L53.333333333333336,10.717681905478344L60,9.380249589210877L66.66666666666666,6.711179246747719L73.33333333333333,4.461618721950487L80,1.4708837451115357L86.66666666666667,3.359501689846894L93.33333333333333,0.03474343373119382L100,5.684341886080802e-14L106.66666666666667,2.603415833149171L113.33333333333333,6.052247452057372L120,9.12101436682056L126.66666666666666,9.141835233343272L133.33333333333331,9.0660892978415L140,9.953911817145155L146.66666666666666,12.450879362054053L153.33333333333334,9.649799726633688L160,13.035117833272778L166.66666666666669,9.896493775623355L173.33333333333334,11.033623453666053L180,9.70015386837514L186.66666666666666,8.748002714353476L193.33333333333334,10.960013271080328L200,12.351601607315104L200,21.645476831474497L193.33333333333334,18.538159084791687L186.66666666666666,19.765878642824674L180,18.524637635901854L173.33333333333334,23.13767925589468L166.66666666666669,20.0561877117795L160,23.922978272291886L153.33333333333334,21.327285732462798L146.66666666666666,22.835220857805837L140,19.464872113830666L133.33333333333331,21.48062185638247L126.66666666666666,24.949540935783574L120,22.804503808048736L113.33333333333333,22.62795094018361L106.66666666666667,16.31183693402673L100,13.068864406281222L93.33333333333333,12.896195068125735L86.66666666666667,15.41399692966391L80,16.000620863852532L73.33333333333333,18.38334497905032L66.66666666666666,19.79949753439365L60,19.95550516109813L53.333333333333336,22.212629025892227L46.666666666666664,24.86703498591848L40,29.122837164608313L33.33333333333333,23.293803174076174L26.666666666666668,21.881592853666803L20,20.690654271435704L13.333333333333334,19.552547736496933L6.666666666666667,20.740111759007306L0,21.428571428571473Z"
How can I use this library in my react or react-native app?
Hey! This is possibly a noob question but here we go!
I want to use this library to create custom html markers on a map. The issue is that the markers are generated in javascript and not hardcoded. Basically, doing something like this doesn't work:
const el = document.createElement('svg');
el.id = 'svg';
document.getElementsByTagName("BODY")[0].appendChild(el);
const rc = rough.svg(el)
svg.appendChild(rc.circle(80, 120, 50, {roughness: 2.8, fill: 'black'}))
svg.appendChild(rc.line(80, 120, 300, 100, {roughness: 2.8, fill: 'black'}))
The code: https://jsfiddle.net/szvoqhhf/
Am I missing something? I see the g
and path
element being appended properly. Should I be using https://github.com/pshihn/rough/wiki/RoughGenerator#svg-path-info?
Would it be possible to add a feature that just returns SVG path data (just the d
attribute of the fill and the d
attribute of the stroke if any) instead of having rough
append SVG nodes to the DOM. I'd find this easier to integrate into React that way.
I experienced an odd error when trying to test an app using this library. The app's written in Typescript, using React, using Jest and Enzyme for testing. I have a component that imports this library with
import rough from "roughjs";
then tries to use it to draw with this code:
const rc = rough.canvas(this.canvasRef.
rc.line(100, 0, 100, 300);
However, when running tests using react-scripts-ts --env=jsdom
, this code error's out with Error: Uncaught [TypeError: Cannot read property 'canvas' of undefined
. This happens even if canvas or canvas-prebuilt is installed in the project. I can fix the problem by checking if (rough)
before drawing, which would seem to indicate that the rough
object doesn't exist in the test environment.
When trying to view the d3 example I get a
ReferenceError: rough is not defined
Not a big issue but I think based on a google search alone
hachure is
parallel lines used in hill-shading on maps, their closeness indicating steepness of gradient.
hatching or cross hatching
(in drawing or graphics) shade (an area) with intersecting sets of parallel lines.
maybe hatching is better?
How can I use this library in my vue?
Thanks for this, really great resource.
Wanting to use for my physics svg files which make use of transform attribute:
<path d="M 0,0 A 11.25 9 0 0 0 11.25,-9 A 3.75 6 0 1 0 3.75,-9 A 11.25 9 0 0 0 15,0 A 11.25 9 0 0 0 26.25,-9 A 3.75 6 0 1 0 18.75,-9 A 11.25 9 0 0 0 30,0 A 11.25 9 0 0 0 41.25,-9 A 3.75 6 0 1 0 33.75,-9 A 11.25 9 0 0 0 45,0 A 11.25 9 0 0 0 56.25,-9 A 3.75 6 0 1 0 48.75,-9 A 11.25 9 0 0 0 60,0" transform="translate(100,90) rotate(153.435)"></path>
Is there functionality available to do the translation/rotations, etc?
As it already has Path support I imagine this would be more about actually finding the paths in an svg and passing them in one by one (including fill color).
Thoughts on practicality? Seems like it would be a useful feature. I know it would involve some kind of really gnarly regex...
I found out the hachure fill in SVG-Path shapes is limited to the size of the canvas.
This means a shape larger than the canvas itself will be not filled completely.
See my codepen for demonstration
(The startingpoint can be moved with the sliders, the other points are fixed to the edges. Moving the startingpoint to negative values results in the hachure fill being cut off at the bottom/right)
Hi, very nice project! I love it !
I found a miscalculation at line 545 in renderer.js (also line 1190 in rough.js)
let midDispX = o.bowing * o.maxRandomnessOffset * (y2 - y1) / 200;
let midDispY = o.bowing * o.maxRandomnessOffset * (x1, x2) / 200;
I think It would be ...
let midDispX = o.bowing * o.maxRandomnessOffset * (y2 - y1) / 200;
let midDispY = o.bowing * o.maxRandomnessOffset * (x1 - x2) / 200;
Best regards
How do I handle click/touch/drag events?
And make my object react according to these events?
rc.line(60, 300, 700, 60);
rc.rectangle(60, 300, 700, 60, {
fill: 'rgba(255,0,0,0.2)',
fillStyle: 'solid',
roughness: 2
});
rc.rectangle(60, 300, 700, 60, {
fill: 'red',
stroke: 'blue',
hachureAngle: 60,
hachureGap: 10,
fillWeight: 5,
strokeWidth: 5
});
Line draws correctly but both rectangles draw with wrong co-ordinates
Thanks for This amazing library.
Now anyone can create beautiful sketchy Charts with livegap charts (free online Chart generator ) + rough.js
It's me again. ๐
I tried creating shapes with the rc.path()
function using SVG-Paths.
But the arcs which are supposed to appear are not drawn correctly using the rough-canvas.
I tried fiddling with the comma-separators between values, relative a
and absolute A
instructions, none of them creates the right shape.
Drawing the shape directly to the danvas via a Path2D
object works fine.
Interestingly enough, the fill for the shape is rendered correctly, just the outline is rendered wrong.
Also the four examples found on the website work perfectly in the same canvas.
I created a codepen to illustrate the issue -> codepen
Am I missing something again or is this an actual bug?
Similar to RoughCanvas, RoughSVG will create an svg node
let rsvg = rough.svg(svgRoot, config);
let rect = rsvg.rectangle(10, 10, 100, 100);
// now can add custom styles to node
rect.classList.add('cool-rect');
svgRoot.appendChild(rect);
Hello! Really great lib, thanks! I was wondering what's the motivation behind making draw API async by default? It makes it impossible to use synchronously, consider the following example
While it's trivial to lift sync API into async world, it's impossible to go the other way around. I imaging having async proxy would make it backwards compatible. Also I understand that it probably meant to run in a web worker, but since it's still can be executed on the main thread it would be nice to provide an "easier" way of consuming the API. Thanks!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#main {
width: 800px;
height: 600px;
margin: 40px auto 0;
padding: 16px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<main id="myCanvas"></main>
<script src="../node_modules/roughjs/dist/rough.min.js"></script>
<script>
window.onload = function () {
rough.canvas(document.getElementById('myCanvas'));
}
</script>
</body>
</html>
chrome version: 64.0.3282.186
rough.min.js:1 Uncaught TypeError: this.canvas.getContext is not a function
at new t (rough.min.js:1)
at Object.canvas (rough.min.js:1)
at window.onload (index.html?_ijt=8kj4phaq3k33cqhrm3gobggm4f:25)
It would be great if there was an option to eliminate randomness when drawing shapes. So basically that the first time it would be random, and then the same shape would be drawn again.
For example drawing lines on canvas and then redrawing the entire canvas causes the lines to flicker due to randomness.
I would be willing to work on this as a PR, if you think it's a good idea.
i would like to contribute for make this software logo, you can see my work https://utopian.io/@telurpuyuh
if anything you want for the logo, you can catch me at [email protected], thank you.
I want this work for RN, so cool~
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.