Comments (7)
Hi @vh13294 , the typescript definitions for resize
are fixed in 0.6.5. See if it works for you now.
This is a working demo for your reference:
https://ptsjs.org/demo/edit/?name=canvasspace.resize
from pts.
Hi @vh13294 , your code above looks correct to me. What is the error you receive? Can you post the full code so that I can help you debug it?
from pts.
`import {Component, OnInit} from '@angular/core';
// import third-party module
import {CanvasSpace, Pt, Group, Line, Const, Color} from 'pts';
import * as tinygradient from 'tinygradient';
@component({
selector: 'app-canvas',
templateUrl: './canvas.component.html',
styleUrls: ['./canvas.component.scss']
})
export class CanvasComponent implements OnInit {
constructor() { }
ngOnInit() {
this.floatySpace();
}
getGradients() {
const gradient = tinygradient(['#FF3F8E', '#04C2C9', '#2E55C1']);
const colorsHsv = gradient.hsv(30, false);
const newCol = colorsHsv.map(x => x.toRgbString());
return newCol;
}
getNextGradient(gradients: string[], current: string) {
const len = gradients.length;
const next = gradients.indexOf(current) + 1;
const i = next % len;
return gradients[i];
}
floatySpace() {
const colors = this.getGradients();
const space = new CanvasSpace('float').setup({ bgcolor: '#2d2b2b', retina: true, resize: true});
const form = space.getForm();
const color = Color.from(255, 255, 255, 1);
let center, pts, line, r, iColor = 0, rate = 1;
function timeout() {
setTimeout(function () {
iColor += rate;
if (iColor >= 30) {
rate = -1;
} else if (iColor === 0) {
rate = 1;
}
timeout();
}, 1000);
}
timeout();
// Canvas
space.add({
start: () => {
// Elements
pts = [];
center = space.size.$divide(1.8);
const angle = -(window.innerWidth * 0.5);
let count = window.innerWidth * 0.05;
if (count > 150) {
count = 150;
}
line = new Group(new Pt(0, angle), new Pt(space.size.x, 0));
r = Math.min(space.size.x, space.size.y) * 1;
for (let i = 0; i < count; i++) {
const p = new Group( new Pt(Math.random() * r - Math.random() * r, Math.random() * r - Math.random() * r) );
p.moveBy( center ).rotate2D( i * Math.PI / count, center);
p.brightness = 0.1;
pts.push( p );
}
},
animate: (time, ftime, context) => {
let current = colors[iColor];
for (const pt of pts) {
current = this.getNextGradient(colors, current);
pt.rotate2D( Const.one_degree / 15, center);
form.stroke( false ).fill( current ).point(pt[0], 1);
// get line from pt to the mouse line
const ln = new Group(pt[0], Line.perpendicularFromPt(line, pt[0]));
// opacity of line derived from distance to the line
const opacity = Math.min( 0.8, 1 - Math.abs( Line.distanceFromPt(line, pt[0])) / r);
const distFromMouse = Math.abs( Line.distanceFromPt(ln, space.pointer) );
if (distFromMouse < 70) {
if (pt.brightness < 0.3) {
pt.brightness += 0.02;
}
} else {
if (pt.brightness > 0.1) {
pt.brightness -= 0.01;
}
}
color[3] = pt.brightness;
form.strokeOnly(color.rgba).fill( true ).line(ln);
}
},
action: (type, x, y, event) => {
if (type === 'drag') {
line.rotate2D( Const.one_degree / 5 );
}
},
});
space.bindMouse().bindTouch().play();
}
}
`
from pts.
Hi @vh13294 , sorry about the late reply. Your code looks correct so I'm guessing it's something to do when initiating with angular components and Pts.
I'm not familiar with angular, but I'm thinking/guessing you can try to make sure your component template has been initialized before calling Pts -- otherwise Pts won't be able to find and resize the element.
What's the error you're getting, and do you get it on init or afterwards?
from pts.
I fixed the issue.
resize?(size: IPt, evt?: Event): undefined; => resize?(size: IPt, evt?: Event): any;
from pts.
Basiclly , what I am trying to acheive is to resize the canvas and re-render when the window is resized!
I tried space.autoResize = true; , but not working!
Is there is better way to acheive this?
from pts.
Thanks for the details. I think I figure out what's wrong. The first parameter size:IPt
in the callback should be of type Bound
, not an IPt
. If it's a Pt, it'll just provide the position but not the size.
https://github.com/williamngan/pts/blob/master/src/Canvas.ts#L219
Meanwhile, you can see a demo of resizing canvas when window resize here:
https://ptsjs.org/demo/edit/?name=canvasspace.resize
If you cast the size
parameter to a Bound, I think it should work for now. I'll fix the docs and check if autoResize property has bugs. Thanks for reporting!
from pts.
Related Issues (20)
- sound demos HOT 1
- source-map file missing when importing pts
- Canvas size issue when html attribute and css style width & height differs. HOT 4
- Fix parameter types HOT 1
- CanvasForm(ctx) methods error. HOT 3
- Implement oklab color
- will pts provide an api to render in existing canvas provided by the user? HOT 2
- pts.js, pts.min.js added to .npmignore and are not served by cdns any longer HOT 2
- Documentation is unclear on how to "unmount" a canvas. HOT 2
- Radial gradients can't use negative coordinates HOT 2
- Safari 15 // Group.moveTo not reflected HOT 5
- Crisp 1px lines on HiDPI devices. HOT 1
- Canvas mouse events coord is wrong on layout change HOT 1
- Add support for roundRect method. HOT 1
- randomPt overwrites input value
- error on form methods when using with an existing canvas HOT 2
- Drawing tools
- Drawing tools
- Add brush like this one https://p5-brush.cargo.site/? HOT 1
- Built-in SVG interactions HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pts.