I want to let function B work without having set the instruction code to function A. In praktical terms, to show text on top of a rectangle.
In this question Button A is used for creating the 'paper' and a rectangle(which uses the Raphael library). Button B for adding text on top of the rectangle. The HTML code looks like this:
<button onClick="func.A()">Func A</button>
<button onClick="func.B()">Func B</button>
The JavaScript code looks like this:
var func = (function functie($) {
return {
A: function() {
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates rectangle
var bg = paper.rect(0, 0, 320, 200);
// Sets the fill attribute of the circle to red (#f00)
bg.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
bg.attr("stroke", "#fff");
},
B: function() {
var t = paper.text(40, 15, "");
t.attr('text',"new text here");
t.attr();
};
})();
The problem is that when the instruction code of function B (var t = paper.text(40, 15, ""); and so on), are placed in function B, that the text i try to add won't be added to the rectangle.
If the instruction code of function B are placed in function A, then it will work, but this is not what i want. I want to let function B work without having set the instruction code to function A.
I hope this problem is clear enough to understand.
When you declare "var paper" in function A, that variable is local to function A. If you want to share state information between function calls, you have to store the state information in properties of your object, rather than local variables:
var func = (function functie($) {
return {
paper: null,
A: function() {
// Creates canvas 320 × 200 at 10, 50
this.paper = Raphael(10, 50, 320, 200);
// Creates rectangle
var bg = paper.rect(0, 0, 320, 200);
// Sets the fill attribute of the circle to red (#f00)
bg.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
bg.attr("stroke", "#fff");
},
B: function() {
var t = this.paper.text(40, 15, "");
t.attr('text',"new text here");
t.attr();
};
})();
Related
I am trying to build a plugin for XD to automate the creation of design elements. I have written a function to build the button (first picture below) using a text element and a rectangle. The only problem with this is that shape of the rectangle is not based on the width of the text, so when the text is longer you end up with the text overlapping the rectangle (see second picture below).
I have been trying to figure out how to get the width value of the text element so that I can size the rectangle appropriately. Can anyone help me with this?
I have figured out that by adding the line console.log (selection.items); I can output a full list of properties to the log, but how do I access the width property?
Here is the log output showing the rectangle and text elements...
[ Text ('Submit Button') {
width: 113, height: 20
global X,Y: -3, -74
parent: Artboard ('iPad – 1')
fill: ff000000
},
Rectangle ('Rectangle 6') {
width: 100, height: 50
global X,Y: -3, -58
parent: Artboard ('iPad – 1')
stroke: ff2d3494
} ]
and here is my full code...
const {Rectangle, Color, Text, Selection} = require("scenegraph");
let commands = require("commands");
function createButton(selection) {
// Create the outline of the button
const newButtonOutline = new Rectangle();
newButtonOutline.width = 100;
newButtonOutline.height = 50;
newButtonOutline.stroke = new Color("#2D3494");
newButtonOutline.strokeWidth = 2;
newButtonOutline.cornerRadii = {
topLeft: 10,
topRight: 10,
bottomRight: 10,
bottomLeft: 10
};
// Create the text for the button
const newButtonLabel = new Text();
newButtonLabel.text = "Submit Button";
newButtonLabel.fontSize = 18;
newButtonLabel.fill = new Color("#000000");
// Add the text and outline to the artboard
selection.insertionParent.addChild(newButtonOutline);
newButtonOutline.moveInParentCoordinates(100, 100);
selection.insertionParent.addChild(newButtonLabel);
newButtonLabel.moveInParentCoordinates(100, 100);
selection.items = [newButtonLabel, newButtonOutline];
console.log (selection.items);
//align the button elements and group together
commands.alignHorizontalCenter();
commands.alignVerticalCenter();
commands.group();
}
I hope someone can help!
So it turns out to get the width of a text node you need to get it from the localBounds, something like...
textNode.localBounds.width
or to get the width of a graphic node it is just...
graphicNode.width
I am taking a beginner class in coding and need help with an issue I'm coming across in a project that I am making...
function start() {
//Creates the jester image, describing text and the selectable key for them
var rect = new Rectangle(200, 120);
rect.setPosition(0, 0);
rect.setColor(Color.grey);
add(rect);
var jester = new WebImage("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxITEhMTExIVFhUXFhUWFRcXFRUWFRcVFxUXFhUVFRUYHSggGBolHRUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGxAQGy0lICUtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAOEA4QMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAEBQMGAAIHAQj/xAA7EAABAwIFAgQDBgUDBQEAAAABAAIDBBEFEiExQQZREyJhcTKBkQcUobHB8BUjM0LRUnLhNGKCkvEW/8QAGQEAAwEBAQAAAAAAAAAAAAAAAQIDBAAF/8QALhEAAgICAgEEAQIEBwAAAAAAAAECEQMhEjFBBBMiUTIUcWHB8PEFM0KBgpGh/9oADAMBAAIRAxEAPwCtPh8hyygttsdx7JEDp6Jq+gksfKSO6GNDxyVjk5S2kbZY5z3FdEdNhocQ5MazDZJA0NAIuAdbEC++qhoqV0Y0d+/ZG0GJSOk8MgWALr86KWSeJrlJNNEJwS/KNHtSP5wBBABaBxoEp6jqhl/3Pv8ARN3Yk6xDrPFzuBoOwO91VeoHNc9mQ6AatO7SfzHqs2DFHmnF9fZFr6IPCs0uCv2E4Xaki8KZhjDM8mYhuWY6n33VChqdQyysFQAxjIx/uctOd1Gn5BGVB9DWQwtc57RI8E2J+H3CQYvi8tQbuPlHwtGw9lFXSF5yjYI+jom5NVNfCPJhllbXHwKaGHMdduUbPr5W7BGRQt2A05W1QwNFmjU7BGMk5cmTvwKS539Ng1KybCmwgOkddx1I7KxYXhwiBe7V52CArMPMjyXa8rvf5PX4/f2O6WgfCntdsLBZiWI28jUPWTFnkYLLbDqdpN3HVNDEpPk+jrS2JchzXIJXR+nOmWFrHyOBuNgks9LGNdErnxKSJ38uQj0vcfRWyJyWhJNyOlVNE9g/ljy8BVKWV0chI0dylzer6kmO7hZp1tyt8cxAktl0N+yz44TjJ8lpnQi6ZmIVT3nzuJTDDoY5IwLWcFWxXNcdVdMKgicxpj35XZ5cIgfQhnc+nfmY26KpusmFrhK2xCZVlJvci4Gy5zWxkyOsNb7BLjxxy/kv9wobz1fjOuD5SU2dgFrFpuCLlIsJwmQkEA3Ow/yui0mB1AiBdYm2ybO5YkvbGkqKVVtLHhgdur3hVM8QtIte3CQV+BZzc/Ep6LF307DC5pJ4Kg5+9BU9rsEpWPM8q9Vd/js3ZeqXsz/pkx9DhMrRZrtDuCltXSFrjmZf1CuRrWAaoGethPIXvyhrR7m10c8rKsMectyPUW1UlBU5s7rWsLX91bKunpyCS0H6JdQdPRlzhm8jjew39rrFl9NNqo+TJkc/D0VmV5Ogufl33SOdnncSuo4rSwQssxrQ7g8291UsXw0OHiN3/uHf1Tw9K4K0zO4PsAwLDLnO7YaqHF67zkj2CbGoyQG25VUqXXKil7mT+CJ0GUswdommctFr3SeggyDO75K69G9PuqD4jh5Cfw7I5Kbrwgxg5OkV+GdwcGgXTx0rI25nWzWXSoOi6cgeTUDfn5pdjH2fxusWkgjUdj7rNkjz/Y0fpmuns5vFVOc4uJ9k0hmYBdxVrouh2HR++u22+n4ILqPoA2/lHtzz6+n+U6xLvwTl6aRz/FCDJpshXREEHZPKbpqUPs4ah1u50uLj0uFmJ4NNnEbIySQTsfxP73WmLSVCvDJeBLitbdgAVddKe6udR0zMBbKSdeFU5MPkzEZDpvoVaDQFFrwMMNonyg5Rew1R1BRl14zp+iJ6SqmwvDnGzTo7t6XV4GBtkJlitY9lkzZpQbpE+VMo9Lg5ik1AeDsU+jpH0w8cts08D/CzGwYGkvHp6JMMQmkZkL3OaeN1ljzyPlP+4W9USwzCoqAXuLQTrY204VibgcMebILk890lw7CvMzNyQAr3WfdoQ0OcBpyqeodUkdJOKVnNamCqhkzC4ANxpfRW2brNrImBhDnka9vmpK/HKduzfE9FzLF35pXODcoJ0HZNhby/muheVl2rOovEIcLNPug/FzkuOpKpjZHDkpjSYllABPur+zGN8UdRY8/osS7+JM7rFlqX0DgxpiOLON7FLGyPe0nMfZBVzyDvotKSctNx9Fv9xyZ6KzuUkkMI3TDkkdla8OikMd28hUyHE3Zrlqs2EYu5pJbqOytGW6TG5RbaYBJE5krxIXXI0vf805ip7RZiL6JNiHUkheQ6NtweRwiIupM7S1zbC3GoSxzxhaZNOF6YFVU4eLbDhJ5sHc1192p+2qZa9iR6KXxHOb5IXEHnYfioRXfFGnLjwNadMT4RRePM1lrtuARrY3042XbsCoY4GNjaNAFSegMNAe+QtLToMpH4gq6VlS6P+y541UZOtE8GOl/Edme2xWPqr7qtsqXHzE/T9QjI5SVF5fCNSw/YdIQNkS6QGyAY08oqMroNoMooGfQMJzWF/wBhSupWC5DRcjsppChpHFc5Uco2ZFQNd/aFIcBh1/lt130C8hqLC10TFUg8robEmpeCsdQdEQyRPbG0NcdQbaD5BculqKjD5DHmdl1ygn13twu7VVYO65b9q+HZjHK0EuJsLDygep7lXi1L4PoyZ8Vx5VsX4HN9/wDEbM7QW8vdMR06YI5JWAHTyt5UPTeI0lHT2msJb3PcqSfrFs8crabKZBcNa42cfUA7rLOORzcYrX/hkqTdFdpauQuDzoQduARxZE4hUGUl70pbLJFGHzjK5xOh0NxvoklTjL3Ehuy0wxycuuibjJvYXXYgQbBKp5y43Kjs7chM6HC84uVpUFEFULAUTHFdNZ8I00QD4XM3XN/R1keRYvcyxLsPIdV2FSW21Sz7rK0fCV095jPIQFbLC1pJsr+xFLTNXtruyiRDTVEx13hvuNuVNVVTHk5QlFUdSsaVT0yD+L0wutq87i5ZE+zT3KDh1spKuWwsF07kwN3s2kqsgGX4iVYcK6ie1oEoBGwI0KqkDf7nLaSXMbKkW4v4jRm4nU6GoLhnjLh6hPqOtfKAJNbaAj9VH0bRtjo4WW8xbd3e57oqegs4OZprqOCE+WanGmehi7TDIKflFxABRtNhuFFJJY/srzXo2r5BzpAtmPQMcm/7stxU23XKR1Bkjio860E9xZQveL6cIS+zoolkjuhKrM3Y6fmiGOvsV4/6+qCGB4nF1rjX30QPW0DnUxLRq3Xba3P7smlEC12ij6una2llLxcZSNNP1C1YY+TJmlWj55xKpe95zG52QQBBDmkgjUEaEHuCmtRGDcjb990ulbZbUzyW22F431DPUtjbMWnJs4Czjx5ipsGga7WyRvCsPTk7GjzIy0tHTbocjD2kbIunpso0QkuLxtG6YUEweLhQkyNsGqZQwXKrtVV53EDZWDHW2jKrVHRu+JGO1Y0TTwisRWUrEPmE9NY+/wARt7qCaQnck/NRk6L06pRrJqU2CFqHIhhsELLuhFbs4mhNlFIblbPdoh73TxXk4kLrhSUrLlRlqIp26gevsi/o47n0bEfukZJJOXc3BsODdETTWK1wVwbSRNbwwDU3vp3Smtqi2+oCnn8I9P02xvG48KOrkIF/8pHBjJ2Fye/ZTffM2od5vqs3tto1KSTJ5qknUb7X47qCDF+Hanb1v6o6OLM03HCrEhIedSPN9dfX2SPGyqmmWwVeg9P3ZSxyki+yVYbETY6kaaf5TioYWtuLBHg2K5JaJItlKHj9lJxW27FTMrQdAfkl0GmPqRoPCF6oawUk2cX8h3Bd+AReDbJV9ocmWnsHEZjbS+ttdSBot+GPxs871E6bOPwUjXKGvwpvCZeCGm4W0sWbYITk10eVy2Vj7gENPSEcK1RYW8nRqPZgjnDUBTWau2G2zncjExwnF3xabhWWXo0udfNYIiLoxg3f+KpPPjapjgFZiDJY291NFTjKE4p+mqdu7gmcdDTj+4KUfUQWheLKr9zCxW77vT9wsR/UxO4yOTMOi3hPCIqaXK4jjceyEi0dZUTUlaHCJNkJLoi6g2shJTqugcauetWOWrisAV0gomjdco6ikaHjMLhBxNsF606qb2FI7109LG6mjy7W7/goMRpQ69gqr0DjQLDEXC4Gg/PL6K/4bGHjj8fzTSVmrFKlZScSoJYqeeVumRrnbX2F7hc+jq5DI8OmmuPgIf5b3HmcDpltc6ei+j4aVmUtIBBBBFrgg7hVyn+zyg8Yv8Jzv+wv8g9LdvdUhFRR025FU6CqK2Yvjyl7QB/M1sCQCNTvoT9FYq/o2ZzgQRfkbD6K61VTFSREtjytaNA0C3t2CqtJ15FI97czA5pAc0td5bi41vr9EmTGmVxZJLpBsWH/AHeO5b729Fy/qfrOUzlrXsia0GxdnLTa9xlYDcki2y7Zg2LQVcflLSD2III7t7hUrq77K45ZPFhe1l/ia4EsJuSDptqSnhBJE5zd70ys9H9TPqLxzMF8oLSNzrYjLa97/mrPDRnNtZF9JdANpneLJIHvsWiws1oJubcnYKwPowDeyhlwpuy2PM0qIMMiLfZRdZ0pfTuI415TSEiyYOpg6Ig8q2OHxoy5ZcmfP8uJxA7XKlhxtltGH6Kx490/FFK4kAAm6UyVFPH2XmTXGTTMoGMVmPwxL0PqndmrH9QR65QEI/F3u2XLFJ+DroIkimHxSqB8lhrKfqg5qhzuUFPATqqr078g5BM9Ywf3E/MqGjxCN7rE/ik9XMGmyHYL6hVXpohvRcssfdeqp+I7/UV4u/ToXY8rYs4FgA4dtiP0KQVIyvTGGuIIDtR35UmJUokFx8Q/FSxvg6l0OKpJLoZxWxaRoVq0arUlRx5INFJE1eyt2WF1gmvQT2aTgLGDReUsJeU1bSNA1UpSUdAJuinltXGdbE2NvXuu1Q1QYbOHsT/wud/Z5SMfUtsPhBK6LiEObT6Hsrx+UbLY3RKMZ1A0A+g+fZNKGtbY6/8AkFR6+PMHN4y5R9RqfofqqnimP1lG2zXZm7N0+Edr/r29To0WrKy6Ou9VSsmo5o3H4mHXsdwfe4Xz9FW+G9wMZaSfMBc5hYjcknndFf8A7StmIGcZbeYZRb97oatxGVpbowk3v5BfYXs7cXNzp3VNNCpNdHaPsghDYCS4keVrAQLtaBzYDX37K/VRBC4JgXXD6SMOfGAzs0+ZzrgZWg+mv1V5wzr4VDbwwyO73s23+71Q1QZJ8i2yVOX+75FauqmuFwdVW3tkldnebeg0ATGkpDyoq2NKkMKNxcfTlWO3lSWliA2TgP0V4qkQk7ZQ/tHw8vgcW/ENQvnyre4khxK+pcchzxvHoV894vhQ8Z47EqeRJbIz07EFMTsE9oqckJNLSuY70TI4iGtsCpMRh80TWC90PNVDLokEtc9x30W9NWa2XOLO4s0rm5tVDCbJmGhyXVURadUYvwNH6JM6xCXXqeg0FvN1NBOQFKzBpOSAFt9xtoDdY3OD1YxDVtDhcboKEa6qw0dGOUFjOHEeZqGPKr4nLsU1T9dF6xo5QhNjcr1jiVr46C9saQ1QGjVHJKXutdaQRoqnisfVRpJ2GKXk6F9lcYEkh5DQr/VDdUH7MQ4PluNLBX2dy04/xQ9p7QmqISb8eqT4lh/iAtcO9v8ACs+W/C1liA3QcbKKVHI6CKGiqiKmN3gvsGkW8up8x7gX2V2kwWhcWSiRhiNyHZgRbQ/kmWJ0lPOwslaCL7kfjqkdB0jTRPzRyOA7Xbf2zbqkXQ8cnHwbvwuKtmEcDR92huXv2dI86C3+kDX3udtFbKGiZEBGwAW0sBotqKRjGCOMADm3+UVSx3209UktncrdsKpYkzhYoIYrWRjAniqIydkzAjs2iEavZX6JxAaode47rjPWVKY6gm2hK7FG65VF+1Oi/kmQDVuqSceSEmrRzmujDmqpVBs4glMBjZIy2SmpuXXIUIp3snFE1rhRRMIKNoWA7qealtqmsayCB5BBR8oElghowi7BnmU5JXoVtm/8LCxZ/FWrEnyF+QRNVN5comVrLoGPC5HORL8Cdw4FTXplRq9uX0eVOJ2+FCSYs5wsU6hw+F0YDhZ2xSSfC3CUMZ5r7KscEUroeXp5RSl4FtS25XjGpxi2EGJuYm3p3SqIq20hZQph0JAsrRhtDGWg3uVRKmfgJ30u6Qn4tFN46Vk8r1SOq9HMA8TS2gT+So1sqb0/V5X2vuPxT+WVVxv4nYtxGTH32CFmfqV7BUf8ryZ1+E5ZADhc7KWGgGmimZEjYmaboDWZBSgaJtTN2sooIxZFxMTCthURUzEM0olosmFJQbIWqqwGnutp5bBVgYj4rzbYFBsFFioe6S9ewZqd4tfROaI6BCdT38F1uxXXoEuj58o8KGY3HK2raJqdRG7nX7lKsRpnufZqyPIZrFQbkPomEbw4Jk3Cxk826Fjw8i9kqyJnchW/dRV8pIspZpAH2KimZcgBFP5DJizI5Ymv3B/ZeqvuIbkMZMTA2CElxZ4WwprkhwyngEIiWia1zGZg4ncDj3UIwSV7/wCzSotq7B6aTNr4lj2KcYLUCNxc8ZiPhslkLacAtNr3tdERsDLOY8X47KkZJGuGK4XyX7Wb4vVeJI0SNs2+y3xDCIizQBptcFZVSscz4S6Tmw0BSipny28Qk24B47KzaslJJCB8Li4gAmxtorb09SFjblMMKrKRseYMN/ZKsSxsF3kblCE1yVJmTJCLWmWmifZwKsrXggHuuVRYy5X7pepMkIJ1KTGmtMXDa0PmyLZrrlQWPZbRvsqmgZxBTw/VBQzg+63jnROHET1OJUqjm7oymeuFGMJsiBcoaB1yjGNTAZUvtDxZ1PT3G7jl+qrXSNaTZXP7Q8J8ehlAGrRmHuNVzvomX4dEr7OTOt4ebtUWORExO9ivcKdomU8Yc0j0TIDPm2orPDne13+orZuJgPCddc9Ml1Q8tFuUooenDbzb9152WMOT2Z2kPJJmuZe4SZ9YLEBDYhE+IFt9EpY13CXFi1dnRhasiqonZsya4a1pIvut2YbI5t7LXCcPdnN9LKspKSO8DnKF6p/ui9WbQhXqTFieddtbE/IryCON0rSH5LXPm/K6ruHy5Xg2uL2smlfTODS/gOAHex2W3hxdG+DbjfYvebOIOmpTOigJIcTYD8V4yUOiDsoc5h81xrbgqCUvcBvb0XN7FXxdlrwrFQ1usBJ7jYpecJFU977GOx+H9VPg+KZIgwgabIerqnmQPBtfQ2VFuNlpPkrZFXYUYmeV1xyDukjmJ3WVznDKTdQxQW1IUudMxTlG9CdzbLofQFRmjLbbHdc5xOXXRWvoHGsrvDOxVo3Vhh2dMEOhUD6c7oqnl0W0gTMuKJJcu60GLtbuVLiDBYqs1UXmHuluhizRYqHEW23VgoKnMAb6FUOWK2XsrngkgLWi3CKYGWGnPZNadqV0xAsm0LwnQjCJYg5pB2IXJDRCmrJIx8JOYfNddY5UTrWlDJ45eHeU+/C6XQF2N8MfoE5ieSkGFuFgn8KVMajn3XbskmYcqrQVwN107rPBvFhcRuAuEVT3skLW691iz4m52jPOLcixmmErtUrxnD8mrEqjxWVj7HurO8Zo82a6yv3cXZ1SjoVdPVry7K4WVxoqFhN7Kixz5Zb8XVmgxxoIF02Tld1onNNFk/h7V6gP4u3usQ9xCWcho8NkvcaEKyHDSYMsjtXOHPZF4lh7i7My4G9u6W/d3vc65PpfYey9PKtnqY1xTsc4Z021l9bgixHcFFz9Pt8MZNx+IReCizAXnX31TGomaWkAfNHihYp9FSbg5HGijrcNDWktJvz6JqZCy9nfVCx1wvfKddDYaFd0M00ioNzNd3W9bXTWt4ZHyTesjY6WzGWvufVFmPMwtJBI+qFIj7KKUIi74inHTkbWytseUqq2FryERhcLi9rhfQo0xEjtdPGbDVFg6ILCb+G32CYBiNlUhVWC6RzMGcX7qz1cQsqtjMhYC4cJGxqJ64hoJ7Inp7G8wsPZUatxySQEJz0BJYlrjzcJqoW7Z1ijnuPonFK5JMPYCE3p7jThMmcM2Klfai9zYY3jZrwT7K6MBSLrjDXTUkjW7gX27IvoVoR9MY5HI0cFXKlcDsuIYRW+DZx43Cv2F9cQkAXssuDN7l2qoKdnQHwhzS08rjfXfSwgl8Rmzybj3V4f1tCObqu9S4w2ptlGgWiVNAS2Ub+CZhcjVSw4S/a5snUbuFM1Qd+UV4xZX5MCBVex6iMThZdJjaOypvXUdhdFOwSgqK5/EH/6liU5ysR9qP0Z/bR1jDXsyapfJlDybC3CFoqi3K0qZsxsArZJqjY3x2HMrBfdbST3FglBaBug6nFmRGxKzrM5S40T91tjSeXw9XeZvI5Q8uNRtsGMIF9e1kjm6iDgQBdaUcpcdRYFPNuKOeWlrssWKwMDBLG7fUf8pFRzuJJ5Rc8Bta+nuvPBYGjXVJ73OqRP3G2gCqo87r2TTDbNA0sVHnA2Xkb7kaqwx1jAHtfG0gcJu6BC9LQtEDLdk3kai4nJiSppSqn1NS/y3WV6laqz1ZARGSdrJVELkcsaEbg85bILJTJIbn3XtLXZXA9ihTBZ3HAKh5aL/NWimeqH0dXmVjSBur1RtOl0yTGtDGN91NIy7SLcLSIhEsIKdIRs4ji1C1s0gt/cdFFBSM4arF1dRiKpdzm83tdLIbbrFJtSaLxSqwZlO0HUI11MNwVkr220WobpumcqDVmphsURE0c7qH4Rflb07bm6L62Bd6Jo27+ipvXzvIr3DGMrj+7ql9ZQBzR8kU0LJaOcZlib/cQsVuaJcWNaWCQAZyVYcLp2uIBUGITsY4xkjMNCiKIi4I4Rit2jaoqqHc3TUT23sub9XYM2K5b3XS2YlpZc+65hcTmB05Co0RyRVFMj3TqneS3y7rXp/AZKhwNiI+Xd/ZXJmBxsADRZSnTIRi2VWOnlO1ym1FTtDf5jTdO4aYN0Aui4qTO5rA3U6f8A1TbSRRLiViSnafhzD32WR4a7e66dimDxNpbNbqzzbak7FU9zW91PBnjlVxAqlsb4B1YIWtjkBFha/CfxdY07iWh7b2v6KjviaR3ULsObceX8Fo5A4lwxPrOBg1JJO1tVX+pOqWzxZGNNyNT2S91A3gXWfcrkNA39F1gcWVeSldZDS0bldHYU69st7eiJiwTNu0D3Qs7jYD9m2MPjlMT3ANO1/wAguv8A33Vttj9VyWbpu5u0ua8G4sOUynGIkxuDmeTQi583v2TWdR2Gkq2nnVGNmAXLqXGq0Mt4TM22bPoPwujJqyre1o8Vjb6ENab/APsUeaR3FhXXTo5JW2NyG2Njtqq7FC47A6eibMp/DFiY3O5JP691HNmaAW2ab6WN1CSUnZSOkBwUrnEho19dERJh0jdfLb3uVtlc73vqbjnvYrapgc22Y6+/HyUuagU4tghaefyRMDbt0Gv4LeNrCQHH5gHRFU0DQdD9Ujk5qkFLi9mkkRbGLjUn5WVL6s+IDhdAxK3ht91zzqR95beiORuMCGZ6YgyBYjfu69WT3GY+TFeN/F/5K2YN/TCxYvZl4PUx9hTOVUepNysWKngGTosvT/8AQZ7IibhYsWYRdHlP8Y9wm1J/1Y9j+SxYvP8AWfl/xkTn/IsVX/QPzVC7rFih/hX+r9o/zFxdM1CIh5WLF7DKI1bt8167dYsXAGFJsVLUfCPcLFiXyMa0u5+aLi591ixEB4PhP+4KcbfL9FixcBA5/pj2P5qKbZYsS+RjMJ3d7FFu2WLFhz/5kf3L4/xYPBz8/wAkyg+EfvhYsVMXQnhEtZ/Sb8/zXNeo/wDqT7BYsVc3TM8/xI1ixYvNMh//2Q==");
jester.setSize(200, 120);
jester.setPosition(0, 0);
add(jester);
var txt = new Text("Describing text!", "15pt Arial");
txt.setPosition(230, 30);
txt.setColor(Color.blue);
add(txt);
//Creates the king image, describing text and the selectable key for them
var rect = new Rectangle(200, 120);
rect.setPosition(0, 120);
rect.setColor(Color.green);
add(rect);
var king = new WebImage("data:image/jpeg;base64,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");
king.setSize(200, 120);
king.setPosition(0, 120);
add(king);
var txt = new Text("Describing text!", "15pt Arial");
txt.setPosition(230, 140);
txt.setColor(Color.blue);
add(txt);
keyDownMethod(jesterSelect);
keyDownMethod(kingSelect);
}
function jesterSelect(e) {
if(e.keyCode == Keyboard.letter('J')){
removeAll();
var circle = new Circle(50);
circle.setPosition(100, 200);
circle.setColor(Color.blue);
add(circle);
}
}
function kingSelect(e) {
if(e.keyCode == Keyboard.letter('N')){
removeAll();
var circle = new Circle(50);
circle.setPosition(100, 200);
circle.setColor(Color.red);
add(circle);
}
}
Right now I have images displayed of a jester and a king and depending on what button you press you are directed to new "slide". As of now, the program only responds when I press the "k" key and doesn't respond and create the blue circle when I press the "j" key. I've determined that whatever is put last in the start function determines what actually works, but I want the user to be able to press any of the interactive keys and be displayed with a different outcome. I would appreciate any help since I've been stuck on this for a while now, thank you!
You need to capture the keydown event.
Add this to your init code:
window.addEventListener("keydown", keyHandler);
and modify this block for all of your key events:
function KeyHandler(e)
{
switch (e.keyCode)
{
case 32: // space
{
// dostuff
break;
}
case 37: // left arrow
{
// dostuff
break;
}
}
}
I don't know why, but the clearRect() does not work.
This is a function that is executed every time I click on a panel or every time I change the thickness' value.
//When click on a menu section
$(".menuSection").click(function() {
//Show hide the selected item
$(this).next().toggle();
//hide all the other panels
$(this).next().siblings(".panel").hide();
//To update the values in the colors panel when selected
if ( $(this).prop("id") == "colors" ) {
changeColorBySliders();
}
if ( $(this).prop("id") == "pen" ) {
updatePreview();
}
});
//when thickness slider change:
$("#penPanel input[type=range]").on("input", updatePreview);
The fact is that it draws the line, but if I click it again it's doesn't reset.
var $preview = $("#preview");
var contextPreview = $preview[0].getContext("2d");
//Function to update the pen's preview
function updatePreview() {
console.log($("#thickness").val());
var rgba = $("#mainCanvas").css("background-color");
$("#preview").css("background-color", rgba);
//Resetting the preview
contextPreview.clearRect(0, 0, $preview.width, $preview.height);
//Drawing an example path
contextPreview.beginPath();
contextPreview.moveTo(50, 30);
contextPreview.lineTo(100, 110);
contextPreview.quadraticCurveTo(115, 120, 125, 80);
contextPreview.bezierCurveTo(145, -40, 150, 120, 200, 95);
contextPreview.lineTo(250, 65);
contextPreview.lineWidth = $("#thickness").val();
contextPreview.strokeStyle = color;
contextPreview.stroke();
contextPreview.closePath();
}
Any help?
Solution
I solved the problem using this kind of declaration:
var preview = document.getElementById("preview");
var contextPreview = preview.getContext("2d");
contextPreview.clearRect(0, 0, preview.width, preview.height);
Insted of the jquery one:
var $preview = $("#preview");
var contextPreview = $preview[0].getContext("2d");
Why?
it's because $preview is a jQuery object, $preview.width is therefore a function, so when you called clearRect(), you were actually calling contextPreview.clearRect(0,0, function, function) so your rect dimensions were undefined or 0 so it wasn't clearing a single pixel.
So you can still use jQuery but be sure you call contextPreview.clearRect(0,0, $preview[0].width, $preview[0].height)
var preview = document.getElementById("preview");
var contextPreview = preview.getContext("2d");
contextPreview.clearRect(0,0, $preview[0].width, $preview[0].height)
Special Thanks to Kaiido.
I'm trying to put an image inside a circle but no success. This is my code:
//Elms.raphael() is my stage.
var circle = Elms.raphael().circle( 730, 200, 0 );
circle.attr( { fill : 'url(myImg.jpg)' } );
setTimeout( function()
{
circle.animate( { 'stroke' : '#000', r : 90, 'stroke-width' : '5' }, 300 );
}, 250 );
Instead of put the image in the circle It get colored with black ("#333"). I also tried to make an image-object but still doesn't work.
A little help please?
Another way to do, if you have separate image and want to bring it over you circle object.
This makes the whole image appear with smaller size that fits you circle. DEMO
var r = new Raphael(10,10, 500, 500);
var c = r.circle(200, 200, 80).attr({stroke: 'red', "stroke-width" : 3});
var img = r.image("http://www.eatyourcareer.com/wp-content/uploads/2012/06/ok-256x2561.png", 100, 105, 200, 200);
Here's a link to how I created a circle with an image in it:
jsfiddle
var paper = Raphael(document.getElementById("test"), 320, 200);
var circle = paper.circle(100, 100, 50);
circle.attr({
fill: 'url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-220px-SIPI_Jelly_Beans_4.1.07.tiff.jpg)'
});
I left the animate out entirely to keep it as basic as I could. It seems to work fine and is very similar to your code. If you cannot see it in the example it may be a browser issue.
I'm highlighting lines of HTML code in CodeMirror and I want to add an anchor that scroll CodeMirror editor to a given line.
I can scroll to a line X via setCursor method. But I would like to have the line X in the middle of CodeMirror window. Can I do that? I studied the API and demos but with no luck.
Thanks!
This one should work:
var editor = CodeMirror.fromTextArea(...);
function jumpToLine(i) {
var t = editor.charCoords({line: i, ch: 0}, "local").top;
var middleHeight = editor.getScrollerElement().offsetHeight / 2;
editor.scrollTo(null, t - middleHeight - 5);
}
It is very simple.
Init:
var editor = CodeMirror.fromTextArea(...);
If you want current position to set it later, you can use
editor.getScrollInfo();
It returns an JavaScript object:
{
"left": 0,
"top": 0,
"height": 500,
"width": 500,
"clientHeight": 300,
"clientWidth": 200
}
now you can set set editor scroll position using:
editor.scrollTo(left,top);
You want https://codemirror.net/doc/manual.html#scrollIntoView
Notice the optional margin parameter which should do what you want:
cm.scrollIntoView(what: {line, ch}|{left, top, right, bottom}|{from, to}|null, ?margin: number)
Your code would be something like:
cm.scrollIntoView({line:50, char:5}, 200)
Initialization:
var editor = CodeMirror.fromTextArea(...);
Function to show a line in the middle of editor:
function jumpToLine(i) {
// editor.getLineHandle does not help as it does not return the reference of line.
editor.setCursor(i);
window.setTimeout(function() {
editor.setLineClass(i, null, "center-me");
var line = $('.CodeMirror-lines .center-me');
var h = line.parent();
$('.CodeMirror-scroll').scrollTop(0).scrollTop(line.offset().top - $('.CodeMirror-scroll').offset().top - Math.round($('.CodeMirror-scroll').height()/2));
}, 200);
}