Надеюсь, я еще не опоздал с публикацией этого фрагмента кода, который я сделал. У меня была такая же проблема с вами, ребята, занимающиеся такой задачей. Прошло 3 дня с тех пор, как я пробовал так много обходных путей, чтобы имитировать возможности фреймворка Fabricjs при работе с изображениями и объектами. Я мог бы использовать Fabricjs, но кажется, что Kineticjs более быстрый/последовательный для работы с html5.
К счастью, у нас уже есть плагин/инструмент, который мы могли бы легко реализовать вместе с kineticjs, и это инструмент преобразования jQuery. АВТОРУ ЭТОГО СУПЕР СПАСИБО! Просто найдите это в Google и скачайте.
Я надеюсь, что приведенный ниже код, который я создал, поможет многим разработчикам, которые рвут на себе волосы, чтобы решить такого рода задачи.
$(функция() {
//Declare components STAGE, LAYER and TEXT
var _stage = null;
var _layer = null;
var simpleText = null;
_stage = new Kinetic.Stage({
container: 'canvas',
width: 640,
height: 480
});
_layer = new Kinetic.Layer();
simpleText = new Kinetic.Text({
x: 60,
y: 55,
text: 'Simple Text',
fontSize: 30,
fontFamily: 'Calbiri',
draggable: false,
name:'objectInCanvas',
id:'objectCanvas',
fill: 'green'
});
//ADD LAYER AND TEXT ON STAGE
_layer.add(simpleText);
_stage.add(_layer);
_stage.draw();
//Add onclick event listener to the Stage to remove and add transform tool to the object
_stage.on('click', function(evt) {
//Remove all objects' transform tool inside the stage
removeTransformToolSelection();
// get the shape that was clicked on
ishape = evt.targetNode;
//Add and show again the transform tool to the selected object and update the stage layer
$(ishape).transformTool('show');
ishape.getParent().moveToTop();
_layer.draw();
});
function removeTransformToolSelection(){
//Search all objects inside the stage or layer who has the name of "objectInCanvas" using jQuery iterator and hide the transform tool.
$.each(_stage.find('.objectInCanvas'), function( i, child ) {
$(child).transformTool('hide');
});
}
//Event listener/Callback when selecting image using file upload element
function handleFileSelect(evt) {
//Remove all objects' transform tool inside the stage
removeTransformToolSelection();
//Create image object for selected file
var imageObj = new Image();
imageObj.onload = function() {
var myImage = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
name:'objectInCanvas',
draggable:false,
id:'id_'
});
//Add to layer and add transform tool
_layer.add(myImage);
$(myImage).transformTool();
_layer.draw();
}
//Adding source to Image object.
var f = document.getElementById('files').files[0];
var name = f.name;
var url = window.URL;
var src = url.createObjectURL(f);
imageObj.src = src;
}
//Attach event listener to FILE element
document.getElementById('files').addEventListener('change', handleFileSelect, false);
});
person
Ryan Niño G. Dizon
schedule
06.02.2014