i'm using oxyplot,i want to drag point in scatter series,but i hava no idea.
i tried to add OnMouseMove but its not work.
var _model0 = new PlotModel();
//axes
_model0.Axes.Add(new LinearAxis { Position = AxisPosition.Left, Minimum = -24, Maximum =
12, IsZoomEnabled = false });
_model0.Axes.Add(new LogarithmicAxis { Position = AxisPosition.Bottom, Minimum = 20,
Maximum = 20000, TickStyle = TickStyle.None, IsZoomEnabled = false });
//series
var s = new AreaSeries();
s.MouseMove += (s, e) =>{ MessageBox.Show("1");};
_model0.Series.Add(s);
enter image description here
the pic is follow:
Related
here I have the pattern file hiro.patt & pattern-markerobj1.patt
let patternArray = ["hiro", "pattern-markerobj1"];
pattern hiro.patt represents mtl-obj Fish
pattern pattern-markerobj1.patt mtl-obj represents
let mtlobj = ['fish-2','test',];
file obj dan mtl
but when it is executed, all 3D models are only displayed on the 1st marker index or 2nd marker, namely pattern-markerobj1.
however when I use THREE.MeshBasicMaterial by using color in array
let colorArray = [0xff8800, 0xffff00, ]; they seemed no problem.
can be seen in the image below
Hiro without 3D Model without 3D Model :')
pattern-markerobj1 with 2 3D Models (stacked) pattern-markerobj1
then how to fix it?
hope
marker Hiro -> mtl obj fish
marker pattern-markerobj1 -> test mtl obj
let patternArray = ["hiro", "pattern-markerobj1"];
let colorArray = [0xff8800, 0xffff00, ];
let mtlobj = ['fish-2', 'percobaan', ];
let scale = [0.25, 0.0025, ];
for (let i = 0; i < 2; i++) {
markerRoot1 = new THREE.Group();
scene.add(markerRoot1);
let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
type: 'pattern',
patternUrl: "data/" + patternArray[i] + ".patt",
})
let geometry1 = new THREE.PlaneBufferGeometry(1, 1, 4, 4);
// let texture = loader.load( 'images/earth.jpg', render );
let material1 = new THREE.MeshBasicMaterial({
color: colorArray[i],
opacity: 0.0005
});
mesh1 = new THREE.Mesh(geometry1, material1);
mesh1.rotation.x = -Math.PI / 2;
markerRoot1.add(mesh1);
function onProgress(xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
}
function onError(xhr) {
console.log('An error happened');
}
new THREE.MTLLoader()
.setPath('models/')
.load(mtlobj[i] + '.mtl', function (materials) {
materials.preload();
new THREE.OBJLoader()
.setMaterials(materials)
.setPath('models/')
.load(mtlobj[i] + '.obj', function (group) {
mesh0 = group.children[0];
mesh0.material.side = THREE.DoubleSide;
mesh0.position.y = 0.25;
mesh0.scale.set(scale[i], scale[i], scale[i]);
markerRoot1.add(mesh0);
}, onProgress, onError);
});
}
Framwork: React js.
Library: "raphael": "^2.2.8",
Description: canvas throw an Error: attribute d: Expected number, "….68028259277344CNaN,NaN,NaN,NaN,…".
console errors screenshot
http://jsfiddle.net/fzjc81ym/
this.canvas = Raphael('grid', '100%', '100%');
drawLine(this.canvas, path1, duration, arrowAtrr, color, strokeDasharray, strokeWidth, arrowend).then(() => this.resolve(item, callback))
const drawLine = (canvas, pathStr, duration = 1000, attr = arrowAtrr, color = Color.GREEN, strokeDasharray = '-', strokeWidth = 4, arrowend = "block-wide-long") => {
return new Promise((resolve) => {
attr.stroke = color;
attr['stroke-dasharray'] = strokeDasharray;
attr['stroke-width'] = strokeWidth;
attr['arrow-end'] = arrowend
var guidePath = canvas.path(pathStr).attr({ stroke: 'none', fill: 'none' });
var path = canvas.path(pathStr).attr({ stroke: 'none', fill: 'none' });
var totalLength = guidePath.getTotalLength(guidePath);
var startTime = new Date().getTime();
var intervalLength = 25;
var intervalId = setInterval(function () {
var elapsedTime = new Date().getTime() - startTime;
var thisLength = elapsedTime / duration * totalLength;
var subPathStr = guidePath.getSubpath(0, thisLength);
attr.path = subPathStr;
path.attr(attr)
path.animate(attr, intervalLength);
if (elapsedTime >= duration) {
clearInterval(intervalId);
resolve();
}
}, intervalLength);
});
}
it seems to happen when I use the arrow-end attribute
I didn't find an answer in other places
Maybe someone has any idea how to solve that error?
A solutions:
in my case, the arrow line was smaller than the arrow-end triangle,
so I set the min size of the path to be 11 (the length of the arrow-end).
var subPathStr = guidePath.getSubpath(0, Math.max(11, thisLength));
here the around code:
var subPathStr = guidePath.getSubpath(0, Math.max(11, thisLength));
attr.path = subPathStr;
path.attr(attr)
path.animate(attr, intervalLength);
You didnt really include enough Information for your problem but this may help.
https://www.npmjs.com/package/react-raphael
It looks like you need to call Raphael.Paper(width={300} height={300}) in order to set the width of a canvas.
Single GLTF element i can drag and drop. but group of element i can't drag. I am using following code
var loader = new THREE.GLTFLoader();
loader.load( 'W3030/W3030.gltf', ( gltf ) => {
gltf.scene.traverse( function( child ) {
if(child.type === "Group")
{
newObject = true;
GLTFobjects.push(child);
}
if ( child.isMesh ) {
child.receiveShadow = true;
child.castShadow = true;
child.material.transparent = true;
child.material.opacity = 1;
}
});
scene.add(GLTFobjects);
gltf.scene.scale.set(1, 1, 1);
});
I'm afraid instances of Group are not supported by DragControls since there is no Group.raycast() method.
You can implement a workaround by replacing groups with invisible meshes. However, instead of setting Object3D.visible to false, you do this for Material.visible. Otherwise the raycasting logic will not perform the intersection test. It's then necessary to use a geometry that is large enough to enclose the respective children.
three.js R110
Hi Thanks for your support. Now i drag.
Use following code to drag multi mesh GLTF. It is Work for me.
var dragobjects =[];
//add following code in init function
var gltfobject = addGLTFObjectIntoScene();
scene.add(gltfobject);
dragControls = new THREE.DragControls(dragobjects, camera, renderer.domElement);
dragControls.addEventListener('dragstart', onDragStart, false);
dragControls.addEventListener('drag', onDrag , false);
dragControls.addEventListener('dragend', onDragEnd, false);
//end init function code
//add following function after or before init function
function drawBox(objectwidth,objectheight,objectdepth){
var geometry, material, box;
geometry = new THREE.BoxGeometry(objectwidth,objectheight,objectdepth);
material = new THREE.MeshBasicMaterial({color: 0xffff00, transparent: true, opacity: 0,depthTest:false});
box = new THREE.Mesh(geometry, material);
dragobjects.push(box);
box.position.set(0, 0, 0);
return box;
};
function addGLTFObjectIntoScene(){
group = new THREE.Group();
var loader = new THREE.GLTFLoader();
loader.load( 'W1230/W1230.gltf', ( gltf ) => {
mesh = gltf.scene;
mesh.scale.set( 30, 30, 30);
var gltfbox = new THREE.Box3().setFromObject( mesh );
var objectwidth = Math.floor(gltfbox.getSize().x);
var objectheight = Math.floor(gltfbox.getSize().y);
var objectdepth = Math.floor(gltfbox.getSize().z);
objectwidth = objectwidth + parseInt(2);
objectheight = objectheight + parseInt(2);
objectdepth = objectdepth + parseInt(1);
mesh.position.set(0, -objectheight/2, 0);
box = drawBox(objectwidth,objectheight,objectdepth);
group.add(box);
group.name = "quadrant";
console.log(mesh);
box.add( mesh);
});
return group;
};
I am building dynamically more paths in a canvas, and i want to add a tooltip with more details about the path shape. But it looks like the tolltip appears only when i hover the path points. I want it to appear also when i hover the filled area or the contour of it.
PolyLineSegment polySeg = new PolyLineSegment(new Point[] { new Point(triangleX - 8, triangleY - 20), new Point(triangleX + 8, triangleY - 20) }, true);
PathFigure pathFig = new PathFigure(new Point(triangleX, triangleY), new PathSegment[] { polySeg }, true);
PathGeometry pathGeo = new PathGeometry(new PathFigure[] { pathFig });
pathGeo.Transform = new RotateTransform(angleOfTheTriangleInGrades, triangleX, triangleY);
Path path = new Path();
path.Data = pathGeo;
path.Fill = Brushes.Yellow;
var sp = new StackPanel();
sp.Children.Add(new TextBlock
{
Text = "aaa"
});
sp.Children.Add(new Button
{
Height = 20,
Width = 100,
Content = "bbbaaa"
});
path.ToolTip = sp;
pathList.Add(path);
How do I restrict the drag operation not exceeding certain boundary. Is there any config in extjs (version 3), I saw that, Ext.dd.DragZone class is used. But Im not sure what is the usability. I saw a method dropNotAllowed. Is that the method, that has to be used? if so, how should I use that? Please provide some examples.
Im looking for something similar to (jquery UI's draggable containment property)
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.dd.DragZone-cfg-dropNotAllowed
I tried using the set X and Y constraints, but it did not work-out:
abc.prototype.initDrag = function(v) {
v.dragZoneobj = new Ext.dd.DragZone(v.getEl(), {
getDragData : function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10);
// sourceEl.setXConstraint( 0, 10 );
var t = e.getTarget();
var rowIndex = abc.grid.getView().findRowIndex(t);
var columnIndex = abc.grid.getView().findCellIndex(t);
if ((rowIndex !== false) && (columnIndex !== false)) {
if (sourceEl) {
abc.isDragged = true;
abc.scriptGrid.isDraggableForObject = false;
abc.scriptGrid.dragRowIndex = false;
d = sourceEl.cloneNode(true);
d.id = Ext.id();
d.textContent = sourceEl.innerHTML;
// d.setXConstraint( 0, 10 );
// d.setYConstraint( 0, 10 );
return {
ddel : d,
sourceEl : d,
sourceStore : v.store
}
}
}
},
getRepairXY : function() {
return this.dragData.repairXY;
},
});
}
Both are commented in the above code. The above code is initiated when the panel is rendered.
edit:
How these setX and setYcontraints have to be used?
By default, the element can be dragged any place on the screen. In the doc there are two methods setXConstraint( iLeft, iRight, iTickSize) and setYConstraint( iUp, iDown, iTickSize )
These two methods is used to set to limit the vertical travel and horizental travel of the element.