Hey @eproasim,
After some few hours trying to figure out how it works (I’m pretty much new to playcanvas so somethings can be a headache) I actually managed to do it, however the knob moves in a rectangular way rather than respecting the circular boundary (extreme diagonal movements go off the circle)
Here’s how I’m currently doing it:
var DragscriptNew = pc.createScript('dragscriptNew');
DragscriptNew.attributes.add('handle', {
type: 'entity',
title: 'handle',
});
DragscriptNew.attributes.add('bg', {
type: 'entity',
title: 'handle background'
});
// initialize code called once per entity
DragscriptNew.prototype.postInitialize = function() {
var app = this.app;
var self = this;
var hnd = this.handle;
var localBg = this.bg;
var localBgPos = this.bg.getLocalPosition().clone();
var originalPosition = hnd.getLocalPosition().clone();
this.handleDragHelper = new pc.ElementDragHelper(this.handle.element);
self.handleDragHelper.on('drag:move', function(pos){
console.log(hnd.getLocalPosition());
self.handleDragHelper._deltaHandlePosition.y = pc.math.clamp(self.handleDragHelper._deltaHandlePosition.y,
originalPosition.y - localBg.element.height / 2,
originalPosition.y + localBg.element.height / 2);
self.handleDragHelper._deltaHandlePosition.x = pc.math.clamp(self.handleDragHelper._deltaHandlePosition.x,
originalPosition.x - localBg.element.width / 2,
originalPosition.x + localBg.element.width / 2);
self.entity.setLocalPosition(self.handleDragHelper._deltaHandlePosition);
});
self.handleDragHelper.on('drag:end', function(pos){
console.log("stopped");
hnd.setLocalPosition(originalPosition);
});
};
Any ideas how to make it a round movement rather than rectangular?