- Blends
- Filters
- Layers
Code: Select all
Procedure.i StartLayeredDrawing(DrawingOutput, *DrawFunction, *OnRenderEndFunction=0)
!return Caman(v_DrawingOutput.canvas, function(){
! v_DrawingOutput.caman=this;
! p_DrawFunction(v_DrawingOutput);
! this.render(function(){ p_OnRenderEndFunction && p_OnRenderEndFunction.call(this); });
!});
EndProcedure
Procedure AddDrawingLayer(DrawingOutput, Opacity=100, BlendMode.s="normal", LayerDrawingOutput=0, AppliedFilters.s="")
!v_DrawingOutput.caman.newLayer(function () {
! if (v_LayerDrawingOutput){
! this.imageData = v_LayerDrawingOutput.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
! this.pixelData = this.imageData.data;
! }
! this.setBlendingMode(v_BlendMode);
! this.opacity=v_Opacity;
!});
EndProcedure
Procedure DrawingFilter(DrawingOutput,Filter.s,Value)
!v_DrawingOutput.caman[v_Filter](v_Value);
EndProcedure
CompilerIf #PB_Compiler_IsMainFile
; ****************************
; EXAMPLE
; ****************************
;{ Utils
Procedure UsePlugin(Plugin.s, Path.s, *FunctionUsingPlugin, EnforceDefine=#False)
!cfg={ enforceDefine: v_EnforceDefine, paths: {} };
!cfg.paths[v_Plugin]=v_Path;
!requirejs.config(cfg);
!require([v_Plugin], function(plug) {
! p_FunctionUsingPlugin(plug);
!});
EndProcedure
;}
Enumeration
#WIN=100
#IMAGE
#BUTTON
#CANVAS
EndEnumeration
#Drawing_Blend_Normal$="normal"
#Drawing_Blend_Multiply$="multiply"
#Drawing_Blend_Screen$="screen"
#Drawing_Blend_Overlay$="overlay"
#Drawing_Blend_Difference$="difference"
#Drawing_Blend_Addition$="addition"
#Drawing_Blend_Exclusion$="exclusion"
#Drawing_Blend_SoftLight$="softLight"
#Drawing_Blend_Lighten$="lighten"
#Drawing_Blend_Darken$="darken"
Procedure DrawingLayeredImage(DrawingOutput)
layer1_ImageOutput=ImageOutput(CreateImage(#PB_Any,300,300,32,RGB(0,100,0)))
If StartDrawing(layer1_ImageOutput)
Box(50,50,20,20,RGB(255,100,255))
Box(150,110,80,50,RGB(100,0,255))
StopDrawing()
EndIf
layer2_ImageOutput=ImageOutput(CreateImage(#PB_Any,300,300,32,RGB(0,100,0)))
If StartDrawing(layer2_ImageOutput)
Box(20,250,20,20,RGB(255,100,255))
Box(50,10,70,50,RGB(100,0,255))
StopDrawing()
EndIf
AddDrawingLayer(DrawingOutput, 10, #Drawing_Blend_Exclusion$, layer1_ImageOutput)
DrawingFilter(DrawingOutput,"hue",50)
AddDrawingLayer(DrawingOutput, 60, #Drawing_Blend_Addition$, layer2_ImageOutput)
DrawingFilter(DrawingOutput,"hue",50)
EndProcedure
Procedure TestCamanAPI()
If OpenWindow(#WIN, 0, 0, 640, 480, "Image Processing - CamanJS", #PB_Window_Background)
CanvasGadget(#CANVAS,5,30,300,300)
StartDrawing(CanvasOutput(#CANVAS))
Box(0,0,300,150,RGB(50,100,200))
Box(0,150,300,150,RGB(150,200,60))
StopDrawing()
StartLayeredDrawing(CanvasOutput(#CANVAS), @DrawingLayeredImage())
EndIf
EndProcedure
UsePlugin("Caman","//cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min",@TestCamanAPI());
CompilerEndIf