var stage, output;
function init() {
stage = new createjs.Stage("testCanvas");
// this lets our drag continue to track the mouse even when it leaves the canvas:
// play with commenting this out to see the difference.
stage.mouseMoveOutside = true;
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawRoundRect(0, 0, 100,20,10);
//console.log(circle.graphics.command.radius);
var label = new createjs.Text("drag me", "bold 14px Arial", "#FFFFFF");
label.textAlign = "center";
label.y = -7;
var dragger = new createjs.Container();
dragger.x = 50;
dragger.y = 10;
dragger.addChild(circle, label);
stage.addChild(dragger);
dragger.on("pressmove",function(evt) {
// currentTarget will be the container that the event listener was added to:
//evt.currentTarget.x = evt.stageX;
//evt.currentTarget.y = evt.stageY;
// make sure to redraw the stage to show the change:
//console.log(evt.currentTarget.children[0].graphics.command);
var newWidth= evt.stageX - evt.currentTarget.x;
console.log(evt.currentTarget.children[0].graphics);
if(newWidth<0)
newWidth = 0;
evt.currentTarget.children[0].graphics.command.w= newWidth;
evt.currentTarget.children[1].x= newWidth/2;
stage.update();
});
stage.update();
}
this code is working fine under http://www.createjs.com/demos
(i can reach this evt.currentTarget.children[0].graphics.command.w, because evt.currentTarget.children[0] returns shape)
but not on your own html. it is there any js i need to add in the heading?
Did you checked if "pressmove" trigger?
Maybe you should use this stage.enableMouseOver(20); to enable mouse events.
Related
I Have a Problem with my Script and hope helping me, and thanks in advance, i still learning javascript and try to learn somthing new everyday, i have a script that draw modeless interface (palette) and have button including (option) that make another new palette (for options), i made the variables as globals for the option palette, but the problem is the global variables is only called once!, and the script lose the global variable scope!.
enter image description here
so my question is how to make the variables not losing its scope and retain in the memory? as long the script run, as an Example if the user move the slider and hit (Show alert due options) its only run once and then lose the scope, even the slider no longer interact with the user and update text box, please test the code to see the problem, and thank again for any help or advice.
Best
M.Hasanain
//Global Variables only Called Once then Lost their Scope!
#targetengine "session1";
var w = new Window("palette", {independent:true}); //Main Palette Windows
var findoptions = new Window("palette"); //Options Palette
function Main() {
// Check to see whether any InDesign documents are open.
// If no documents are open, display an error message.
if (app.documents.length > 0) {
var myDoc = app.activeDocument;
}else{
// No documents are open, so display an error message.
alert("No InDesign documents are open. Please open a document and try again.");
}
}
//---------------------------------------------------------
//Making Palettes Windows
//---------------------------------------------------------
#targetengine "session1";
var w = new Window("palette", {independent:true}); //Main Palette Windows
var findoptions = new Window("palette"); //Options Palette
//gqmanager is the (GREP Query Manager) outside the main Function
w.text = "Test the Connection Between Global Variables and Palettes";
w.preferredSize.width = 500;
w.alignChildren = ["center", "center"]; //"left";
w.orientation = "column"; //"row";
w.spacing = 10;
w.margins = 16;
//Parent - Input Panel Prepare
var InputPanel = w.add("panel", undefined, undefined, { name: "panel1" });
InputPanel.text = "Text Find : ";
InputPanel.preferredSize.width = 1000;
InputPanel.orientation = "row";
InputPanel.alignChildren = ["center", "center"];
InputPanel.spacing = 10;
InputPanel.margins = 16;
//Children - input Panel Inside Prepare
var myInputPanelInside = InputPanel.add("group", undefined, { name: "myInput" });
//--Adding Find What
myInputPanelInside.add("statictext", undefined, "Find What :");
//myInputPanelInside.alignment = "center";
var myGREPString = myInputPanelInside.add("edittext", undefined, "SAMPLE");
myGREPString.helpTip = "Enter Your Text"
myGREPString.characters = 20;
myGREPString.enabled = true;
myGREPString.preferredSize.width = 460;
var Button1 = myInputPanelInside.add("button", undefined, "Options");
//Parent - Radio Panel Prepare
var RadioPanel = w.add("panel", undefined, undefined, { name: "panel2" });
RadioPanel.text = "Select Desired Option : ";
RadioPanel.preferredSize.width = 1000;
RadioPanel.orientation = "row";
RadioPanel.alignChildren = ["center", "center"];
RadioPanel.spacing = 10;
RadioPanel.margins = 16;
//Children - input Panel Inside Prepare
var myRadioPanelInside = RadioPanel.add("group", undefined, { name: "myRadio" });
myRadioPanelInside.preferredSize.width = 500;
myRadioPanelInside.alignChildren = ["center", "center"];
//Adding Radio Buttons
var radio1 = myRadioPanelInside.add("radiobutton", undefined, "Option 1");
var radio2 = myRadioPanelInside.add("radiobutton", undefined, "Option 2");
var radio3 = myRadioPanelInside.add("radiobutton", undefined, "Option 3");
radio1.preferredSize.width = 200;
radio2.preferredSize.width = 200;
radio3.preferredSize.width = 200;
//Previous Default Condition
radio1.value = true;
var myButtonGroup = w.add("group");
myButtonGroup.alignment = "center";
var Button2 = myButtonGroup.add("button", undefined, "Show Alert Due Options");
var Button3 = myButtonGroup.add("button", undefined, "Exit");
Button1.onClick = function () {
CalltheFindOptions();
}
Button2.onClick = function () { Find(); };
function Find() {
doRadioButtonOpt();
}
Button3.onClick = function() {Canceled();};
function Canceled() {
ExitSure();
}
//After Drawing Interface
var a = w.show();
function ExitSure() {
var a = w.close();
exit(0);
}
//User Selection for Radio Buttons
function doRadioButtonOpt() {
myDoc = app.activeDocument;
if (radio1.value == true) {
TestVars();
}
}
function TestVars() {
#targetengine "session1";
var myDoc = app.activeDocument
var TimeMs = Number(SliderControlText.text); //Converting Text to Number
//Show Results Found as User Wish
if (DontShowResults.value == true) { //no Show only Apply
alert("you Select not to Show Results!");
}else{ //Direct Show and Apply
if (ShowResultsDirect.value == true) {
alert("you Select to Show Results in real time!");
}else{ //Show and Apply By WaitinhTime!
if (ShowResults.value == true) { //Show and Apply
alert("you Select to Show Results with Specific time!");
$.sleep(TimeMs); //Wait ms
}
}
}
alert("Do you need somthing else?, try again", "Finish Report");
}
var DontShowResults;
var ShowResultsDirect;
var ShowResults;
var SliderControlText;
var slider;
//--------------------------------------------Building the Find Options Palette-----------------------------------------//
//--------------------------------------------------------------------------------------------------------------------------------//
function CalltheFindOptions() {
#targetengine "session1";
//Find Options Window
findoptions.text = "Find Options";
//Parent - Input Panel Prepare
SelectPanel = findoptions.add("panel", undefined, undefined, { name: "panel1" });
SelectPanel.text = " Find Options : ";
SelectPanel.preferredSize.width = 1000;
SelectPanel.orientation = "row";
SelectPanel.alignChildren = ["center", "center"];
SelectPanel.spacing = 10;
SelectPanel.margins = 16;
//Children - input Panel Inside Prepare
mySelectPanelInside = SelectPanel.add("group", undefined, { name: "mySelOpt" });
DontShowResults = mySelectPanelInside.add("checkbox", undefined, "Don't Show Results");
DontShowResults.value = true; //by Default
DontShowResults.alignment = "left";
ShowResultsDirect = mySelectPanelInside.add("checkbox", undefined, "Show Results");
ShowResultsDirect.value = false; //by Default
ShowResults = mySelectPanelInside.add("checkbox", undefined, "Show Results Delayed in milliseconds(Ms) :");
ShowResults.value = false; //by Default
//Adding Slider to Control MS Time
SliderControlText = mySelectPanelInside.add ("edittext", undefined, 10, {readonly: false}); //read only prevent user Entering Nums
SliderControlText.characters = 3;
slider = mySelectPanelInside.add ("slider {minvalue: 1, maxvalue: 100, value: 10}");
//Slider Listener Plus SliderControl Text Listener
slider.onChanging = function () {SliderControlText.text = slider.value;} //Listen to Slider
var c = findoptions.show();
}
If I understand you correctly you need to use as global variables values rather than the objects. And you can change the values of global variables by onClick events.
Here is the bottom part of your code (the rest part of the code wasn't changed):
...
function TestVars() {
#targetengine "session1";
var myDoc = app.activeDocument
var TimeMs = Number(SliderControlText_text); //Converting Text to Number
//Show Results Found as User Wish
if (DontShowResults_value == true) { //no Show only Apply
alert("you Select not to Show Results!");
} else { //Direct Show and Apply
if (ShowResultsDirect_value == true) {
alert("you Select to Show Results in real time!");
} else { //Show and Apply By WaitinhTime!
if (ShowResults_value == true) { //Show and Apply
alert("you Select to Show Results with Specific time!");
$.sleep(TimeMs); //Wait ms
}
}
}
alert("Do you need somthing else?, try again", "Finish Report");
}
// values! not objects
var DontShowResults_value = true;
var ShowResultsDirect_value = false;
var ShowResults_value = false;
var SliderControlText_text = '10';
var slider_value = 10;
//--------------------------------------------Building the Find Options Palette-----------------------------------------//
//--------------------------------------------------------------------------------------------------------------------------------//
function CalltheFindOptions() {
#targetengine "session1";
//Find Options Window
findoptions.text = "Find Options";
//Parent - Input Panel Prepare
SelectPanel = findoptions.add("panel", undefined, undefined, {
name: "panel1"
});
SelectPanel.text = " Find Options : ";
SelectPanel.preferredSize.width = 1000;
SelectPanel.orientation = "row";
SelectPanel.alignChildren = ["center", "center"];
SelectPanel.spacing = 10;
SelectPanel.margins = 16;
//Children - input Panel Inside Prepare
var mySelectPanelInside = SelectPanel.add("group", undefined, {
name: "mySelOpt"
});
var DontShowResults = mySelectPanelInside.add("checkbox", undefined, "Don't Show Results");
DontShowResults.value = DontShowResults_value; //by Default
DontShowResults.alignment = "left";
// change the global variable by click
DontShowResults.onClick = function() { DontShowResults_value = DontShowResults.value }
var ShowResultsDirect = mySelectPanelInside.add("checkbox", undefined, "Show Results");
ShowResultsDirect.value = false; //by Default
// change the global variable by click
ShowResultsDirect.onClick = function() { ShowResultsDirect_value = ShowResultsDirect.value }
var ShowResults = mySelectPanelInside.add("checkbox", undefined, "Show Results Delayed in milliseconds(Ms) :");
ShowResults.value = ShowResults_value; //by Default
// change the global variable by click
ShowResults.onClick = function() { ShowResults_value = ShowResults.value }
//Adding Slider to Control MS Time
// SliderControlText = mySelectPanelInside.add("edittext", undefined, 10, {
var SliderControlText = mySelectPanelInside.add("edittext", undefined, SliderControlText_text, {
readonly: false
}); //read only prevent user Entering Nums
SliderControlText.characters = 3;
var slider = mySelectPanelInside.add("slider {minvalue: 1, maxvalue: 100, value: 10}");
// change slider every time as numbers is changes
SliderControlText.onChanging = function() {slider.value = SliderControlText.text};
//Slider Listener Plus SliderControl Text Listener
slider.onChanging = function () {
SliderControlText.text = slider.value;
// change the global variable by onChange
SliderControlText_text = SliderControlText.text;
} //Listen to Slider
findoptions.show();
}
It seems it works as intended.
As far as I can tell (I can be wrong), the cause of the problem was that the objects ShowResultsDirect, ShowResultsDirect, etc, disappears as soon as you close the palette. Because they are elements of the palette. They can't keep values if the palette is closed. That why they worked well only when you open the palette first time.
To get you into the context, let say i have a camera
camera = new THREE.PerspectiveCamera();
camera.position.set(1,1,1);
camera.lookAt(scene.position);
camera.rotation.set(Math.PI/2, 0 ,0) // <=== this is lost when the orbit control move
then i create an orbit control
controls = new THREE.OrbitControls(camera, renderer.domElement);
The Problem is that when i use the orbit control by dragging the mouse on click or zooming, the camera rotation is lost.
I tried using controls.update() but it's not working
Edit
Here is a link for a jsfiddle
var camera;
var scene;
var conrols;
var renderer;
function init() {
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(0, 0, 5);
scene.add(camera);
scene.add(new THREE.AmbientLight(0xffffff, 0.6));
var light1 = new THREE.HemisphereLight(0xffffbb, 0x080820, 0.7)
scene.add(light1);
var light2 = new THREE.SpotLight(0xffffff, 0.5);
light2.position.set(4, 7, 23);
scene.add(light2);
var light3 = new THREE.SpotLight(0xffffff, 0.5);
light3.position.set(4, 7, -23);
//scene.add(light3);
var geometry = new THREE.BoxGeometry(2, 1, 1);
var material = new THREE.MeshLambertMaterial({
color: 0x00ffff
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
document.getElementById('button').onclick = function() {
//console.log("position");
//console.log(camera.position);
//console.log("rotation");
//console.log(camera.rotation);
camera.rotation.set(0, 0, 1.57);
// camera.position.set(-0.041, 1.9, -1.21);
}
init();
animate();
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<button id="button">change rotation</button>
in my original application i have a 3D foot mesh. Sometimes i need to have a vertical view of the backfoot with only a click. So i apply a camera rotation. but when i move the camera with orbit control the camera rotation jumps to the old value.
You can switch to a second camera like 2pha says or you can set controls.enableRotate = false;
Hi I'm creating a basic game and I need the most simple "PAUSE" menu in the world!!! I am using this:
pauseButton = this.game.add.sprite(10, 10, 'pauseButton');
pauseButton.inputEnabled = true;
pauseButton.events.onInputUp.add(function () {this.game.paused = true;},this);
game.input.onDown.add(function () {if(this.game.paused)this.game.paused = false;},this);
pauseButton.fixedToCamera = true;
I just want to see "Game Paused" when the pause button is pressed that's all! please just tell me the most simple code that will display "game paused" when i click on pause.
Thank you in advance!
Something along the lines of this:
var text;
var pauseButton = this.game.add.sprite(10, 10, 'pauseButton');
pauseButton.inputEnabled = true;
pauseButton.events.onInputUp.add(function () {
this.game.paused = true;
var style = {fill : '#FFF'};
text = game.add.text(game.width * 0.5, game.height * 0.5, "Game Over!", style);
text.anchor.set(0.5, 0.5);
}, this);
game.input.onDown.add(function () {
if (this.game.paused) {
this.game.paused = false;
text.destroy();
}
}, this);
pauseButton.fixedToCamera = true;
Added it right in your code, you may want to adjust what is a local variable and what is a field. You can include text properties in the style variable or you can set them later on via text.font, text.fontSize and so on, see the API documentation.
I'm using three.js r67, and vertices does not seem to be updated.
I set geometry.dynamic = true, geometry.verticesNeedUpdate = true.
Circle is moving, but line is static....
Someone could help me?
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var g = new THREE.CircleGeometry( 4, 16 );
var m = new THREE.MeshBasicMaterial({color: 0x114949});
var circle = new THREE.Mesh( g, m );
circle.position.x = 2;
circle.position.y = 2;
circle.position.z = -1;
scene.add( circle );
var material = new THREE.LineBasicMaterial({color: 0xDF4949, linewidth: 5});
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(1, 1, 0));
geometry.verticesNeedUpdate = true;
geometry.dynamic = true;
var line = new THREE.Line(geometry, material);
scene.add(line);
var update = function() {
circle.position.x += 0.01;
line.geometry.vertices[0].x = circle.position.x;
};
var render = function() {
renderer.render(scene, camera);
};
var loop = function() {
update();
render();
requestAnimationFrame(loop, renderer.canvas);
};
loop();
Note: The legacy Geometry class has been replaced with the BufferGeometry class.
If you want to update the vertex positions of your BufferGeometry, you need to use a pattern like so:
mesh.geometry.attributes.position.array[ 0 ] += 0.01;
mesh.geometry.attributes.position.needsUpdate = true;
After rendering, you need to reset the needsUpdate flag to true every time the attribute values are changed.
three.js r.147
Is it possible to add mouse events to a shape mask? I have the mask working, and have animated it in other tests. But now I want to know if masks can be clicked and dragged.
You can see the example here: http://www.webnamehere.com/mask/mask.html
And although Easeljs never never seems to work in jsFiddle, you can also see the code here: http://jsfiddle.net/8kbu3/1/
var circle = new createjs.Shape();
var Galaxy;
$(document).ready(function() {
canvasWidth = "1024px";
canvasHeight = "768px";
stage = new createjs.Stage('demoCanvas');
createjs.Touch.enable(stage);
$("#demoCanvas").attr({width:canvasWidth, height:canvasHeight});
Galaxy = new Image();
Galaxy.src = "images/galaxy.jpg";
Galaxy.onload = handleImageLoad;
function handleImageLoad() {
GalaxyBitmap = new createjs.Bitmap(Galaxy);
GalaxyBitmap.x = 0;
GalaxyBitmap.y = 0;
containerGalaxy = new createjs.Container();
containerGalaxy.addChild(GalaxyBitmap);
containerGalaxy.x = 0;
containerGalaxy.y = 0;
circle = new createjs.Shape();
circle.graphics.beginFill('blue').drawCircle(80,80,50).endFill();
containerGalaxy.mask = circle;
stage.addChild(containerGalaxy);
stage.update();
}
circle.onClick = function(evt){
alert('what the F?');
}
circle.onPress = function(evt){
var offset = {x:circle.x-evt.stageX, y:circle.y-evt.stageY};
evt.onMouseMove = function(ev) {
circle.x = ev.stageX+offset.x;
circle.y = ev.stageY+offset.y;
console.log("circle X: " + circle.x + " | Y: " + circle.y);
stage.update();
}
}
Thanks guys
To receive an click-event you have to add the circle to the stage (stage.addChild(circle)) or to a child of the stage, even if it acts as a mask - in your case it might be better to take a transparent dummy-object as the click-listener.