I have following code which is responsible to generate a text, But i don't understand how does CreateJs is encrypting this text
this.shape_12.graphics.f("#00ADEA").s().p("Ag1Q...");
where .p("") is responsible for the rendering of text "Nursing",
I am stucked here because i want to change this text to the "MyArticle". any help how can i do this.
(lib.text_1_5 = function (mode, startPosition, loop) {
this.initialize(mode, startPosition, loop, {});
// timeline functions:
this.frame_0 = function () {
this.link = "Nursing";
this.on("click", function (event) {
canvasStageRef.onItemClick();
});
}
// actions tween:
this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0));
// Layer 1//fontcolor
this.shape_10 = new cjs.Shape();
this.shape_10.graphics.f("#FF0000").s().p("AgsFJQgLAAgIgDQgIgDgFgGQgGgGgDgKQgCgJAAgMQAAgVAIgMQAIgNAPgCIAAAbQgEACgDAFQgEAEAAAKQAAALAGAGQAFAGALAAIALAAIAAgBQgFgEgEgHQgDgGAAgKQAAgLAFgLQAHgKAKgGQALgHAOAAQAPAAAMAGQAKAFAHAKQAGAKAAANQAAAKgEAHQgDAHgGAFIAAAAIAKAAIAAAagAgREHQgHAGAAALQAAAIADAGQAEAFAGADQAGACAGAAQAIAAAGgDQAGgCAFgGQADgFAAgIQAAgLgIgGQgGgGgOAAQgLAAgHAGgAg0DaIAAgbIA9AAQAIAAAFgFQAFgEABgJQgBgJgGgGQgHgGgLAAIg3AAIAAgbIBkAAIAAAbIgOAAIAAAAQAJAFADAIQAFAHAAALQAAAKgFAIQgFAIgJAFQgIAEgMAAgABABrIAAgbIAZAAIAAAbgAg0BrIAAgbIBkAAIAAAbgAgoA+QgIgFgDgKQgEgJgBgNQAAgXALgKQAJgMAQgBIAAAXQgIABgEAGQgFAGABAJQAAAJADAFQADAFAGAAQAEAAADgEIADgKIADgNIAFgQQADgIAEgFQAGgFALAAQALAAAIAFQAHAGADAHQAEAKAAALQAAAVgKALQgIALgQABIAAgYQAIgBAEgFQADgFAAgJQAAgIgDgFQgDgEgGgBQgEABgCADIgEALIgCAOQgCAIgDAJQgDAIgFAFQgFAGgNAAQgKAAgHgGgAAZgbIAAAAQABgOgHgIQgHgJgPAAIgxAAIAAgbIBkAAIAAAaIgRAAIAAABQAKAEAEAGQAFAGgBAJIAAAEIgBACgAg0hmIAAgbIALAAIAAAAQgGgFgEgHQgEgHgBgLQABgRAKgJQAJgJASAAIBCAAIAAAbIg+AAQgJAAgEAEQgGAEAAAJQABAJAGAGQAHAFAKAAIA5AAIAAAcgAg0jVIAAgcIBNgxIAIgFIAIgDIADgCIAAAAIgEAAIgKAAIgLAAIhHAAIAAgcICNAAIAAAdIhQAwIgJAEIgGAEIgDACIAAAAIAEAAIAHAAIALgBIBMAAIAAAdg");
this.shape_10.setTransform(-1.5, -9);
this.timeline.addTween(cjs.Tween.get({}).to({ state: [{ t: this.myText }] }).wait(1));
above code is responsible to render text Nursing(in .p("ahskjhsja");)... plz suggest which thing i will replace to make it text that is not render with path... it can change manually..
if this is possible with Text than how i can acheive plz help.. :(
This is not an encryption but path specification similar to path in SVG. You can define complex path by hand but when you need to draw a text data you should really try Text first.
Yes i got a solution with above answer .. and also giving exact right answer,, Thanks to #oleg and Lanny
this.shape= new cjs.Text("Cardic surgery", "bold 17px Arial", "#9aac5a");
this.shape.setTransform(25, -118, 1.0, 1.0, 90, 0, 0, -30, 1.0);
this.timeline.addTween(cjs.Tween.get({}).to({ state: [{ t: this.shape }] }).wait(1));
Related
I am using open layers 6 lib for map rendering and events.
my application needed same like this example http://viglino.github.io/ol-ext/examples/layer/map.geoimage.html i.e. Example have ol.source.GeoImage..
I have tried
I am displaying raster images on map using this sample code is
const url = imagurl;
const extent = [0, 0, imageData.width, imageData.height];
const projection = new Projection({
code: 'xkcd-image',
units: 'pixels',
extent,
});
const imageLayer = new ImageLayer({
source: new Static({
url,
projection,
imageExtent: extent,
}),
});
and i am using affine transformation lib and returns scaling, rotation and transformation..
its giving the values
scaling : 327.805670381418,327.805670381418
rotation : -0.1310210334156003
transformation : 7179251.8557908312,6022627.228704552
i need to add this code into ol-6 static image source
source: new ol.source.GeoImage(
{ image,
imageCenter: transformation,
imageScale: scaling,
imageRotate: rotation,
//projection: pixelProjectio
})
suggest or help on this.. thanks in advance.. and save my days..
I would like to remove Facilities in the layerlist, but still have it show up in the map.
var manned_facilities_back = new MapImageLayer({
url: "http://dotdevgisiis02:6080/arcgis/rest/services/DOT_MAP_PORTAL/Facilities/MapServer",
sublayers: [
{
id: 1,
popupTemplate: templateFT,
},
{
id: 0,
popupTemplate: templateMF,
},
]
I've attempted to add
listmode: hide
or
display: none
under where i have url, but it didn't work. I figure this should be really simple.
Setting the property Layer.listMode to "hide" should work as expected. In your example, make sure you use the correct casing:
var layer = new MapImageLayer({
url: "http://dotdevgisiis02:6080/arcgis/rest/services/DOT_MAP_PORTAL/Facilities/MapServer",
listMode: "hide"
});
Here's a live demo hiding one of the layers from the loaded WebScene:
https://codepen.io/arnofiva/pen/eb198c9b4050b892759ef433e8664fac
I have this code, which adds polyline primitive to scene.
function createPolyline(startPosition, endPosition) {
Cesium.SimplePolylineGeometry({
positions : [startPosition, endPosition]
});
var geometry = Cesium.SimplePolylineGeometry.createGeometry(polyline);
return scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : geometry,
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.SPRINGGREEN)
}
}),
appearance : new Cesium.PerInstanceColorAppearance()
}));
}
How do I set width of this polyline?
The recommended way to add a polyline is with the Entity API, like this
var greenLine = viewer.entities.add({
polyline : {
positions : [startPosition, endPosition],
width : 5,
material : Cesium.Color.SPRINGGREEN
}
});
But, if you want to skip the Entity layer and use the Primitive Graphics layer directly, you can do that too. Your sample code above has some issues. First, you're calling the Cesium.SimplePolylineGeometry constructor without the new keyword, and without saving the result, and this is not the correct use pattern for this kind of code. Second, the SimplePolylineGeometry class itself does not support line widths greater than what the WebGL implementation supports, which on Windows machines running ANGLE, is only 1 pixel wide. To get around this limitation, use the normal (non-simple) polylines, like this:
var polylines = scene.primitives.add(new Cesium.PolylineCollection());
var polyline = polylines.add({
positions : Cesium.PolylinePipeline.generateCartesianArc({
positions : [startPosition, endPosition]
}),
material : Cesium.Material.fromType('Color', {
color : Cesium.Color.SPRINGGREEN
}),
width: 5
});
SimplePolylineGeometry does not support line width. You need to use PolylineGeometry instead and pass the "width" options to the constructor. Also, you should be using PolylineColorAppearance as your appearance, not PerInstanceColorAppearance.
I am using fabrics JS for adding objects on canvas and then saving it in form of image. Now i want bring the image back to edit mode inside canvas.
You can get detailed idea about it at http://www.13thandmars.com/logo_studio/builder.html?project_id=17b36372c43c04044dd804454dfdf6e8
Add text will add an object to tshirt in above link.
You can save canvas as JSON and then can load it back from JSON
var myJson = JSON.stringify(canvas.toJSON(['left', 'top', 'lockMovementX', 'lockMovementY']));
canvas.loadFromJSON(myJson, function () {
//render the canvas
canvas.renderAll();
});
if i am not mistaken you say that the font property is missing?
if this is you problem please take a look ,
fabric DOES NOT convert all the object properties to Json when you convert the canvas with canvas.toJSON() , so when you are going to get back your canvas , the objects will not be complete (your custom properties will missing),
for example : myObj.material , myObj.size, myObj.clotheType etc.
you have to say to the prototype toObject function which properties you want to be converted also with canvas.toJSON(), in your code, the following is a snippet of my code:
fabric.Object.prototype.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
objectId: this.objectId,//my custom property
_controlsVisibility:this._getControlsVisibility(),//i want to keep controlsVisibility for my reasons
typeTable:this.typeTable,//my custom property
txtType:this.txtType, //my custom property
customOptions:this.customOptions//my custom object property
});
};
i hope that helps.
I was using kinetic-v4.0.0.js and my code run perfect. I now change to the new js since I cannot find the old one so as to download it, and I have many problems.
For example one of my problems is the applyfilter.
I have:
image.applyFilter({
filter: Kinetic.Filters.Grayscale,
callback: function() {
layer.draw();
}
});
and I get this:
Kinetic warning: Unable to apply filter. g is undefined
Does anyone know what would be the problem? Thanks in advance.
The syntax for applyFilter changed in KineticJS 4.1.0 (see the changelog)
Image.applyFilter() now takes in a required filter function, optional config object, and optional callback, rather than a config object that contained these three properties.
image.applyFilter(Kinetic.Filters.Grayscale, null, function() {
layer.draw();
});
You can also use the setFilter function:
image.setFilter(Kinetic.Filters.Grayscale);
layer.draw();
Or set the filter through the images filter property:
var image = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true,
filter: Kinetic.Filters.Grayscale,
filterRadius: 20
});