How to fill path item with color - javascript

I'm trying to draw closed path and fill it with some collor. Here the code
startRulerUnits = app.preferences.rulerUnits
startTypeUnits = app.preferences.typeUnits
startDisplayDialogs = app.displayDialogs
//change settings
app.preferences.rulerUnits = Units.PIXELS
app.preferences.typeUnits = TypeUnits.PIXELS
app.displayDialogs = DialogModes.NO
var AD = activeDocument;
var bBox = new Array();
bBox[0] = 10;
bBox[1] = 10;
bBox[2] = 50;
bBox[3] = 10;
bBox[4] = 50;
bBox[5] = 50;
bBox[6] = 10;
bBox[7] = 50;
var line = new Array();
line[0] = new PathPointInfo;
line[0].kind = PointKind.CORNERPOINT;
line[0].anchor = [bBox[0],bBox[1]];
line[0].leftDirection = line[0].anchor;
line[0].rightDirection = line[0].anchor;
line[1] = new PathPointInfo;
line[1].kind = PointKind.CORNERPOINT;
line[1].anchor = [bBox[2],bBox[3]];
line[1].leftDirection = line[1].anchor;
line[1].rightDirection = line[1].anchor;
line[2] = new PathPointInfo;
line[2].kind = PointKind.CORNERPOINT;
line[2].anchor = [bBox[4],bBox[5]];
line[2].leftDirection = line[2].anchor;
line[2].rightDirection = line[2].anchor;
line[3] = new PathPointInfo;
line[3].kind = PointKind.CORNERPOINT;
line[3].anchor = [bBox[6],bBox[7]];
line[3].leftDirection = line[3].anchor;
line[3].rightDirection = line[3].anchor;
var lineSubPath= new Array();
lineSubPath[0] = new SubPathInfo();
lineSubPath[0].operation = ShapeOperation.SHAPEXOR;
lineSubPath[0].closed = true;
lineSubPath[0].entireSubPath = line;
var path = AD.pathItems.add("A", lineSubPath);
//var paperShape = AD.artLayers.add();
var colorRef = new SolidColor;
colorRef.rgb.red = 255
colorRef.rgb.green = 100;
colorRef.rgb.blue = 10;
path.fillPath(colorRef, ColorBlendMode.COLOR,100,true,0,true,true);
//shapeLayer.applyStyle("ransom_note");*/
app.preferences.rulerunits = startRulerUnits
app.preferences.typeunits = startTypeUnits
app.displayDialogs = startDisplayDialogs
path is drawn, but error apears while filling
fillPath is not a function.
Can anybody help?
P.S. Sorry for my English

path is a property of Application, Photoshop does not understand when you try to apply fillPath to it, even if you had declared it as a variable name... you just gets Photoshop confused on what to do.
You should simply change that's variable name to something like myPath and then myPath.fillPath(colorRef, ColorBlendMode.COLOR,100,true,0,true,true); will work.
I would also make a little change in the ColorBlendMode, if you set it to COLOR you won't be able to actually see the color you are applying, and it will seem that the script is not working at all.
Try myPath.fillPath(colorRef, ColorBlendMode.NORMAL,100,true,0,true,true); and you're done!

Related

How to flip type on a path in InDesign using ExtendScript?

I try to create type on a path and then flip type on a path in InDesign using ExtendScript:
var myDocument = app.documents.add();
myDocument.documentPreferences.pageWidth = 120;
myDocument.documentPreferences.pageHeight = 120;
var myOval = myDocument.ovals.add();
myOval.absoluteRotationAngle = 180;
myOval.geometricBounds = [2.5, 2.5, 117.5, 117.5];
myOval.strokeWeight = 0;
var myTextPath = myOval.textPaths.add();
myTextPath.flipPathEffect = FlipValues.FLIPPED;
myTextPath.parentStory.appliedFont = "Arial\tRegular";
myTextPath.parentStory.pointSize = 10;
myTextPath.parentStory.leading = 12;
myTextPath.parentStory.justification = Justification.CENTER_ALIGN;
myTextPath.contents = "text in a circle";
The type is not displayed in InDesign.
How can I flip type on a path in InDesign using ExtendScript?
I thank you for your help.
It's not clear what exactly your desired result should look like. So there can be different solutions. For example you could 'unclose' the oval (make it an open path):
var myDocument = app.documents.add();
myDocument.documentPreferences.pageWidth = 120;
myDocument.documentPreferences.pageHeight = 120;
var myOval = myDocument.ovals.add();
myOval.absoluteRotationAngle = 180;
myOval.geometricBounds = [2.5, 2.5, 117.5, 117.5];
myOval.strokeWeight = 0;
// make an extra point on the path
var p = myOval.paths[0].pathPoints[0];
myOval.paths[0].pathPoints.add(p.properties);
// make the path an open path
myOval.paths[0].pathType = PathType.OPEN_PATH;
var myTextPath = myOval.textPaths.add();
myTextPath.flipPathEffect = FlipValues.FLIPPED;
myTextPath.parentStory.appliedFont = "Arial\tRegular";
myTextPath.parentStory.pointSize = 10;
myTextPath.parentStory.leading = 12;
myTextPath.parentStory.justification = Justification.CENTER_ALIGN;
myTextPath.contents = "text in a circle";
Output:

I have a misunderstanding with localStorage

I'm currently beginning to learn how to use javascript, and I have a small problem.
I'm making a minigame of 'find the random number', and I'm trying to implement a localStorage savestate that let me keep my game as it was when I closed it, but without success. Here's the part of my JS
where I'm stuck.
let Rndm = Math.floor(Math.random() * 100) + 1;
var tentatives = document.querySelector('.tentatives');
var resultat = document.querySelector('.resultat');
var plusoumoins = document.querySelector('.plusoumoins');
var valider = document.querySelector('.valider');
var essai = document.querySelector('.essai');
var nmbrmax = 1000;
var nmbrtent = 1;
let j1 = document.getElementById("j1");
let j2 = document.getElementById("j2");
var joueur1 = document.getElementById("joueur1");
var joueur2 = document.getElementById("joueur2");
let nomsjoueurs = document.getElementById("nomsjoueurs");
let tour = document.getElementById("tour");
var playerTurn = 0;
const partiesauvee = []
function sauvegarder() {
partiesauvee.push(tentatives.textContent);
partiesauvee.push(resultat.textContent);
partiesauvee.push(plusoumoins.textContent);
partiesauvee.push(nmbrmax);
partiesauvee.push(nmbrtent);
partiesauvee.push(joueur1.value);
partiesauvee.push(joueur2.value);
localStorage.setItem('sauvegard', JSON.stringify(partiesauvee))
}
function refresh() {
const partiesauvee = JSON.parse(localStorage.getItem('sauvegard'));
var tentatives = JSON.parse(localStorage.getItem('sauvegard'));
var resultat = JSON.parse(localStorage.getItem('sauvegard'));
var plusoumoins = JSON.parse(localStorage.getItem('sauvegard'));
var nmbrmax = localStorage.getItem('sauvegard');
var nmbrtent = localStorage.getItem('sauvegard');
var joueur1 = JSON.parse(localStorage.getItem('sauvegard'));
var joueur2 = JSON.parse(localStorage.getItem('sauvegard'));
}
window.addEventListener('DOMContentLoaded', refresh);
When the sauvegarder function is activated, the console.log(localstorage) find all the values,
but I can't find a way to return them to their places. Someone have an idea? Thanks !
You're storing an array. You need to assign each array element to a different DOM element.
function refresh() {
const storage = localStorage.getItem('sauvegard');
if (!storage) { // nothing saved
return;
}
const partiesauvee = JSON.parse(storage);
tentatives.textContent = partiesauvee[0];
resultat.textContent = partiesauvee[1];
plusoumoins.textContent = partiesauvee[2];
nmbrmax.textContent = partiesauvee[3];
nmbrtent.textContent = partiesauvee[4];
joueur1.textContent = partiesauvee[5];
joueur2.textContent = partiesauvee[6];
}

Change stroke color in seleced group

I try to change stroke color for the group of the path on atrboard. I have document with banch of artboards and icon on each artboards. Each icon contains several groups of the figure. And I have to change that on each artboard. How can I do this with JavaScript in Adobe Illustrator? Thanks.
var doc = app.activeDocument;
var strokeColor = {"red":255, "green":0, "blue":0}
for (i = 0; i < doc.artboards.length; i++) {
doc.artboards.setActiveArtboardIndex(i);
doc.selectObjectsOnActiveArtboard();
var selectedObjects = doc.selection;
var numSelectedObjects = selectedObjects.length;
var docSelection = app.activeDocument.selection;
newRGBColor = new RGBColor ();
newRGBColor.red=strokeColor.red;
newRGBColor.green=strokeColor.green;
newRGBColor.blue=strokeColor.blue;
docSelection.strokeColor =newRGBColor
}
Try:
var doc = app.activeDocument;
var myStrokeColor = new RGBColor();
myStrokeColor.red = 255;
myStrokeColor.green = 0;
myStrokeColor.blue = 0;
for(var i = 0; i < doc.pathItems.length; i++){
doc.pathItems[i].strokeColor = myStrokeColor
}
You may want to take the time to read Adobe's documentation on scripting
To only change the stroke colour of selected items you can use:
var doc = app.activeDocument;
var newRGBColor = new RGBColor();
var mySelection = doc.selection;
newRGBColor.red = 255
newRGBColor.green = 0
newRGBColor.blue = 0
for(var i = 0; i < doc.mySelection; i++){
mySelection[i].strokeColor = newRGBColor
}

Add another field for legend in amcharts to show percentage

I am using amcharts to create a piechart for some details in codeigniter and I use pie chart with legend(http://www.amcharts.com/demos/pie-chart-with-legend/) and I made view the legend with title and value just like in the demo. Now I want to add another field for the legend that display relevant percentage in line for each. Are there any keyword or method to do that? I am new to programming.
Here's my code..
$data['chartOne'] = $this->prepareJson($totalQuotations, "q");
$data['chartTwo'] = $this->prepareJson($totalContribution, "c");
<script type = "text/javascript">
var chart1 = AmCharts.makeChart( "salesReportPerformanceChartdiv",' . $data["chartOne"] . ');
var chart2 = AmCharts.makeChart( "salesReportContributionChartdiv",' . $data["chartTwo"] . ');
</script>';
public function prepareJson($data, $type) {
$chatData = [];
foreach ($data as $status) {
$stustotal = new \stdClass();
$stustotal->y = $status->count;
if ($type == "q") {
$stustotal->x = $status->status_name;
} else if ($type == "c") {
$stustotal->x = $status->user_name;
}
array_push($chatData, $stustotal);
}
$listeners = new \stdClass();
$listeners->method = addLegendLabel;
$listeners->event = "drawn";
$export = new \stdClass();
$export->enabled = true;
$legend = new \stdClass();
$legend->position = "right";
$legend->markerType = "circle";
$legend->autoMargins = true;
$feOffset = new \stdClass();
$feOffset->result = "offOut";
$feOffset->in = "SourceAlpha";
$feOffset->dx = 0;
$feOffset->dy = 0;
$feGaussianBlur = new \stdClass();
$feGaussianBlur->result = "blurOut";
$feGaussianBlur->in = "offOut";
$feGaussianBlur->stdDeviation = 5;
$feBlend = new \stdClass();
$feBlend->in = "SourceGraphic";
$feBlend->in2 = "blurOut";
$feBlend->mode = "normal";
$filter = new \stdClass();
$filter->id = "shadow";
$filter->width = "200%";
$filter->height = "200%";
$filter->feOffset = $feOffset;
$filter->feGaussianBlur = $feGaussianBlur;
$filter->feBlend = $feBlend;
$defs = new \stdClass();
$defs->filter = $filter;
$chart = new \stdClass();
$chart->type = "pie";
$chart->startDuration = 0;
$chart->theme = "light";
$chart->addClassNames = true;
$chart->legend = $legend;
$chart->innerRadius = "85%";
$chart->defs = $defs;
$chart->dataProvider = (array)$chatData;
$chart->valueField = "y";
$chart->titleField = "x";
$chart->labelRadius = 5;
$chart->radius = "42%";
$chart->labelText = "";
$chart->listeners = $listeners;
$chart->export = $export;
$chartJSON = json_encode($chart);
return $chartJSON;
}
You can customize the legend's valueText to include the percents by adding the [[percents]] shortcode to the string. By default, it is set to "[[value]]". In your case, it looks like you have to set it through your $legend variable. You might also want to set the valueWidth to accommodate for the longer value string like so:
$legend->valueText = "[[value]] [[percents]]%"; //customize as needed
$legend->valueWidth = 100; //adjust as needed so it doesn't overlap
Fiddle

Easeljs game project

I'm working on a game project but I have a a problem i received this error:
NS_ERROR_NOT_AVAILABLE:
ctx.drawImage(this.image, 0, 0); //Bitmap.js in Easeljs lib.
I used the bitmap in the next codes. Please tell me if in this there is a problem and how to fix it.
Thanks for collaboration.
Code 1:
p.initialize = function(x,y ,stage, world){
var bmp = new Bitmap('../assets/blackBall.png');
//console.log(bmp)
//alert(bmp)
bmp.regX = radius;
bmp.regY = radius;
bmp.x=x;
bmp.y=y;
this.skin = bmp;
stage.addChild(bmp);
var fixDef = new b2FixtureDef();
fixDef.density = 1.0;
fixDef.friction = 0.5;
fixDef.restitution = 0.8;
fixDef.shape = new b2CircleShape(38*CONST.pixelToMeter);
var bodyDef = new b2BodyDef();
bodyDef.type = b2Body.b2_dynamicBody;
bodyDef.position.x = bmp.x*CONST.pixelToMeter;
bodyDef.position.y = bmp.y*CONST.pixelToMeter;
this.body = world.CreateBody(bodyDef);
this.body.CreateFixture(fixDef);
this.skin.body = this.body;
setUserData(this.body);
/*Event handler*/
this.skin.onMouseOver = handleMouseOver;
this.skin.onMouseOut = handleMouseOut;
this.skin.onPress = handleMouseDown;
//console.log(this.skin);
}
Code 2:
p.initialize = function(stage, world){
var shooterSkin = new Container();
var cirlceSkin = new createjs.Bitmap('../assets/shooter.png');
cirlceSkin.name = "ball";
var arrowSkin = new createjs.Bitmap('../assets/arrow.png');
arrowSkin.name = "arrow";
arrowSkin.rotation = 0;
arrowSkin.scaleX =0;
arrowSkin.regY = arrowHeight;
cirlceSkin.regX = skinRadius;
cirlceSkin.regY = skinRadius;
cirlceSkin.x =0;
cirlceSkin.y = 0;
cirlceSkin.alpha=circleAlpha;
shooterSkin.x=110
shooterSkin.y = 110;
shooterSkin.addChild(cirlceSkin);
shooterSkin.addChild(arrowSkin);
arrowIndex = 1;
this.skin = shooterSkin;
stage.addChild(shooterSkin);
var fixDef = new b2FixtureDef();
fixDef.friction = 0;
fixDef.restitution = 0;
fixDef.isSensor = true;
fixDef.shape = new b2CircleShape(radius*CONST.pixelToMeter);
var bodyDef = new b2BodyDef();
bodyDef.type = b2Body.b2_kineticBody;
bodyDef.position.x = shooterSkin.x*CONST.pixelToMeter;
bodyDef.position.y = shooterSkin.y*CONST.pixelToMeter;
this.body = world.CreateBody(bodyDef);
this.body.CreateFixture(fixDef);
setUserData(this.body);

Categories

Resources