kineticjs

Why I cannot use Konva.Image() in Konva.Shape.fillPatternImage(imageObj)?

由 梦想与她 提交于 2021-02-18 18:11:04
问题 The following is an example from Konvajs library to load an image: var imageObj = new Image(); imageObj.onload = function() { var yoda = new Konva.Image({ x: 50, y: 50, image: imageObj, width: 106, height: 118 }); And here is my code var annotation = new Konva.Line({ points: this.contour, stroke: color, closed: true, strokeWidth: 1 }); var nativeImageObject = new Image(); nativeImageObject.onload = function() { var konvaImage = new Konva.Image({ image: nativeImageObject }); annotation

Why I cannot use Konva.Image() in Konva.Shape.fillPatternImage(imageObj)?

由 大憨熊 提交于 2021-02-18 18:04:09
问题 The following is an example from Konvajs library to load an image: var imageObj = new Image(); imageObj.onload = function() { var yoda = new Konva.Image({ x: 50, y: 50, image: imageObj, width: 106, height: 118 }); And here is my code var annotation = new Konva.Line({ points: this.contour, stroke: color, closed: true, strokeWidth: 1 }); var nativeImageObject = new Image(); nativeImageObject.onload = function() { var konvaImage = new Konva.Image({ image: nativeImageObject }); annotation

object property to dynamically change with the value of assigned variable

由 白昼怎懂夜的黑 提交于 2021-02-07 09:11:51
问题 This may turn out to be a very basic question as I am a newbie. I am creating an object from a constructor. I want one of the properties of object to be linked to a variable. So if variable value changes, the property's value should also change. Example: I am working on kineticjs and am creating an object from constructor Rect . I want the value of the property draggable to dynamically change to the value of optvar whenever optvar changes. Var optvar="true"; rect = new Kinetic.Rect({ x: 22, y

drag element on canvas

由 旧巷老猫 提交于 2020-12-30 03:14:23
问题 I draw an element onto a canvas as a string. I then want to be able to click the element (or tap on a mobile device) and drag it around. What I have now is: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <script src="jquery-1.11.0.js"></script> </head> <body> <canvas id="canvas1" width="662" height="983"> <script src="jquery-1.11.0.js"></script> </canvas> <script> var chosenChord=""; //this gets

drag element on canvas

由 99封情书 提交于 2020-12-30 03:14:03
问题 I draw an element onto a canvas as a string. I then want to be able to click the element (or tap on a mobile device) and drag it around. What I have now is: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <script src="jquery-1.11.0.js"></script> </head> <body> <canvas id="canvas1" width="662" height="983"> <script src="jquery-1.11.0.js"></script> </canvas> <script> var chosenChord=""; //this gets

drag element on canvas

由 空扰寡人 提交于 2020-12-30 03:12:03
问题 I draw an element onto a canvas as a string. I then want to be able to click the element (or tap on a mobile device) and drag it around. What I have now is: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <script src="jquery-1.11.0.js"></script> </head> <body> <canvas id="canvas1" width="662" height="983"> <script src="jquery-1.11.0.js"></script> </canvas> <script> var chosenChord=""; //this gets

How can I draw text that looks embossed using Kinetic JS and canvas?

由 偶尔善良 提交于 2020-06-29 09:41:46
问题 Update - Here is my final jsfiddle working version using Kinetic. I'm trying to show text with two different shadows to create an "embossed" look. I'm using this jsfiddle as a model of the result I'd like to get which uses CSS. Here is the jsfiddle of what I'm working on currently with Kinetic JS. var stage = new Kinetic.Stage({ container: 'stage-container', width: 400, height: 200 }); var layer = new Kinetic.Layer(); stage.add(layer); var darkShadow = new Kinetic.Text({ text: 'Hello', x: 140

Resizing the images while keeping proportion using kinetic js canvas

由 谁说我不能喝 提交于 2020-02-23 06:28:47
问题 I'm using this in my app: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/ have use anchors for resizing the image .. What I want is to resize the image and keep its ratio maintained. I don't want it to stretch I'm able to achieve that using this peace of code.:.. if(width) { image.setSize(width); } But this is screwing up the anchors .. Anyone ever tried something like this.. 回答1: I know this is a horribly old post but I needed to implement this

creating overlay and removing parts of it on canvas using kineticjs

由 牧云@^-^@ 提交于 2020-01-24 10:14:50
问题 In a canvas painting application I want to add feature to create overlay over the whole canvas and then when I make a particular rectangle on the canvas the overlay should get removed from that region ,exactly like one on https://onpaste.com/ (select focus tool) . What I have thought is that if a rectangle is made on the canvas , then I can crop the current image and then paste the image on the canvas again over the overlay at the place which was selected . I am not sure , how to crop the

KineticJs - When dynamically creating rect, the rect behind it drags by itself

由 て烟熏妆下的殇ゞ 提交于 2020-01-17 08:44:10
问题 In kineticjs I am creating dynamic rectangles that are draggable. However when I create a new rectangle, the rectangle behind it automatically drags. I dont want this to happen. You can see the behaviour in demo at http://jsfiddle.net/sandeepy02/8kGVD/12/ Step 1: Choose "create rectangle" and create rectangles. Step 2: Choose "Move rectangle" and move the rectangles. Step 3: Choose "create rectangle" and create rectangles. This causes the rectangles previously created to also move. This is
订阅 kineticjs