Framework used: React
3D Image: glb/gltf format
Rendered using: three.js packages
Mission: To insert a number to each of the object and display it above them
Approach: I have tried to get the canvas element and then add a text using
var parentofCanvas = document.getElementById("untitled.glb");
var childCanvas = parentofCanvas.firstChild;
var context = childCanvas.getContext("webgl");
console.log(childCanvas);
console.log(parentofCanvas.firstChild.nodeName);
console.log(context);
// var text = "Howdy World!";
// context.font = "25px Arial";
// context.fillStyle = "red";
// var x = 50;
// var y = 100;
// context.fillText(text, x, y);
}, []);
where x and y are the coordinates. I am getting an error saying fillText is not a function. So,what did I miss? Is there any other way to insert/render html elements in a 3D canvas image?
Link to codesandbox: https://codesandbox.io/s/dreamy-lichterman-lbb4z?file=/src/Test.js
(FYI: This is a forked project of dreamy-lichterman)
There is a Html Component in #react-three/drei which can be used to insert HTMl elements inside. Below is the link to the sandbox with the same example and explanation(comments): https://codesandbox.io/s/embed-html-3d-63uep?file=/src/Test.js
Documentation can be found at: https://github.com/pmndrs/drei#html
I would like to be able to add shapes (for example a circle) on a new layer that I create beforehand.
My request is similar to this question:
Draw circle on a new layer in Photoshop using cep/Javascript but for InDesign.
I tried the code but it doesn't work, I think PathPointInfo (and probably some other stuff) is not in the API of InDesign.
I did a lot of research but couldn't find what I needed
Thank you in advance for your help !
var cr = app.activeDocument.pages[0].ovals.add(); //add a circle in active documents first page
cr.geometricBounds = [10,10,100,100]; //apply geometry to the circle
cr.strokeWeight = 0.1; //adding stroke weight
cr.strokeColor = app.activeDocument.swatches[3]; //choose color from active document's swatch
From here: https://community.adobe.com/t5/indesign-discussions/script-to-create-multiple-circles-in-specific-locations/td-p/10644580
I found a solution using the polygons :
var doc = app.activeDocument;
var page = doc.pages.item(0);
var pl = page.polygons.add();
var myArr = [
[258,583],
[255,583],
[255,582],
[254,582],
[253,580],
[250,579],
[249,578],
[248,576],
[248,575],
[248,574],
[246,573],
[246,571],
[246,570],
[246,566],
[246,565],
[246,564],
[249,562],
[250,561],
[252,561],
[253,561],
[255,561],
[257,561],
[258,561],
[262,561],
[263,561],
[264,560],
[264,561],
[264,562],
[264,564],
[264,565],
[264,566],
[264,567],
[264,570],
[264,571],
[264,573],
[264,574],
[264,575],
[264,576],
[263,576],
[262,578],
[262,579],
[261,579],
[259,579]
];
pl.paths.item(0).entirePath = myArr;
I have a ImageData which is Uint8ClampeArray type, and I can display it by using putImageData(img,0,0), but It displays the original length and width image which is too large.
I am wondering is there a way to resize it to fit into specified size canvas?
some related code:
img.src = "http://xxxxx.png";
var c = Filters.getPixels(img);
var imga=Filters.threshold (c, 100,90);//threshold img
var cc = document.getElementById("myCanvas");
console.log(imga);//imga is an raw ImageData(1024*1024)
var ctx = cc.getContext("2d");
ctx.putImageData(imga,0,0);
/*******do something to resize ctx********/
Or, can drawImage() show that raw ImageData(imga)?
Any help appreciated
As #somethinghere mentioned, 'use drawImage( , ... ) in order to resize it onto another canvas', in this particular case, I do:
var cc2 = _("myCanvasShow");
var ctx2 = cc2.getContext("2d");
ctx2.drawImage(cc,0,0,512,512);
which cc2 is another canvas, and resize cc into cc2.
I have the following div markup
<div data-x="-1000" data-y="-1500">
// content
</div>
<div data-x="0" data-y="-1500">
// content
</div>
And I have many of this divs with different data-x and data-y value depending on their position.
What I want to achieve here is to draw something like a timeline between the divs so div1 line to div2 line to div 3 etc,,
I want this to be done automatically So I am trying to make a loop for it but my javascript/jquery knowledge is not that good. Could someone point me in the good direction?
what I have now is
function drawTimeline() {
var divs = document.getElementsByTagName('div');
var canvas = document.getElementById('timeline');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
var prevCoord = {};
for (var i = -1; div = divs[++i]; ) {
if (div.dataset.x && div.dataset.y) {
var x = parseInt(div.dataset.x);
var y = parseInt(div.dataset.y);
if ({} !== prevCoord) {
ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="purple"; // Purple path
ctx.moveTo(prevCoord.x, prevCoord.y);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke()
}
prevCoord.x = x;
prevCoord.y = y;
}
}
} else {
alert('You need Safari or Firefox 1.5+ to see this.');
}
}
unfortunately the line is not correct its like a linear line and thats it.. can someone help me out with this?
You have the right idea, but your problem is that canvas does not draw at negative coordinates.
Therefore, you must map all your data-x and data-y into positive coordinates.
Here's a function that maps your negative values into positive values:
function mapRange(value, sourceLow, sourceHigh, mappedLow, mappedHigh) {
return mappedLow + (mappedHigh - mappedLow) * (value - sourceLow) / (sourceHigh - sourceLow);
}
So in your example to map a data-x value of -300 into an onscreen range of 0-1000 can do this:
var x = mapRange(-300, -1500,0, 0,1000); // The mapped x is 466.66.
You must reposition your divs to the mapped x,y coordinates which you can do with CSS.
An alternative is to use SVG which creates actual DOM elements that can be positioned at negative coordinates.
I'm trying to create a rectangle and a pointtext element, where the rectangle will be the
text element's container.
Without text element, everything works fine. When text element inserted, rectangle is pushed away. Well, rectangle is displayed at the correct position, but the points where it receives the events are pushed away.
Please see http://jsbin.com/abejim/1
Rectangle's visibility should increase when hovered. Hovering does not affect, but when mouse moved to 580,280 and around , it's visibility increases.
Any suggestions?
That jsbin seems to be working fine for me in Firefox. The rectangle is displayed in the correct location and hovering over the rectangle makes it highlight. Possibly the paper.js code has updated since you asked the question.
It looks like you asked the same question on the paper.js mailing list. For future reference here, the response was:
pointtext takes relative coordinates and you r trying to give absolute coordinates.
try this one:
var size = new paper.Size(125, 75); //SM size to paper size
var rectangle = new paper.Rectangle({ x: 0, y: 0 }, size); //(top_left, bottom_right)
var cornerSize = new paper.Size(10, 10); //rounding of edges
var shape = new paper.Path.RoundRectangle(rectangle, cornerSize);
shape.strokeWidth = 3;
shape.strokeColor = '#525252';
shape.fillColor = '#FFFFFF';
shape.name = 'shape';
var stateNameTxt = new paper.PointText(10, 65);
stateNameTxt.content = state_name;
stateNameTxt.name = 'stateNameTxt';
var state = new paper.Group(); //create group
state.name = state_name;
state.opacity = 0.8;
state.addChild(shape); //add shape to grpup
state.addChild(stateNameTxt); //add pointtext to group