Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed yesterday.
Improve this question
I'm trying to build an interactive chart with thousands of circles.
SVG and canvas are not good in terms of performance
I found that P5 JS or WebGL would be a good solution for performance reasons.
Unfortunately I'm completely new in P5, I tried to find similar example as this example in Canvas
https://codepen.io/hey-nick/pen/xbONzg but on P5.
function CirclePacking(canvas) {
this.canvas = canvas;
this._ctx = this.canvas.getContext("2d");
this._circles = [];
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
var self = this;
var intervalCounter = 0;
var intervalStop = circleCount * 2; // pretty arbitary, but it works
var interval = setInterval(function(){
self.enterFrame();
/* if (++intervalCounter === intervalStop) {
// positioning is now complete
clearInterval(interval);
}*/
}, 1000/60);
}
I have about 10K-50K circles or points with the same size to be nicely grouped (using circle packing) in circle in 2 places on the page and then move them based on timer from one group to another. Like this enter image description here
Could you please guide me on some similar tutorials or examples?
I tried Canvas but after 1000 circles, but it starts to really slow down the performance
Related
Let me ask you a question about PIXI.js. In Chrome, these lines looks like not the same thickness, but its the same Graphics API (lineTo, moveTo). Why is that?
let boxW = 46.5;
this.leftBox
.lineStyle(1, 0x000,1)
.beginFill(0xffffff)
.moveTo(0, 0)
.lineTo(465, 0)
.lineTo(465, 465)
.lineTo(0, 465)
.lineTo(0, 0)
.endFill();
for (let i = 1; i <= 9; i++) {
this.leftBox.moveTo(boxW * i, 0).lineTo(boxW * i, 465);
}
PAEz is right, it is likely anti aliasing.
When you create you Application anti-aliasing is turned off by default.
Try the below and see if it helps:
const app = new PIXI.Application({
'antialias': true,
'resolution': 2 // This may help too
});
// Add the view to the DOM
document.body.appendChild(app.view);
// ... your line code
The documentation for the Application class and its options can be found here:
https://pixijs.download/dev/docs/PIXI.Application.html
As a side note, PIXI is very fast but as your application scales anti-aliasing and resolution may have performance implications.
Finally to answer your question about what anti-aliasing is, in short, its a way to smooth out jagged edges on non-rectangular shapes, though you have a series lines it could help with your situation too. Here is an article that can tell you more: https://www.gamingscan.com/what-is-anti-aliasing/
I have two overlayed rectangles:
I'm trying to fade them out uniformly as if they were one object.
The problem:
When I animate their opacity from 1 to 0, the top rectangle becomes transparent and reveals the edges of the rectangle beneath it.
Here is my code:
var paper = Raphael(50,50,250,350)
var rect = paper.rect (20,40,200,200).attr({"fill":"red","stroke":"black"})
var rect2 = paper.rect (100,140,200,200).attr({"fill":"red","stroke":"black"})
var set=paper.set()
set.push(rect)
set.push(rect2)
set.click(function () {fadeOut()})
function fadeOut() {
rect.animate({"opacity":0},3000)
rect2.animate({"opacity":0},3000)
setTimeout(function () {
rect.attr({"opacity":1})
rect2.attr({"opacity":1})
},3100)
}
When the set is clicked, the rectangles fade out in 3 seconds. (look at the red rectangles in my fiddle, it will clarify my problem)
https://jsfiddle.net/apoL5rfp/1/
In my fiddle I also create a similar looking green path that performs the fade out CORRECTLY.
I can I achieve the same type of fadeout with multiple objects?
I think this is quite difficult in Raphael alone.
Few options spring to mind. Don't use Raphael, use something like Snap, put them in a group and change opacity in the group.
var g = paper.g(rect, rect2);
g.click(function () { fadeOut( this )} )
function fadeOut( el ) {
el.animate({"opacity":0},3000)
setTimeout(function () {
el.attr({"opacity":1})
},3100)
}
jsfiddle
However, you may be tied to Raphael, which makes things a bit tricky, as it doesn't support groups. You could place an 'blank' object over it (which matches same as background) and animate its opacity in the opposite way, like this..(note the disabling of clicks on top object in css)
var rectBlank = paper.rect(18,20,250,330).attr({ fill: 'white', stroke: "white", opacity: 0 });
var set=paper.set()
....
rectBlank.animate({"opacity":1},3000)
jsfiddle
Otherwise I think you may need to use a filter, which may help a bit. SO question
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm just started with D3.js, and I want to create something like what we do in Paint to draw a line. The steps are should be the same:
- Click on a point on the screen
- Drag to the destination to create a line.
What I'm having troubles now is when you drag your mouse to the destination, the line should move according to your mouse. How can I do that?
Thanks.
Here's a simple example. Also see live version.
var line;
var vis = d3.select("body").append("svg")
.attr("width", 600)
.attr("height", 400)
.on("mousedown", mousedown)
.on("mouseup", mouseup);
function mousedown() {
var m = d3.mouse(this);
line = vis.append("line")
.attr("x1", m[0])
.attr("y1", m[1])
.attr("x2", m[0])
.attr("y2", m[1]);
vis.on("mousemove", mousemove);
}
function mousemove() {
var m = d3.mouse(this);
line.attr("x2", m[0])
.attr("y2", m[1]);
}
function mouseup() {
vis.on("mousemove", null);
}
I think the part you're looking for is in the mousemove event handler where we select the current line and adjust it's destination point based on the current mouse location. Note that we only enable mousemove in mousedown to avoid superfluous processing.
I am doing a modification of svg-edit, more specifically Mark McKays Method draw: https://github.com/duopixel/Method-Draw.
I want to use this Raphael library i found: https://github.com/poilu/raphael-boolean that allows me to perform boolean(set) operations on paths within my canvas.
Now i have implemented a button within the editor that fires up a function:
var paper = Raphael("canvas", 250, 250);
var path = paper.path("M 43,53 183,85 C 194,113 179,136 167,161 122,159 98,195 70,188 z");
path.attr({fill: "#a00", stroke: "none"});
var ellipse = paper.ellipse(170, 160, 40, 35);
ellipse.attr({fill: "#0a0", stroke: "none"});
var newPathStr = paper.union(path, ellipse);
//draw a new path element using that string
var newPath = paper.path(newPathStr);
newPath.attr({fill: "#666"});
// as they aren't needed anymore remove the other elements
path.remove();
ellipse.remove();
Okay, upon clicking the button isnt the editor supposed to return a unioned(welded) path with an ellipse?
or am i getting this wrong?
i am figuring that something must change with the var paper = Raphael("canvas", 250, 250); line since svg-edit is using a different name for the canvas but i have no idea how to go about it.
Any help will be deeply appreciated as i have been struggling for sometime with this.
UPDATE: This library is unable to handle multi-object welding, self intersections and many other cases. It is only working if we want to perform operations on 2 simple objects. This might not be immediately relevant to the question at hand but i thought it is wise to mention it anyway.
Refer to this question if you are looking for Boolean Operations on SVG elements: Boolean Operations on SVG paths
The code you posted works in isolation, as shown here: http://jsfiddle.net/5SaR3/
You should be able to change the Raphael constructor line to something like:
var paper = Raphael(canvas);
where canvas is an object reference to the SVG element used by svg-edit.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
I'm trying to implement search result highlighting for pdfs in a web app. I have the original pdfs, and small png versions that are used in search results. Essentially I'm looking for an api like:
pdf_document.find_offsets('somestring')
# => { top: 501, left: 100, bottom: 520, right: 150 }, { ... another box ... }, ...
I know it's possible to get this information out of a pdf because Apple's Preview.app implements this.
Need something that runs on Linux and ideally is open source. I'm aware you can do this with acrobat on windows.
CAM::PDF can do the geometry part quite nicely, but has some trouble with the string matching sometimes. The technique would be something like the following lightly-tested code:
use CAM::PDF;
my $pdf = CAM::PDF->new('my.pdf') or die $CAM::PDF::errstr;
for my $pagenum (1 .. $pdf->numPages) {
my $pagetree = $pdf->getPageContentTree($pagenum) or die;
my #text = $pagetree->traverse('MyRenderer')->getTextBlocks;
for my $textblock (#text) {
print "text '$textblock->{str}' at ",
"($textblock->{left},$textblock->{bottom})\n";
}
}
package MyRenderer;
use base 'CAM::PDF::GS';
sub new {
my ($pkg, #args) = #_;
my $self = $pkg->SUPER::new(#args);
$self->{refs}->{text} = [];
return $self;
}
sub getTextBlocks {
my ($self) = #_;
return #{$self->{refs}->{text}};
}
sub renderText {
my ($self, $string, $width) = #_;
my ($x, $y) = $self->textToDevice(0,0);
push #{$self->{refs}->{text}}, {
str => $string,
left => $x,
bottom => $y,
right => $x + $width,
#top => $y + ???,
};
return;
}
where the output looks something like this:
text 'E' at (52.08,704.16)
text 'm' at (73.62096,704.16)
text 'p' at (113.58936,704.16)
text 'lo' at (140.49648,704.16)
text 'y' at (181.19904,704.16)
text 'e' at (204.43584,704.16)
text 'e' at (230.93808,704.16)
text ' N' at (257.44032,704.16)
text 'a' at (294.6504,704.16)
text 'm' at (320.772,704.16)
text 'e' at (360.7416,704.16)
text 'Employee Name' at (56.4,124.56)
text 'Employee Title' at (56.4,114.24)
text 'Company Name' at (56.4,103.92)
As you can see from that output, the string matching will be a little tedious, but the geometry is straightforward (except maybe for the font height).
Try to look at PdfLib TET
http://www.pdflib.com/products/tet/
(it's not free)
Fabrizio
I think you can do this using the Adobe Acrobat SDK, a Linux version of which can be downloaded for free from Adobe. You can use this to extract text from PDFs and then work out offsets. The PDF can then be highlighted by using the Acrobat XML highlighting file. This is used to specify which words in which positions are to be highlighted and is fed to acrobat as follows:
http://example.com/a.pdf#xml=http://example.com/highlightfile.xml