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;
Related
I want my rotator of transformer to have icon, but first I add fill to learn.
var rot = transformer.findOne('.rotater');
console.log(rot); //Works fine
rot.fill('orange'); //Not working. no need for fill-priority
layer.batchDraw();
konva#7.0.4 doesn't have API to customize specific anchors of a Konva.Transformer.
Your code doesn't work, because Konva.Transfomer may reset its style at any point of time with internal tr.update() function.
As a workaround, you can overwrite update method and add your own styles there:
const tr = new Konva.Transformer({
nodes: [shape]
})
tr.update = function() {
Konva.Transformer.prototype.update.call(tr);
var rot = this.findOne('.rotater');
rot.fill('orange');
}
tr.forceUpdate();
layer.add(tr);
Demo: https://jsbin.com/lumisacayo/1/edit?html,js,output
Would there be a way to get the dimensions of an svg path and display it in a div? The bounding box is not an option as it is buggy in Webkit when it comes to bezier curves. I am doing a modification of svg-edit btw: https://code.google.com/p/svg-edit/
This is what im currently using.
<script>
var myVar=setInterval(function(){getDimensions()},10);
function getDimensions()
{
svgNode = svgCanvas.getSelectedElems()[0];
var getw = svgNode.getBoundingClientRect().width;
var geth = svgNode.getBoundingClientRect().height;
getw= parseInt(getw);
geth= parseInt(geth);
document.getElementById('heightbox').innerHTML = geth;
document.getElementById('widthbox').innerHTML = getw;
}
</script>
Unfortunately thre bounding box is unreliable. Any ideas other than the bbox?
RaphaelJS has a utility method for determining the bounding box of a path - http://raphaeljs.com/reference.html#Raphael.pathBBox
var dims = Raphael.pathBBox(pathString);
var getw = dims.width;
var geth = dims.height;
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
I've been working on adapting arbor.js to use images.
However, being a relative JS noob what I have is totally un-optimised.
As far as I can tell, the way I've set it up is recreating the image object for every image and every frame, resulting in tons of flicker.
Can anyone suggest a way to move the new Image() stuff out of the redraw function into the initiation? As far as I know this is a basic OOP issue, but totally stuck.
Thanks!
Pastebin of where I'm up to on the output script
Current status.
Apologies all! There's a few steps. I'll highlight the key stages, the rest is from the tutorial.
First, add the relevant information to your JSON, for example:
nodes:{
innovation:{ 'color':colour.darkblue,
'shape':'dot',
'radius':30,
'image': 'innovation.png',
'image_w':130,
'image_h':24,
'alpha':1 },
participation:{ 'color':colour.purple,
'shape':'dot',
'radius':40,
'image':'participation.png',
'image_w':130,
'image_h':24,
'alpha':1 },
...
Cache all your images when the thing loads.
init:function(system){
// Normal initialisation
particleSystem = system
particleSystem.screenSize(canvas.width, canvas.height)
particleSystem.screenPadding(25, 50)
that.initMouseHandling()
// Preload all images into the node object
particleSystem.eachNode(function(node, pt) {
if(node.data.image) {
node.data.imageob = new Image()
node.data.imageob.src = imagepath + node.data.image
}
})
...
Then, for moving the images themselves...
particleSystem.eachNode(function(node, pt){
...
// Image info from JSON
var imageob = node.data.imageob
var imageH = node.data.image_h
var imageW = node.data.image_w
...
// Draw the object
if (node.data.shape=='dot'){
// Check if it's a dot
gfx.oval(pt.x-w/2, pt.y-w/2, w,w, {fill:ctx.fillStyle, alpha:node.data.alpha})
nodeBoxes[node.name] = [pt.x-w/2, pt.y-w/2, w,w]
// Does it have an image?
if (imageob){
// Images are drawn from cache
ctx.drawImage(imageob, pt.x-(imageW/2), pt.y+radius/2, imageW, imageH)
}
}else {
// If none of the above, draw a rectangle
gfx.rect(pt.x-w/2, pt.y-10, w,20, 4, {fill:ctx.fillStyle, alpha:node.data.alpha})
nodeBoxes[node.name] = [pt.x-w/2, pt.y-11, w, 22]
}
...
Creating a new object on mouseclick as a way for users to create reference points (which I call 'crumbs') when reading large web documents. I've got this working with a new Image() function, however, that won't let me assign a tabindex to each new image created by mouseclick (posX, posY). 'crumbtoggle' simply acknowledges that the crumb dropping tool has been selected.
working new Image() function:
function draw_crumb()
{
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
var crumb = new Image();
crumb.src = "crumb.gif";
if(crumbtoggle.className == "on")
{
b_context.drawImage(crumb, posX-20, posY-20, 50, 75);
}
}
non-working new Object () function:
function draw_crumb()
{
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
var crumb = new Object();
crumb.type = "button";
crumb.src = "crumb.gif";
crumb.tabindex = 1;
if(crumbtoggle.className == "on")
{
b_context.drawObject(crumb, posX-20, posY-20, 50, 75);
}
}
I've looked in to applying focus to the new Image objects, but that doesn't seem to be a good alternative to tabindex attributes. Any ideas would be greatly appreciated.
An HTML5 Canvas is like a real-world canvas with instantly-drying paint. When you paint a rectangle or line or image on the canvas, it becomes part of the canvas. You cannot later re-order the items, or move them relative to each other. It is not a separate entity that can get focus.
Any sort of focus management integrated with the browser's handling of focus will have to be done through form inputs or anchors recognized by the browser.
It's not clear to me why you need a canvas, or if you need one at all.