lmgonzalves / jelly Goto Github PK
View Code? Open in Web Editor NEWDrawing and Animating Jelly Shapes with Canvas
License: MIT License
Drawing and Animating Jelly Shapes with Canvas
License: MIT License
Hi there,
Do you think it would be possible to detect a wider radius of mouse movement? At the moment, i often find that my mouse goes between the points and no animation occurs. I've tried combatting this with adding more points, but that seems to have odd results.
Any ideas if this is possible?
My component is use as an item in a react-alice-carousel
. When dragging my carousel, I'm trying to prevent Link
to be clicked. It seems that using Jelly
makes onDragStart
event not fired or fired when dragging very quickly. Using a canvas with stroke() makes onDragStart
event fired no matter what
import React from 'react';
import Tilt from 'react-tilt';
import { Link } from 'react-router-dom';
import Jelly from 'jelly.js';
import { canvasOptions } from '../../../utils/utils';
class NightySvg extends React.Component {
componentDidMount() {
new Jelly(this.canvas.current, canvasOptions('#nightyPath'));
// const ctx = this.canvas.current.getContext("2d");
// ctx.beginPath();
// ctx.moveTo(20,20);
// ctx.lineTo(20,100);
// ctx.lineTo(70,100);
// ctx.stroke();
}
canvas = React.createRef();
handleDrag(e) {
e.preventDefault();
}
render() {
return (
<div onDragStart={this.handleDrag}>
<svg width="289px" height="306px" version="1.1" xmlns="http://www.w3.org/2000/svg" display="none">
<path id="nightyPath" d="M90.652..." />
</svg>
<Link className="menuNav-item" to="/nighty">
<Tilt className="Tilt" options={{ max: 25 }}>
<div className="tiltContent">
<div>
<span className="menuNumber">01</span>
<div>nighty</div>
<canvas draggable="true" ref={this.canvas}
className="nightyCanvas Tilt-inner" width="289px" height="306px" />
</div>
</div>
</Tilt>
</Link>
</div>
);
}
}
export default NightySvg;
If a jelly is rendered at a desktop size and the window is scaled down, the canvas scales down okay with CSS, but if the page is reloaded, it seems to ignore it's bounding container and renders it at full size.
This is my SVG code:
<svg width="2622px" height="640px" viewBox="0 0 2622 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none">
<path d="M2024.35398,639.019917 L2024.35398,639.033416 C1680.6382,639.726285 1508.97788,639.352862 1509.37302,637.913146 C1404.97615,646.944218 1301.86397,600.073111 1216.24958,544.142572 C1195.09767,530.324423 1177.14613,512.71603 1155.35897,499.691946 C1122.14862,479.840319 1086.50928,463.245778 1049.52286,451.964382 C1006.83903,438.944552 962.110479,428.145267 917.396109,426.61102 C878.759173,425.285215 841.802535,431.956779 803.61226,436.345406 C740.723727,443.56998 665.167019,452.684713 607.129372,421.204288 C560.238413,395.770101 532.222097,345.901398 490.951984,312.09975 C405.645293,242.227698 291.148203,272.831816 191.169742,250.822034 C163.55613,244.741765 134.225352,232.619511 115.457058,210.59555 C99.1971579,191.513883 98.9532665,161.827194 74.0182061,149.875097 C54.9819146,140.751857 30.4297069,146.595325 13.967037,132.309244 C4.72185108,124.284933 4.62968281,113.896861 0,104.334049 L0,0.351165471 L1980,0.351165471 L1980,0 L2622,0 L2622,639.019917 L2024.35398,639.019917 Z" id="WAVE" fill="#DAF4EE"></path>
</svg>
Is there any way it can get the size of it's bounding container and resize the contents inside the <canvas>
accordingly? I feel like the fix is easy but I could be wrong. Thanks!
I'm trying to utilize the plugin by
import $ from 'jquery';
import 'Jelly';
$(function(){
var options = {
paths: '#circle-path', // Shape we want to draw
pointsNumber: 25, // Number of points
maxDistance: 4, // Max distance among points
color: '#ff0019',
opacity: 0.27,
// centroid: '.centroid-text' // Element to move accordingly with the centroid of the shape
// debug: true // Uncomment this to see the points
};
var jelly =Jelly('.jelly-canvas', options);
});
but i get this error instead
Uncaught ReferenceError: Jelly is not defined
any help, ideas please?
Hi @lmgonzalves,
Thankyou for creating this library, we've been looking for something like this and its amazing.
I'm relatively new to learning how canvas works and was just wondering about whether jelly.js supports image resizing or am I missing something. I've created a codepen showing the kind of thing I've been doing, but as you can see the images are larger than the clipped area. https://codepen.io/ben-holness/pen/RwWrdxN?editors=0100
Is image resizing/repositioning functionality built into the library or should I be using the canvas or call other Javascript methods to accomplish this?
Hi,
Is there a way to clip a <div>
element instead of image?
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.