Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/.block

Created November 23, 2017 04:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timelyportfolio/10479d38093bb4d0f556762f59cdff5f to your computer and use it in GitHub Desktop.
Save timelyportfolio/10479d38093bb4d0f556762f59cdff5f to your computer and use it in GitHub Desktop.
Download ZIP
draw line with fabricjs and d3
Raw
.block
license: mit
height: 500
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/fabric@2.0.0-rc.1/dist/fabric.js"></script>
<script src="https://unpkg.com/svg-points@6.0.0/dist/svg-points.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<p>click on the line to see the interactivity</p>
<canvas id="c" width="300" height="300" style="width: 300px; height: 300px; touch-action: none; user-select: none;"></canvas>
<script>
var canvas = new fabric.Canvas('c', {
backgroundColor: '#eae5ff',
selectionColor: 'blue',
selectionLineWidth: 2
// ...
});
var points = SVGPoints.toPoints({
type:'path',
d:d3.line().curve(d3.curveBasis)([
[20,10],
[50,80],
[120,50],
[200,100]
])
})
var poly = new fabric.Polyline(
points,
{
stroke: '#7c7c7c',
fill: 'none',
backgroundColor: '#eae5ff',
left: 100,
top: 100
}
);
canvas.add(poly); // add object
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment