I have a code that draws a bunch of customized shapes from an xml... I want to make each shape select-able /de-selectable by changing the color of the object and changing backk all other colors when things change but my codes broken but i'm not getting any errors or anything it just doesn't work.
var graphicsShape
function drawLayer(layer){
for (var i =0; i < xmlDoc.getElementsByTagName("polygon").length; i++)
{
if (layer == xmlDoc.getElementsByTagName("polygon")[i].childNodes[0].attributes[4].value)
{ drawSegment(i);
}
}
}
// layer = index z
function drawSegment(a){
var vertexList = xmlDoc.getElementsByTagName("polygon")[a].childNodes;
var graphicsObject = new createjs.Graphics();
graphicsShape = new createjs.Shape(graphicsObject);
graphicsObject.setStrokeStyle(1);
graphicsObject.beginStroke(createjs.Graphics.getRGB(0,0,0));
graphicsObject.beginFill(createjs.Graphics.getRGB(255,0,0));
for(var i = 0; i < vertexList.length; i++){
graphicsObject.lineTo(vertexList[i].attributes[2].value, vertexList[i].attributes[3].value)
stage.addChild(graphicsShape);
}
segmentsArray.push(graphicsShape);
//createContainer(segmentsArray[i]);
}
function createArraysForSegments() {
for(var i=0; i <segmentsArray.length; i++){
segmentsData[i] = new Array;
}
}
function ColorChangeAddEventListener() {
for(var i = 0; i < segmentsArray.length; i++){
segmentsArray[i].addEventListener('click', colorChange(i));
}
}
function colorChange(index){
segmentsArray[index].graphics.beginFill('white');
stage.update();
}
i call the functions later
ColorChangeAddEventListener();
drawLayer(0);
stage.update();
if i type segmentsArray[0].alpha =0.5; it works for that shape, but when I put it in segmentsArray[0].addEventsListener('click', function){segmentsArray[0].alpha=0.5;}) that doesn't work
Just setting the beginFill won't affect the current shape, you will also have to segmentsArray[index].graphics.clear() and redraw the shape.
beginFill() is not the setter for a property but rather a command that affects subsequents commands, like drawRect() for example.
Related
I have an example like this, as you can see in the example cell's height are different and it is an obstacle to calculate for rendering some custom SVGs. Actually, I want to get height of each cell in this block of code (in my real project):
chart: {
events: {
load() {
var ticks = this.yAxis[0].treeGrid.axis.grid.columns[0].ticks;
for (var i = 0; i < Object.keys(ticks).length ; i++){
// I want to get the current tick height here!!
}
}
}
}
Please analyze and try to use this part of the code:
chart: {
events: {
load: function() {
var ticks = this.yAxis[0].ticks;
for (var i = 0; i < Object.keys(ticks).length - 1; i++) {
let prevTickHeight = ticks[i - 1].mark.d.split(' ')[2],
curTickHeight = ticks[i].mark.d.split(' ')[2] - prevTickHeight;
console.log(curTickHeight)
}
}
}
},
Demo: https://jsfiddle.net/BlackLabel/5zkwh2ta/
There is already some subject around three.js and memory usage, but i don't know if they're too old or if I'm still missing something : their solutions doesn't work for me with three.js r90.
LOADING all Meshs
here is how i'm loading objects :
var loader = new THREE.ObjectLoader();
var objects = [];
function loadMesh(path) {
loader.load(path, function (obj) {
obj.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material.skinning = true;
}
});
scene.add(obj);
objects.push(obj);
});
}
// ...
loadMesh('path/to/obj01.json');
loadMesh('path/to/obj02.json');
loadMesh('...');
///...
After all meshs loaded, memory increase of around 1Go.
REMOVING all meshs (and free memory)
1 - first try
function clearAll() {
var objLen = objects.length;
for (var i = 0; i < objLen; i++) {
scene.remove(objects[i]);
objects[i] = undefined;
objects.slice(i, 1);
}
}
After calling this, all meshs are well removed from scene but memory don't decrease after the GC cycle. (I'm using the "about:memory" page in firefox)
2- try with dispose()
function clearAll() {
for (var i = 0; i < objects.length; i++) {
scene.remove(objects[i]);
objects[i].traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.geometry.dispose();
child.material.dispose();
}
});
objects[i] = undefined;
objects.slice(i, 1);
}
renderer.dispose();
}
still no memory releasing after GC cycle.
3 - Trying to unset the renderer.
In the first try I notice that memory is release when i'm calling clearAll() if I never render the scene withrenderer.render(scene, camera).
So i tried to unset it :
function clearAll() {
var objLen = objects.length;
for (var i = 0; i < objLen; i++) {
scene.remove(objects[i]);
objects[i] = undefined;
objects.slice(i, 1);
}
renderer = undefined;
initRenderer(); // recreate and configure renderer.
}
This way the GC free properly memory. This make me think that there is still some references to meshs in the renderer? Why they're not unset when i'm calling dispose on mesh and renderer?
EDIT
4 - try with the Gaitat's solution from here :
Three.js Collada - What's the proper way to dispose() and release memory (garbage collection)?
function clearAll() {
for (var i = 0; i < objects.length; i++) {
scene.remove(objects[i]);
disposeHierarchy (objects[i], disposeNode);
delete(objects[i]);
}
function disposeNode(){...}
function disposeHierarchy(){...}
and no more memory release.
A have several views with WebViews on them. I need to make it in a coverFlowView. For that i make my views toImage, to put after on the coverFlow, but the issue is that i get images with webView not loaded... I tried to make setTimeout, but it doesn't help.
var cover = Titanium.UI.iOS.createCoverFlowView({
images: forflowImages
});
for (var k = start; k < cData.length; k++) {
r = Ti.UI.createView({});
for (var j = 0; j < child.objects.length; j++) {
tmp = Ti.UI.createWebView({
left : 10,
top : 10,
right : 10,
bottom : 10,
width : Ti.UI.FILL,
height : Ti.UI.SIZE,
willHandleTouches: true,
backgroundColor : '#fff2df',
});
tmp.html = obj.html;
no.add(tmp);
r.add(no);
}
}
r.addEventListener("load", function(e) {
blob = r.toImage();
});
forflowImages.push(blob);
}
cover.setImages(forflowImages);
With this code, coverFlowView doesn't have any views.
setTimeout(function() {
blob = r.toImage();
}, 500);
Also doesn't help, i have activity indicator on the page saved, content seems didn't have time to load before toImage function acted.
You are ordering things the wrong way, and you have multiple syntax errors, also you are listeneing for the load event on the wrong type of view, you shold be listeneing on the WebView, try this instead:
var forflowImages = [];
var container = // This should already be in the view stack somewhere
var cover = Titanium.UI.iOS.createCoverFlowView();
function loadListener(e) {
forflowImages.push(e.source.toImage());
if(forFlowImages.length == child.objects.length) {
// We have all the images for cover flow
cover.setImages(forflowImages);
}
}
var containerView = Ti.UI.createView();
for (var j = 0; j < child.objects.length; j++) {
var tmp = Ti.UI.createWebView({html : obj.html);
tmp.addEventListener("load", loadListener);
container.add(tmp);
tmp.repaint();
}
I removed some of your code that was syntactically incorrect and trimmed it down so it would be easy to understand. All this code does is add an event listener that handles the conversion of a webview to an image.
I want to add each dataLabel a (just call it "highlightPoint()") function on a mouseover event. It works, if I add this function to a single point.
chartObj.series[0].data[1].dataLabel.on("mouseover", function () {
chartObj.series[0].data[1].setState('hover');
});
It doesn't work if I loop threw my data points. I guess the reference to each individual point is incorrect or something like that.
jsfiddle-link
After you have looped through both data sets, i = 2 and k = 1. So the mouse events are always trying to use i=2 and k=1 to access the data point, which of course is out of bounds. See this fiddle: http://jsfiddle.net/bLvfS/1/
for (var i = 0; i < chartObj.series.length; i++) {
for (var k = 0; k < chartObj.series[i].data.length; k++) {
var onmouseover = function(u, j) {
return function() {chartObj.series[u].data[j].setState('hover');};
}
var onmouseout = function(u, j) {
return function() {chartObj.series[u].data[j].setState();};
}
chartObj.series[i].data[k].dataLabel.on("mouseover", onmouseover(i,k));
chartObj.series[i].data[k].dataLabel.on("mouseout", onmouseout(i,k));
}
}
I've added functions that get passed the current i,k pair and return the actual function you want to run on the mouse events. Maybe someone has a better solution... but it seems to work.
Problem is with closures, see working fiddle: http://jsfiddle.net/Fusher/bLvfS/2/
for (var i = 0; i < chartObj.series.length; i++) {
for (var k = 0; k < chartObj.series[i].data.length; k++) {
(function(i,k){
chartObj.series[i].data[k].dataLabel.on("mouseover", function () {
chartObj.series[i].data[k].setState('hover');
});
chartObj.series[i].data[k].dataLabel.on("mouseout", function () {
chartObj.series[i].data[k].setState();
});
})(i,k);
}
}
I have a problem with visible lines appearing at the edges of the Skybox.
http://project-vanquish.co.cc/index.php <-- Shows the problem
Has anyone got any ideas as to why they are appearing? The textures don't have the white edge.
Rendering code block:
public override void Render(GraphicsDevice device)
{
device.DepthStencilState = DepthStencilState.None;
for (int i = 0; i < 6; i++)
{
this.sides[i].Position = CameraManager.ActiveCamera.Position + this.offsets[i];
EffectManager.ActiveShader.SetParameters(this.sides[i]);
foreach (EffectPass pass in EffectManager.ActiveShader.Effect.CurrentTechnique.Passes)
{
pass.Apply();
this.sides[i].Render(device);
}
}
device.DepthStencilState = DepthStencilState.Default;
}
Store your SamplerState:
SamplerState samplerState = device.SamplerStates[0];
Then, set it to AnisotropicClamp (or your preference):
device.SamplerStates[0] = SamplerState.AnisotropicClamp;
then after the render, reset your setting:
device.SamplerStates[0] = samplerState;